S P C E.com – Assalamualikum wr wb pembaca setia
saifulcomelektronik.com, Tahukah anda cara Modifikasi
template yang belum mobile friendly menjadi sebuah template mobile friendly ?
Nah, dalam kesematan kali ini saya mencoba mengulas sedikit tentang hal ini, Karna
S P C E.com baru saja mengalami hal seperti ini, template yang saya gunakanakan
awal sebelumnya bukan mobile friendly dan sekarang sudah saya modifikasi sedikit
kode HTML dan akhirnya template yang saya gunakan untuk website blog S P C
E.com menjadi mobile friendly. Seperti gambar di bawah ini :
Cara memodifikasi template yang
belum mobile friendly menjadi mobile friendly sebenarnya mudah saja, Namun tentunya
kita harus tahu sedikit tentang bahasa kode HTML. Kasus yang sering di alami sahabat blogger
pemula termasuk S P C E.com adalah template yang bukan mobile friendly
desainnya lebih bagus, karna desainya bagus namun engan untuk mengganti
template tersebut ke template mobile friendly.
Template yang belum mobile
friendly, Jika kita gunankan tentunya akan mempengaruhi jumlah visitor website
kita yang kurang begitu banyak. Nah, tentunya anda bertanya bagaimana
merubahnya template tersebut ? Tentunya pertanyaan ini ini sering sekali di
tanyakan oleh seorang yang baru melakoni dunia blogging. Baik langsung saja pada
kasus cara modifikasi template tersebut agar mobile friendly. Ikuti sugestinya
di bawah ini
1. Pertama Login ke Dasbor
Blog (user/pass)
2. Setelah login Klik >>
TEMPLATE << Kemudian ketahap selanjutnya
3. Setelah terbuka Halaman template
blog anda, tampilannya seperti gambar di bawah ini, kemudian cari kode <head>
Untuk lebih cepat mencarinya
tekan tombol >> Ctrl + F
<< maka akan tampil menu nafigasi pencarian di pojok kanan atas halaman
HTML. Setelah anda menemukan kode tersebut copy paste kode di bawah ini, tepat
di bawah kode <head> kemudian
simpan. Lebih jelasnya seperti gambar di atas.
<meta content='width=device-width,
initial-scale=1, maximum-scale=1' name='viewport'/>
|
4. Klik >> Template << kembali, nonaktifkan
template seluler, caranya klik menu grid ( gerigi ) di bawah menu template
seluler, setelah terbuka pilih ○● ( Tidak, tampilkan template seluler di
perangkat seluler ) seperti gambar di bawah ini.
5. Sesudah selesai melakukan
poin yang ke 4, kembali lagi ke halaman HTML template. Cari kode >> ]]></b:skin> << Untuk lebih cepat mencarinya
tekan tombol >> Ctrl + F
<< maka akan tampil menu nafigasi pencarian di pojok kanan atas halaman
HTML. Kemudian copy paste kode di bawah ini tepat di bawah kode ]]></b:skin>
<style>
@media only screen and
(min-width:768px) and (max-width:989px) {
#outer-wrapper {width:730px;
margin:0 auto }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
@media only screen and
(max-width:767px) {
#outer-wrapper {width:540px;
margin:0 auto }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
@media only screen and
(max-width: 580px) {
#outer-wrapper { width:
500px }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
@media only screen and
(max-width: 490px) {
#outer-wrapper { width:
430px }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
@media only screen and
(max-width: 479px) {
#outer-wrapper { width:
280px }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
@media screen and
(max-width: 260px) {
#outer-wrapper { width:
210px }
#main-wrapper {width:640px;}
#sidebar-wrapper
{width:320px;}
#footer {width:940px;}
}
</style>
|
Keterangan :
Untuk kode { width:…..px } silakan anda rubah sendiri, sesuai dengan kode template
yang anda gunakan, kode { width:…..px } di atas adalah kode template website
blog S P C E sendiri, tentunya setiap template ukuranya berbeda.
6. Klik >> SIMPAN
<< template anda telah menjadi mobile friendly ( responsif ). Lebih jelasnya saya sudah siapkan video tutorialnya di bawah ini, silakan anda lihat. Selamat mencoba,.....
Demikian dulu yang dapat S P C
E.com shere, semoga apa yang S P C E shere ini bermanfaat buat teman – teman semua,
khususnya buat pembaca setia SPCE.com dimanapun berada. Dukung terus website S
P C E.com yang sederhana ini dengan cara LIKE
dan SHERE agar website ini lebih maju lagi.
Baca Artikel Berikutnya
Comments0
Ketentuan berkomentar disini, maupun berkomentar di Comments Plugin facebook:
1. Dilarang menautkan link aktif maupun mempastekan link mati
2. Dilarang berkomentar di luar topik (OOT),
3. Dilarang promosi, dan komentar-komentar yang tidak sopan yang anda tidak sukai juga
4. Komentar Kurang sopan, jadi komentar seperti itu tidak di tampilkan. pastinya akan di hapus
5. Terima Kasih Atas perhatiannya.
Provisions comments here, nor commented on Comments Plugin Facebook
1. It is forbidden to link active link and paste mem dead link
2. Prohibited commented off-topic (OOT),
3. The promotion is prohibited, and the comments were disrespectful that you do not like too
4. Comments Less politely, so comments like that are not in the show. certainly will be deleted
5. Thank you for your attention.