hai , kali ini kholil rohman official akan membahas bagaimana cara membuat blog responsive?
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?
lebih mudah kalo kalian komen :D mudah-mudahan bermanfaat , itulah bagaimana cara membuat blog responsive?
