Skip to main content

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB