Cara Membuat Responsive Template Default Blogger . Sobat blogger, Berhubung algoritma sekarang yaitu mobilegedon adalah sangat menganjurkan sekali bagi para pengguna blog untuk membuat tampilan templatenya menjadi responsive atau ramah dalam semua tampilan dan ukuran entah itu di buka dalam sebuah handphone ataupun tablet, maka jika kita tidak mengubahnya menjadi responsive itu akan sangat berbahaya bagi kemajuan blog anda.
Namun bagaimana jika anda sudah terlanjur menggunakan template default blogger atau template bawaan blogger, karena biasanya template bawaan blogger tidak di dukung dengan tampilan responsive atau ramah tampilan dengan ukuran layar kecil.
Untuk itu saya disini ingin membagikan sebuah tutorial bagaimana cara mengubah template bawaan blogger menjadi responsive atau ramah dalam segala tampilan ukuran layar.
Cara Membuat Responsive Template Default Blogger.
Silahkan nonaktifkan terlebih dahulu fitur navbar blogger di menu tata letak, edit widget navbar, pilih option dan pilih off.
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
2. Kemudian ganti kode tersebut dengan kode dibawah ini.
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
3. Selanjutnya cari kode di bawah ini.
<b:if cond='data:blog.isMobile'>4. Lalu ganti kode tersebut dengan kode di bawah ini.
<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'/>
5. Langkah terakhir, letakan 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>
6. Klik simpan/save template.
Untuk hasil template bawaan blogger yang sudah saya buat responsive silahkan lihat di tombol demo.
