Setting Template Default Ke Responsive

Aku bingung mau ngasih judul apaan.. 😄
Saat pertama kali aku bikin blog ini, kakak ku komen katanya blog harus dibuat responsif supaya bisa dilihat disemua jenis layar. Dia pun ngasih beberapa kode untuk template.
Sebenarnya di Blogger juga udah ada pengaturan untuk tampilan mobile, tapi tampilannya kurang mantep, dan gak sama dengan tampilan asli.

Untungnya aku punya skill 0.1% dibidang kode-kodean. Hehe.. 😜

Nih kodenya dan penempatannya;

1. Pertama harus menonaktifkan navbar. Di halaman Tata Letak Blogger edit Navbar lalu pilih Off dan Simpan.

2. Buka tab Template lalu Edit HTML, cari kode isMobile, lalu ganti kode dari <meta expr:content ...sampai... viewport/> dengan kode <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

3. lalu cari kode
.post-body img, .post-body .tr-caption-container {
   padding: $(image.border.large.size);}

4. Ganti dengan kode ini (kalau gak ada buat baru aja)
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

5. Tempatkan kode ini diatas 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>

6. Selesai dan simpan.

Tapi menurut aku dengan kode diatas (nomor 4), tampilan mobile, khususnya gambar, jadi gak fit di layar. Gambar malah lebih ke pinggir kalau di center align dan kalau di set align left, teks malah nyatu dengan gambar kalau dilihat versi web.

Beberapa menit frustasi, dan akhirnya ketemu juga. Aku sedikit ubah dengan menambahkan display dan margin supaya sedikit rapi. Seperti ini

.post-body img, .post-body .tr-caption-container {
  padding: 2px 0;
  margin: 0 auto 10px;
  display: block;
  width:auto;
  max-width:100%;
  height:auto;
}

Alhamdulillah, lumayan rapi. Hehe.. kalau kamu kayak gimana?

Sumber:
Kode: My brother
Gambar atas:  simenty.com