Cara Membuat Template Default Blogger Jadi Responsive

Cara Membuat Template Bawaan Blogger Menjadi Responsive.

TEMPLATE bawaan blogger (default blogger template) tidak responsive. 

Namun, blogger menyediakan fasilitas mobile devices di setting template.

Bagi Anda yang selama ini nyaman dengan template default blogger, dan ingin templatenya menjadi responsive, berikut langkah-langkah mudah untuk mengubah template bawaan blogger ini menjadi responsive (mobile friendly).

Dengan menjadikannya responsive, maka optimisasi lainnya tidak akan sia-sia alias tetap berfungsi saat blog dibuka di HP.

Cara Menjadikan Responsive Template Bawaan Blogger

1. Nonaktifkan widget Navbar. Layout > Edit Widget Navbar > pilih 'Off".
2. Cari (Ctrl+F) kode berikut ini:

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

3. Hapus dan ganti dengan kode berikut ini:

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

4. Cari lagi kode di bawah ini. Jika kode ini tidak ditemukan, lewati saja.

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

5. Ganti dengan kode berikut ini:

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

6. Cari kode </head> lalu Copas kode berikut ini tepat di atasnya:

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

7. Save! Simpan Template.

Demikian Cara Membuat Responsive Template Default Blogger sebagaimana dishae Kompi Ajaib. Live Demonya bisa dilihat di Bandung Blogger Lab. Itu template bawaan blog, lalu dibuat responsive dengan cata di atas.*