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.
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 ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' 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.