Nah, dalam kesematan kali ini saya mencoba mengulas sedikit tentang hal ini, Karna Kami 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 kami 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 sederhana ini dengan cara LIKE dan SHERE agar website ini lebih maju lagi.
Baca Artikel Berikutnya
Demikianlah Artikel Modifikasi template yang belum mobile friendly menjadi mobile friendly
mudah-mudahan bisa memberi manfaat untuk anda semua dan jangan lupa apabila info ini berguna mohon di share....