Selasa, 20 Juni 2017

Merubah Template Default Blogger Jadi Responsive


Dirolu - Tren mobilegedon memaksa pengguna blog menggunakan template dengan tampilan mobile. Artinya, template yang digunakan harus ramah dalam semua tampilan dan ukuran. Bagi pengguna blogger dengan template bawaan harus berpikir lagi untuk merubah tampilannya responsive di semua ukuran.

Kali ini, bagi yang doyan utak atik template blog berikut tips untuk merubah tampilannya menjadi responsive dan ramah terhadap ukuran kecil.

Seperti biasanya, sebelum utak atik terlebih dahulu harus login. Langkah pertama adalah menonaktifkan fitur Navbar Blogger di bagian tata letak dengan memilih option "of"

Selanjutnya menuju menu Template > edit HTML

1. Cari kode dibawah ini
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
2. Setelah ketemu, ganti dengan kode dibawah ini :
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
3. Dilanjutkan dengan mencari 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>
4. Ganti dengan kode dibawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
5. Terakhir, letakkan kode dibawah ini sebelum 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. Simpan/save template


Untuk hasilnya silahkan dicek dan lakukan custom bila terjadi kekurangan. (and)