Blogger : How to Merge 2 Thumbnail Side by Side

Bisakah memajang dua gambar dalam postingan secara bersebelahan?

Secara teknis tentu bisa. Kita bisa mengatur agar tampilan dua gambar thumbnail berjajar satu sama lain.

Pastikan saat melakukan posting, kita memilih mode "Compose" (bukan "Edit HTML").
Pada jendela "Tambahkan sebuah gambar dari komputer anda", perhatikan pada bagian "Pilih sebuah Layout",dan coba pilih "Tidak ada". Pilihan ini akan memaksa gambar fleksibel di dalam postingan. Mengapa tak memilih perataan "Kiri" atau "Kanan"? Ini tak lebih untuk mengakali lebar kolom postingan. Bila kita memilih salah satu dari "Kiri" atau "Kanan", akan ada peluang lebih besar pada gambar untuk tergeser oleh teks yang berada disebelahnya.

Ok, selanjutnya unggah (upload file gambarnya. Ulangi lagi untuk mengunggah file berikutnya.

Sampai sini, bila kita lihat postingan melalui mode "Compose", akan muncul dua gambar berada di posisi atas dan bawah. Loh, mengapa tak menyamping kanan dan kiri? Sabar, proses belum selesai. Hingga tahap ini memang posisi ini yang akan ditampilkan. Trik berikut akan mengubah posisi menjadi menyamping.

Masuk ke mode Edit HTML, dan akan ditemukan kode seperti berikut :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG3jltVnKXmiiif6F76Bx-YNOgU2rZPRCQPJENZI3neuJ7ToHv6L145xWNuof3AvUSg91plMgxgLUeH5Y7Pc3GwgxQK3t3-aDwtKI0e9kFVhTRemQh1rzon26HYWmeQVfI9Tz/s200/IMG_2945.JPG"><img style="cursor: pointer; width: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG3jltVnKXmiiif6F76Bx-YNOgU2rZPRCQPJENZI3neuJ7ToHv6L145xWNuof3AvUSg91plMgxgLUeH5Y7Pc3GwgxQK3t3-aDwtKI0e9kFVhTRemQh1rzon26HYWmeQVfI9Tz/s200/IMG_2945.JPG" alt="" border="0" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG3jltVnKXmiiif6F76Bx-YNOgU2rZPRCQPJENZI3neuJ7ToHv6L145xWNuof3AvUSg91plMgxgLUeH5Y7Pc3GwgxQK3t3-aDwtKI0e9kFVhTRemQh1rzon26HYWmeQVfI9Tz/s200/IMG_2945.JPG"><img style="cursor: pointer; width: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG3jltVnKXmiiif6F76Bx-YNOgU2rZPRCQPJENZI3neuJ7ToHv6L145xWNuof3AvUSg91plMgxgLUeH5Y7Pc3GwgxQK3t3-aDwtKI0e9kFVhTRemQh1rzon26HYWmeQVfI9Tz/s200/IMG_2945.JPG" alt="" border="0" /></a>

Perhatikan teks yang berwarna merah, lalu klik mouse kita di depan <a onblur.. lalu tekan tombol Backspace (bertanda panah ke kiri pada PC, atau Bk Sp pada laptop). Hingga kode <a onblur akan merapat ke kode </a> didepanya (atau tak lagi berada di baris berbeda).

Setelah ini kita klik mode "Compose" sekali lagi. Lihat perbedaanya. Gambar menjadi bersebelahan kan skarang?

Lalu bagaimana untuk menempatkan keduanya tepat berada di tengah postingan? Blok kedua gambar tadi (bisa dengan melakukan penyorotan dari bagian luar kanan gambar ke bagian kiri gambar), lalu tekan ikon "rata tengah" pada toolbar di editor. Nah, gambarpun sempurna berada di tengah.

Perhatikan, bila tampilan di editor berbeda dengan tampilan di blog, ada baiknya mencermati bagian lebar kolom utama. Cara diatas tentu masih mengindahkan perhitungan matematis. Yakni lebar total kedua gambar tak lebih lebar dari kolom postingan. Untuk mengetahui lebar kolom postingan, kita bisa melihatnya di bagian :

#main (pada bagian @media all).

Atau cara lainnya adalah, bila kita tak memperlukan tampilan thumbnail, maka kita bisa gunakan HTML murni, dengan cara menghilangkan alamat tautan gambar besarnya, lalu kode bawaan dari blogger ini digabungkan seperti biasa, tanpa menempatkn kode <br> diantaranya.


Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com