Cara Membuat Template Blog Menjadi Responsive

- Kamis, Januari 18, 2018
Pada sekarang ini kebanyakan dari pengguna internet menggunakan ponselnya untuk aktivitas online seperti membaca email, transaksi online, baca berita dan lain sebagainya.

Cara Membuat Template Blog Menjadi Responsive

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
Mobile template
Klik icon di atas

4. Centang "Ya, tampilkan template mobile pada perangkat mobile" seperti ini
Mobile Friendly

5. Dan simpan

Silahkan berkomentar Sesuai Dengan Topik Yang di Bahas!!!

Saya akan senang sekali jika sobat membaca dulu Aturan Berkomentar di Brodanie sebelum sobat memposting komentarnya
EmoticonEmoticon

 

Start typing and press Enter to search