Membuat Tema Simple Bold Menjadi Responsive

Salah satu tema bawaan blogger yang saya sukai ialah tema simple blog karena menurut saya mudah di modifikasi meskipun saya tidak mengerti banyak tentang cara memodifikasi sebuah tema blogger/blogspot 

Contoh  tema simple blog  bawaan blogger yang saya maksudkan ialah seperti contoh gambar dibawah ini.

Meskipun belum responsive atau dapat beradaptasi di berbagai  ukuran layar gadget seperti tema bawaan keluaran baru, tapi tema ini juga dapat dibuat responsive dengan sedikit melakukakan perubahan struktur kode pada tema.

Berikut cara membuat tema simple blog menjadi responsive.

Tips: Untuk memudahkan pencarian kode pada editor HTML tema blogger, silahkan anda gunakan tombol CTRL+F jika anda menggunakan komputer.

1.Pertama yaitu menonaktifkan navbar, caranya dengan klik Tata Letak »  klik Edit pada Bagian Navbar »  pilih off, lalu klik simpan, seperti contoh gambar dibawah ini.

2.Pada menu utama blogger silahkan anda klik Tema » edit HTML, seperti contoh gambar dibawah ini.

3.Pada editor HTML tema. silahkan anda cari kode seperti kode dibawah 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'/>

Ganti kode tersebut dengan kode berikut ini.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4.Berikutnya anda cari kode berikut ini.

 </head>

Letakkan kode berikut ini  diatas kode tersebut.

<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.Agar gambar menjadi responsive, silahkan anda cari  terlebih dahulu kode berikut ini.

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

Ganti dengan kode berikut ini.

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

6.Terakhir, silahkan anda klik simpan.

Untuk melihat hasilnya, silahkan anda kunjungi blog anda.

Demikianlah cara membuat tema simple blog menjadi responsive, semoga bermanfaat.

Baca Juga

• 
  Menyembunyikan link atribusi pada tema simple bold
• 
  Menyembunyikan navbar pada tema simple bold