Tempate-template tersebut mempunyai struktur yang hampir sama. Namun, template yang disediakan oleh pihak Blogger tidak responsive, sehingga kita harus mengaktifkan template mobile bawaan blogger untuk susukan seluler.
Cara Membuat Template Default Blogger Menjadi Responsive
Kita dapat menciptakan template bawaan Blogger ini menjadi responsive. Nanti yang dicentang dalam gambar di atasa adalah “No. Show desktop template on mobile devices”.
1. Pilih atau pasang template Simple
2. Klik Tata Letak > di bagian Navbar klik edit kemudian di nonaktifkan saja dengan menekan tombol Off, kemudian klik Simpan.
3. Tema > Edit HTML
4. Cari isyarat 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>
Hapus dan ganti lagi semua isyarat di atas dengan isyarat di bawah ini
<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>
5. Cari isyarat di bawah ini:
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size)
}
6. Hapus dan ganti dengan isyarat di bawah ini semoga gambar menjadi responsive
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
7. Copas isyarat berikut 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>
8. Simpan!