Cara Mudah Membuat Template Default Blogger Menjadi Responsive - Siapa sih yang gak mau templatenya menjadi responsive, apalagi ketika kita ingin menggunakan template bawaan blogger dimana template tersebut belumlah responsive dan harus di responsive-kan.
Bagaimana caranya?? Ini dia caranya.
Langkah Pertama
Non aktifkan terlebih dahulu navbarnya, caranya pergi ke tata letak, pada pojok kanan atas ada navbar klik edit, kemudian off-kan dan simpan.
Langkah Kedua
Membuat gambar postingan menjadi responsive. Silahkan cari kode dibawah ini
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Langkah Ketiga
Cari kode dibawah 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>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
Langkah Keempat
Selanjutnya simpan kode dibawah ini, tepat 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>
Demo Template Default Blogger yang sudah Responsive
Demo: http://buronanmp3.blogspot.com
Gampang bukan, ayo tunggu apa lagi ^_^
Terimakasih Kang Adhy Suryadi :). Referensi: http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html
