Pada beberapa template Blogger responsive yang pernah saya gunakan, saya mengalami masalah di mana gambar yang saya unggah dalam artikel posisinya tidak pas setelah pos tersebut diterbitkan. Maksud saya, ada ruang kosong di bagian sebelah kiri gambar. Untuk lebih jelasnya, bisa dilihat pada gambar atas.

Trik "Menghilangkan" Margin pada Gambar di Artikel Blogger

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 &quot;Menghilangkan&quot; 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 &quot;Menghilangkan&quot; 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.

Hasil Trik "Menghilangkan" Margin pada Gambar di Artikel Blogger

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

Previous Post Next Post