Cara mudah membuat responsive template default Blogger

Seperti kita ketahui bahwa template default yang disediakan Blogger belum responsive, template bawaan Blogger masih menggunakan versi mobile untuk device-device kecil. Sedangkan Google sendiri yang notabene merupakan si empunya Blogger menganjurkan untuk menggunakan template yang responsive.

Nah bagi Anda yang menggunakan template default Blogger, saya kini akan share cara mudah membuat responsive template default Blogger. Hanya perlu beberapa langkah mudah yang saya yakin Anda bisa melakukannya. Silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Nonaktifkan navbar Blogger, silahkan masuk ke layout atau tata letak kemudian edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

2. Langkah Kedua

Membuat gambar postingan menjadi reponsive. Silahkan cari kode di bawah ini.

.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }

Kemudian silahkan ganti kode di atas dengan kode di bawah ini

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

3. Langkah Ketiga

Silahkan cari kode di bawah ini

<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

Kemudian ganti dengan kode di bawah ini

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Langkah Keempat

Silahkan simpan kode di bawah ini di atas kode </head>

<style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

Selesai...sekarang template default Blogger yang Anda gunakan sudah responsive, mudah bukan? [DD]