Tema Simple merupakan salah satu tema bawaan Blogger yang masih banyak digunakan hingga saat ini. Selain tampilannya yang bersih dan ringan, tema ini juga mudah dimodifikasi sehingga cocok untuk pemula yang ingin belajar mengedit template Blogger.
Sayangnya, tema Simple versi bawaan masih memiliki kekurangan, yaitu belum sepenuhnya responsive. Ketika dibuka melalui smartphone atau tablet, tampilan blog sering kali melebar sehingga pengunjung harus melakukan zoom untuk membaca isi artikel.
Pada tutorial ini, Anda akan mempelajari cara membuat tema Simple Blogger menjadi responsive hanya dengan mengubah beberapa bagian kode HTML dan CSS.
Mengapa Tema Simple Perlu Dibuat Responsive?
Tema yang responsive memiliki banyak keuntungan, di antaranya:
Tampilan blog menyesuaikan ukuran layar perangkat.
Pengunjung lebih nyaman membaca artikel melalui smartphone.
Meningkatkan pengalaman pengguna (User Experience).
Lebih ramah terhadap SEO karena Google mengutamakan website yang mobile-friendly.
Tips: Agar lebih mudah mencari kode pada editor HTML Blogger, gunakan tombol Ctrl + F pada keyboard jika Anda menggunakan komputer atau laptop.
Cara Membuat Tema Simple Blogger Menjadi Responsive
1. Nonaktifkan Navbar Blogger
Langkah pertama adalah menonaktifkan Navbar Blogger.
Caranya:
Masuk ke dashboard Blogger.
Klik Tata Letak.
Pada bagian Navbar, klik Edit.
Pilih Nonaktifkan.
Klik Simpan.
2. Masuk ke Editor HTML
Selanjutnya:
Klik menu Tema.
Pilih Edit HTML.
3. Ubah Kode Viewport
Cari kode berikut.
<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'/>
Kemudian ganti dengan kode berikut.
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Perubahan ini membuat lebar halaman mengikuti ukuran layar perangkat yang digunakan.
4. Tambahkan CSS Responsive
Cari kode berikut.
</head>
Lalu letakkan kode CSS berikut tepat di atas 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 0!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>
Kode di atas akan membuat tata letak blog menyesuaikan ukuran layar sehingga lebih nyaman ketika dibuka menggunakan perangkat mobile.
5. Membuat Gambar Menjadi Responsive
Agar seluruh gambar dalam artikel dapat menyesuaikan ukuran layar, cari kode berikut.
.post-body img,
.post-body .tr-caption-container {
padding: $(image.border.large.size);
}
Kemudian ganti dengan kode berikut.
.post-body img,
.post-body .tr-caption-container{
padding:0;
width:auto;
max-width:100%;
height:auto;
}
Dengan perubahan ini, gambar tidak akan melebar keluar dari area artikel saat dibuka melalui smartphone.
6. Simpan Template
Langkah terakhir adalah mengklik tombol Simpan.
Setelah template berhasil disimpan, buka blog Anda menggunakan smartphone atau perkecil ukuran jendela browser untuk melihat hasilnya.
Hasil yang Akan Didapat
Setelah mengikuti tutorial di atas, tema Simple Blogger akan memiliki beberapa peningkatan, antara lain:
Tampilan lebih nyaman di perangkat mobile.
Layout mengikuti ukuran layar secara otomatis.
Gambar menjadi responsive.
Sidebar tampil lebih rapi pada layar kecil.
Blog menjadi lebih mobile-friendly.
Penutup
Meskipun tema Simple merupakan template bawaan Blogger yang sudah cukup lama, tema ini masih layak digunakan karena ringan, cepat, dan mudah dimodifikasi. Dengan sedikit perubahan pada bagian viewport serta penambahan CSS responsive, Anda dapat membuat tampilannya jauh lebih nyaman digunakan pada berbagai ukuran layar.
Semoga tutorial ini bermanfaat dan membantu Anda dalam mengoptimalkan tampilan blog Blogger agar lebih modern dan ramah bagi pengunjung.