Blogger.com menyediakan beberapa template bawaan yang cukup banyak. Template ini ada pada dashboard Blogger. Meskipun Google mengharuskan untuk menggunakan template resposive, namun secara deafult atau bawaan tidak ada template yang responsive.
Jadi pengguna harus mengubahnya sendiri menjadi tampilan responsive. Ternyata mengubah template bawaan blogger.com tak sesulit yang dibayangkan asalkan kita tahu caranya. Responsive artinya tampilan web blog dapat dibuka dengan beberapa ukuran layar, sehingga dibuka dengan komputer dekstop, laptop, iphone, android, ukurannya menyesuaikan.
Gambar di bawah ini adalah blog dengan template bawaan blogger sebelum dan sesudah diubah menjadi responsive.
Cara Mengubah Template Bawaan Blogger Menjadi Responsive:
1. Langkah Pertama
Untuk menjadikan template responsive, Anda harus menonaktifkan Navbar blogger. Caranya masuk ke layout atau tata letak kemudian edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.
.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;
}
<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'/>
<style type='text/css'>5. Langkah Kelima
@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>
Simpan dan lihat hasilnya. Mudah bukan?? hehe untuk mengeceknya silahkan buka dengan hape atau memperbesar ukuran browser. Bisa juga cek responsive memalui cara berikut ini.
alhamdulah dah berhasil , makasih om infonya
BalasHapusOke gan, siap meraup dolar haha
Hapusamin...
HapusThanks bro
BalasHapusOkay bro, siap
Hapusletak kodenya di mana bro
BalasHapusLetak kode yang mana maksudnya? letaknya di edit HTML
Hapus