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.

Langkah Pertama

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

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;
}

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?

Untuk membuktikannya, saya sudah coba pada dua blog dengan template default Blogger yang berbeda. Silahkan coba dan lihat pada ke dua link di bawah ini.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments