Site and learn your application

Senin, 07 September 2015

Cara Mengubah Template Bawaan Blogger Menjadi Responsive

Indo Amaterasu
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.
Belum Responsive
Belum Responsive

Sudah Responsive
Sudah 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.
Navbar Blogger

2. Langkah Kedua
Membuat gambar postingan menjadi reponsive. Silahkan cari kode di bawah ini
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
Kemudian silahkan ganti kode di atas dengan kode di bawah ini
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
3. Langkah Ketiga
Silahkan cari kode 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>
Kemudian ganti dengan kode di bawah ini
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
4. Langkah Keempat
Silahkan simpan kode di bawah 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>
5. Langkah Kelima 
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.

7 komentar:

= > Silahkan berkomentar sesuai artikel di atas
= > Berkomentar dengan url (mati/ hidup) tidak akan dipublish