Sebagai informasi, ukuran gambar di atas saya setel menjadi "Original size" di mana lebar asli gambar tersebut adalah melebihi dari lebar area posting pada template yang sedang saya gunakan saat ini, yaitu News Mag Responsive Magazine/News Blogger Template. Posisi gambar saya atur menjadi "Center". Selain itu, saya juga menambahkan "title" dan "alt" pada gambar tersebut sehingga kode HTML-nya menjadi seperti di bawah ini.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdC88hi-nPeYi85vd1oniB3mS9XMTCEBhYkjHXaRF7ilxRpXFD3UoAjJ_jDNieF5DpKMTIUgRqkDMq9XRdxcHIZkQZQEgFn0I3ZP4SwYcbPjb-E7s38AIS19eEsT-LyVg2ue5wqdIcJ_fy/s1600/Lanskap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Trik "Menghilangkan" Margin pada Gambar di Artikel Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdC88hi-nPeYi85vd1oniB3mS9XMTCEBhYkjHXaRF7ilxRpXFD3UoAjJ_jDNieF5DpKMTIUgRqkDMq9XRdxcHIZkQZQEgFn0I3ZP4SwYcbPjb-E7s38AIS19eEsT-LyVg2ue5wqdIcJ_fy/s1600/Lanskap.jpg" title="Trik "Menghilangkan" Margin pada Gambar di Artikel Blogger" /></a></div>
Ternyata, masalah yang menyebabkan gambar tidak "center" ini adalah adanya kode style="margin-left: 1em; margin-right: 1em;". Oleh karena itu, setelah kode ini dihapus dan artikel diperbarui, maka posisi gambar akan menjadi seperti di bawah ini.
Nah, sekarang gambar sudah terlihat pas di mana margin-nya sudah tidak ada lagi. Dengan cara ini, berarti kita harus menghapus kode tersebut sebelum menerbitkan artikel. Lalu, bagaimana bila kita sudah memiliki banyak artikel sebelumnya? Apa kita perlu mengedit artikel satu per satu? Tentunya hal ini akan memakan waktu dan tenaga serta kuota internet.
Ada solusi lain yang saya lakukan selain menghapus kode tersebut secara manual. Bagaimana caranya? Caranya adalah Blogger > Template > Edit HTML > letakkan kode di bawah ini sebelum ]]></b:skin>.
.separator a {margin-left: 0 !important;margin-right: 0 !important;}
Setelah itu, klik tombol "Simpan template".
Begitulah trik yang saya lakukan dalam "menghilangkan" margin pada gambar di artikel Blogger.
Namun, saya menemukan masalah baru setelah memasukkan kode tersebut di template, yaitu jika saya memasang gambar di artikel dalam posisi "Left" atau kiri, maka bagian kiri teks artikel akan "mepet" setinggi gambar tersebut.
Post a Comment