22/01/2025

Membuat tema simple bold blogger menjadi responsive

Membuat tema simple bold blogger menjadi responsive
Salah satu tema bawaan blogger yang banyak disukai ialah tema simple bold karena menurut saya mudah di modifikasi meskipun saya tidak mengerti banyak tentang cara memodifikasi sebuah tema.Tema ini sebenarnya belum responsive, untuk membuatnya menjadi responsive silahkan ikuti caranya dibawah ini.
Tips: Untuk memudahkan pencarian kode pada editor HTML tema blogger, silahkan anda gunakan tombol CTRL+F jika anda menggunakan komputer

Cara membuat tema simple bold blogger menjadi responsive

1. Pertama yaitu menonaktifkan navbar, caranya dengan cara klik Tata Letak lalu klik Edit pada bagian Navbar, berikutnya anda pilih Nonaktifkan, lalu klik Simpan.
2. Pada menu utama blogger silahkan anda klik Tema, Edit HTML.
3. Pada editor HTML tema, silahkan anda cari kode berikut 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'/> 
Lalu 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'/>
5. Letakkan kode berikut dibawah 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. 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);} 
Lalu ganti dengan kode berikut ini
.post-body img, .post-body .tr-caption-container {padding: 0; width:auto; max-width:100%; height:auto;}
7. Terakhir, silahkan anda klik Simpan.

Untuk melihat hasilnya, silahkan anda kunjungi blog anda. Demikianlah cara membuat tema simple blog menjadi responsive, semoga bermanfaat.