Cara Mengubah Template Bawaan Responsive

Cara Mengubah Template Bawaan blogger blogspot menjadi Responsive - memodifikasi template bawaan blogspot agar menjadi resposive, tujuannya agar halaman situs blog, blogspot bisa menyesuaikan tampilan secara otomatis sesuai besar resolusi layar perangkat yang digunakan, dengan begitu si pengunjung tidak kesulitan saat membaca atau melihat artikel yang ada pada halaman blog tersebut.



Contoh Halaman / Template Bawaan Blogspot

Dasar Modifikasi / Modifikasi Awal

1. Disable Navbar blogger / Matikan navbar bawaan, caranya >> Dasbor blogger >> Tata Letak >> Navbar >> Edit dan pilih Off kemudian Simpan.

2. Modif Script / Kode HTML

2.1 Cari kode ini :
.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size)
}

Kemudian Ganti dengan :
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

Kode tersebut untuk mengatur ukuran gambar, 

2.2 Cari Kode ini
<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Kemudian ganti (replace) dengan :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

2.3 Cari Kode </head> sisipkan kode ini tepat diatasnya :
<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>

3. Simpan template sahabat

Pengujian coba kecilkan browser yang digunakan dan lihat perubahannya.