📸 Cara Membuat Gambar Postingan Blogger Tampil Penuh dan Responsif
Kabar baiknya: kamu bisa atasi itu dengan sedikit kode CSS. Artikel ini akan membantu kamu memperbaiki tampilan gambar agar selalu tampil penuh (full width) dan tetap proporsional di semua perangkat.
🔍 Masalah Umum
Banyak template Blogger membungkus gambar dengan tag seperti ini:
<a href="..." style="display: block;padding: 1em 0;text-align: center;">
<img src="..." class="medium-zoom-image">
</a>
Elemen <a> tersebut punya style bawaan yang secara tidak langsung membatasi lebar gambar, bahkan meskipun kamu sudah memberi width: 100% di gambar.
✅ Solusi: Tambahkan CSS Berikut
Masuk ke Dashboard Blogger > Tema > Edit HTML, lalu cari tag <style> (atau buat yang baru), dan tambahkan kode ini:
#post_middle a[style],
#post_middle a[style] img.medium-zoom-image {
display: block !important;
text-align: left !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
#post_middle a[style] img {
width: 100% !important;
height: auto !important;
display: block !important;
}
💡 Penjelasan Singkat:
- Menargetkan elemen <a> yang punya atribut
styleinline seperti yang sering muncul saat menyisipkan gambar di editor Blogger. - Memaksa gambar di dalamnya agar tampil penuh, tanpa batasan lebar atau margin yang aneh.
- Memastikan gambar tetap proporsional dan tidak pecah.
🧪 Hasil Akhir:
- Gambar akan tampil lebar penuh sesuai ukuran kontainer.
- Tidak akan terjepit di tengah.
- Tampak lebih profesional dan enak dilihat di perangkat apa pun.
Semoga trik ini bermanfaat buat kamu yang ingin tampilkan gambar secara maksimal di Blogger. Jangan ragu untuk berbagi artikel ini ke teman-teman Blogger lainnya. Ilmu yang dibagikan akan jadi amal jariyah!
Kalau kamu punya pertanyaan atau trik lainnya, boleh banget tulis di kolom komentar 💬
