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
2. Setelah ketemu, ganti dengan kode dibawah ini :.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
3. Dilanjutkan dengan mencari kode dibawah ini :.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
4. Ganti dengan 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'/>5. Terakhir, letakkan kode dibawah ini sebelum kode </head>
6. Simpan/save template<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>
Untuk hasilnya silahkan dicek dan lakukan custom bila terjadi kekurangan. (and)
Tags:
Trik Blog