Setelah berhasil membuat blog menjadi responsive, yaitu mampu menyesuaikan tampilan dengan berbagai ukuran layar, sebaiknya gambar yang terdapat di dalam postingan juga dibuat responsive.
Gambar yang tidak responsive terkadang memiliki ukuran yang lebih besar daripada area konten blog. Akibatnya, ketika postingan dibuka melalui perangkat dengan layar kecil seperti smartphone, gambar dapat melebar keluar dari area postingan dan membuat tampilan halaman menjadi kurang rapi.
Dengan membuat gambar postingan menjadi responsive, ukuran gambar akan menyesuaikan dengan lebar area konten yang tersedia. Jadi, meskipun Anda menggunakan gambar dengan ukuran besar, gambar tersebut tetap dapat menyesuaikan diri ketika ditampilkan pada layar yang lebih kecil.
Cara ini pernah saya terapkan pada tema lama bawaan Blogger, yaitu Simple Bold. Kemungkinan cara yang sama juga dapat diterapkan pada beberapa tema lama bawaan Blogger lainnya.
Cara Membuat Gambar Postingan Blogger Menjadi Responsive
Untuk membuat gambar postingan Blogger menjadi responsive, Anda hanya perlu menambahkan sedikit kode CSS pada template Blogger.
1. Login ke Blogger
Pertama, silakan login ke akun Blogger Anda melalui Blogger.com.
2. Buka Edit HTML
Setelah masuk ke dashboard Blogger, pilih Tema, kemudian klik Edit HTML.
3. Salin kode CSS
Salin kode CSS berikut:
.post-body img {
max-width: 100%;
height: auto;
}
.separator a {
margin-left: 0px !important;
margin-right: 0px !important;
}
Kode tersebut berfungsi agar gambar tidak melebihi lebar area postingan. Properti max-width: 100% membuat gambar menyesuaikan lebar kontainer, sedangkan height: auto menjaga agar perbandingan tinggi dan lebar gambar tetap proporsional.
Sementara itu, kode .separator a digunakan untuk menghilangkan jarak kiri dan kanan pada elemen gambar yang ditempatkan menggunakan fitur gambar Blogger.
4. Letakkan kode di atas </b:skin>
Setelah kode CSS disalin, cari kode berikut pada template:
]]></b:skin>
Kemudian letakkan kode CSS yang sudah disalin tepat di atas kode tersebut.
Hasilnya kurang lebih seperti ini:
.post-body img {
max-width: 100%;
height: auto;
}
.separator a {
margin-left: 0px !important;
margin-right: 0px !important;
}
]]></b:skin>
5. Simpan tema
Setelah kode ditempatkan dengan benar, klik Simpan untuk menyimpan perubahan pada template.
Selanjutnya, buka salah satu postingan blog melalui smartphone atau perkecil ukuran jendela browser untuk melihat hasilnya.
Mengapa Gambar Perlu Dibuat Responsive?
Gambar dengan ukuran besar memang dapat terlihat lebih baik pada layar komputer, tetapi jika ukurannya tidak menyesuaikan area konten, gambar dapat menyebabkan halaman blog melebar.
Hal tersebut terutama terlihat ketika postingan dibuka menggunakan smartphone. Gambar yang terlalu lebar dapat membuat pembaca harus menggeser halaman ke kiri dan kanan untuk melihat seluruh isi postingan.
Dengan CSS responsive, gambar akan mengikuti lebar area postingan sehingga tampilan menjadi lebih rapi dan nyaman dibaca pada berbagai ukuran layar.
Bagaimana dengan Tema Blogger Terbaru?
Jika Anda menggunakan tema Blogger terbaru seperti Essential, Emporio, Soho, atau Contempo, cara di atas kemungkinan tidak diperlukan.
Tema-tema tersebut pada dasarnya sudah menggunakan desain responsive sehingga elemen gambar pada postingan umumnya sudah dapat menyesuaikan ukuran layar perangkat secara otomatis.
Jadi, sebelum menambahkan kode CSS, sebaiknya periksa terlebih dahulu apakah gambar pada tema yang Anda gunakan memang mengalami masalah ketika ditampilkan pada perangkat mobile.
Penutup
Membuat gambar postingan Blogger menjadi responsive sebenarnya cukup mudah. Anda hanya perlu menambahkan kode CSS pada template agar gambar tidak melebihi lebar area postingan dan tetap mempertahankan proporsi ukurannya.
Cara ini terutama berguna bagi Anda yang masih menggunakan tema lama Blogger dan menemukan gambar postingan terlalu lebar ketika blog dibuka melalui smartphone.
Semoga tutorial ini bermanfaat dan dapat membantu membuat tampilan blog Blogger Anda menjadi lebih rapi serta nyaman diakses dari berbagai perangkat.