Cara menjadikan tema bawaan Blogger jadi responsive dengan mudah.
Catatan : Cara ini hanya dikhususkan untuk jenis tema klasik / tema lama saja. Untuk jenis tema baru di Blogger sudah menerapkan tampilan responsive namun untuk memodifikasi jenis tema baru lebih rumit dikarenakan 90% data rancangan HTMLnya diwakilkan dengan kode panggil.
Langkah pertama, sesuaikan tema dengan cara memanfaatkan Desainer Tema Blogger.
Untuk memulainya, buka halaman Tema lalu klik Sesuaikan.
Pada halaman Desainer, pilih Tata Letak lalu pilih tata letak satu kolom, baik di tata letak isi maupun tata letak kaki seperti gambar dibawah ini.
Untuk opsi lebar badan halaman, bisa diabaikan saja atau atur sesuka hati.
Ubah suaikan pengaturan lanjutannya yang ingin disesuaikan karena setelah ini, pengaturan akan lebih berfokus ke kode CSS dan HTML tema dan dengan bantuan Devtool.
Jika sudah, simpan pengaturannya, klik tombol terapkan perubahan lalu kembali ke halaman Tema.
Pada halaman Tema (edit HTML), langkah pertama kali adalah mengatur viewport. Ini adalah kunci utama agar tampilan menjadi benar-benar responsive.
Di bagian <head> temukan kode dibawah ini :
Catatan : Cara ini hanya dikhususkan untuk jenis tema klasik / tema lama saja. Untuk jenis tema baru di Blogger sudah menerapkan tampilan responsive namun untuk memodifikasi jenis tema baru lebih rumit dikarenakan 90% data rancangan HTMLnya diwakilkan dengan kode panggil.
Langkah pertama, sesuaikan tema dengan cara memanfaatkan Desainer Tema Blogger.
Untuk memulainya, buka halaman Tema lalu klik Sesuaikan.
Pada halaman Desainer, pilih Tata Letak lalu pilih tata letak satu kolom, baik di tata letak isi maupun tata letak kaki seperti gambar dibawah ini.
Untuk opsi lebar badan halaman, bisa diabaikan saja atau atur sesuka hati.
Ubah suaikan pengaturan lanjutannya yang ingin disesuaikan karena setelah ini, pengaturan akan lebih berfokus ke kode CSS dan HTML tema dan dengan bantuan Devtool.
Pada halaman Tema (edit HTML), langkah pertama kali adalah mengatur viewport. Ini adalah kunci utama agar tampilan menjadi benar-benar responsive.
Di bagian <head> temukan kode dibawah ini :
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
Hapus kode tersebut lalu ganti dengan kode ini ditempat yang sama.
<meta content="width=device-width, initial-scale=1" name="viewport"/>
Biasakan untuk langsung menyimpan perubahan setiap kali melakukan edit kode HTML / CSS, hal ini mengadopsi cara penyimpanan yang sama seperti pada saat membuat postingan baru. Tujuannya untuk menghindari kehilangan data apabila terjadi hal-hal yang tidak diinginkan. Yang membedakan hanyalah pada saat membuat postingan baru, data akan tersimpan secara otomatis sedangkan pada edit Tema kita lakukan secara manual.
Selanjutnya
Tidak ada komentar:
Posting Komentar