Pada sekarang ini kebanyakan dari pengguna internet menggunakan ponselnya untuk aktivitas online seperti membaca email, transaksi online, baca berita dan lain sebagainya.
Nah, peran kita sebagai blogger memanjakan pengunjung dengan template responsive yang mobile friendly atau template blog yang cerdas.
Survey membuktikan, lebih dari 52% pengunjung berasal dari perangkat seluler terutama di AS, Asia, Afrika.
Untuk itu, saat ini kita perlu membuat template blog yang responsive,
Karena ini sangat bagus untuk SEO.
...mari kita mulai.
Sebelumnya lakukan backup pada template untuk antisipasi apabila terjadi kesalahan yang tak kita inginkan.
Caranya, Dashbord => Tema => Backup/Pulihkan kemudian simpan.
Selanjutnya...
1. Buka Tema => Edit HTML
2. Tambahkan kode berikut dibawah tag <head>
Jika kita bingung dalam mengedit HTML atau CSS, kita bisa menggunakan metode alternative di bawah ini.
1. Masuk ke dashbord
2. Klik tema
3. Klik ikon tools, lihat gambar
4. Centang "Ya, tampilkan template mobile pada perangkat mobile" seperti ini
5. Dan simpan
Nah, peran kita sebagai blogger memanjakan pengunjung dengan template responsive yang mobile friendly atau template blog yang cerdas.
Survey membuktikan, lebih dari 52% pengunjung berasal dari perangkat seluler terutama di AS, Asia, Afrika.
Untuk itu, saat ini kita perlu membuat template blog yang responsive,
Karena ini sangat bagus untuk SEO.
...mari kita mulai.
Sebelumnya lakukan backup pada template untuk antisipasi apabila terjadi kesalahan yang tak kita inginkan.
Caranya, Dashbord => Tema => Backup/Pulihkan kemudian simpan.
Selanjutnya...
Responsive Untuk Semua Layar
1. Buka Tema => Edit HTML
2. Tambahkan kode berikut dibawah tag <head>
<meta name="viewport" content=" width=device-width , initial-scale=1, maximum-scale=1"/>Meta tag ini berfungsi untuk mendeteksi ukuran layar kemudian tambahkan kode CSS mobile friendly dibawah ini pada tag <body> cari tag <body> dan ganti dengan kode berikut :
<body expr: class = '& quot; loading & quot; + data: blog.mobileClass '>Atau bisa juga menggunakan kode queri CSS berikut
/* Laptops & Desktops */@media only screen and (max-width : 1280px) {
/* css here will be rendered if and only if device width is less than 1280px */
}
/* Tablets 1024px */
@media only screen and (max-width : 1024px) {
/* css here will be rendered if and only if device width is less than 1024px */
}
/* Tablets 768px */
@media only screen and (max-width : 768px) {
/* css here will be rendered if and only if device width is less than 768px */
}
/* Phones 640px */
@media only screen and (max-width : 640px) {
/* css here will be rendered if and only if device width is less than 640xpx */
}
/* Phones 480px */
@media only screen and (max-width : 480px) {
/* css here will be rendered if and only if device width is less than 480px */
}
/* Small Mobiles 320px */
@media only screen and (max-width : 320px) {
/* css here will be rendered if and only if device width is less than 320px */
}
Widget Costumize
Disini kita akan menampilkan widget tertentu pada tampilan ponsel, cari kode berikut.<b: widget id = ' ID-type ' locked = 'true' title = ' Widget-Title ' />Dan tambahkan tag mobile seperti ini
<b: widget id = ' ID-type ' locked = 'true' mobile = 'yes' title = ' Widget-title ' />Itu adalah tag untuk menampilkan widget dalam versi seluler.
Cara Membuat Template Blog Yang Responsive Dan Mobile Friendly Tanpa Mengedit HTML
Jika kita bingung dalam mengedit HTML atau CSS, kita bisa menggunakan metode alternative di bawah ini.
1. Masuk ke dashbord
2. Klik tema
3. Klik ikon tools, lihat gambar
 |
| Klik icon di atas |
4. Centang "Ya, tampilkan template mobile pada perangkat mobile" seperti ini
5. Dan simpan