Cara Menampilkan Foto atau Gambar Berdampingan Pada Halaman Posting Blog

5/27/2012
Foto atau gambar merupakan salah satu tools yang dapat dipergunakan untuk mempermudah orang lain cepat memahami maksud pesan disampaikan dalam tulisan baik dalam buku, surat kabar, majalah, media online blogging dan lain-lain.

Yang dibahas di sini adalah menampilkan dua atau lebih foto secara berdampingan (kiri-kanan) dalam dunia online bloging. Manfaat menampilkan dua atau lebih foto secara berdampingan antara lain dapat menghemat ruang kosong pada halaman posting.

Foto berdampingan
Tampilan Foto berdampingan

Cara menempatkan foto atau gambar berdampingan pada halaman posting blog dapat dilakukan dengan langkah-langkah berikut ini. Namun langkah-langkah yang dijelaskan ini blogger sedang berada dalam halaman posting yang telah memiliki gambar.

Detail langkah-langkah menampilkan foto atau gambar berdampingan dalam posting blog dapat dilakukan sebagai berikut, yaitu:
  1. Klick Edit HTML yang berada pada bagian atas halaman posting untuk menemukan kode gambar
  2. Gadget HTML Blogger
  3. Block kode gambar yang ingin ditampilkan berdampingan pada halaman edit posting Compose. Kode gambar ke dua yang ambil ini hanya kode gambar saja atau tanpa kode <div class="separator" style="clear: both; text-align: center;"> yang berada pada bagian atas gambar dan sebelum tak pemisah penutup gambar (div>
  4. Cut (ambil) kode gambar ke dua sesuai cara yang diuraikan pada langkah ke dua di atas dan tempatkan sesuai petunjuk step ke 4 berikut ini.
  5. Tempatkan kode:
  • Apabila ingin menampilkan gambar kedua di sebelah gambar pertama letakan kodenya sebelum tag pembuka gambar (<a href="....) atau setelah tag pembuka pemisah gambar (<div class="separator" style="clear: both; text-align: center;">).
  • Sedangkan jika ingin menempatkan gambar ke dua pada sisi kanan gambar pertama letakan kode gambar setelah kode penutup gambar </a> atau sebelum tag penutup pemisah gambar </div>
  • Untuk lebih jelasnya penempatan kode-kode dimaksud perhatikan kode berwarna pada kode gambar di bawah ini
Letak kode gambar yang telah dimasukan (insert) dalam halaman Compose blog (setelah klick Edit HTML) biasanya seperti kode di bawah ini
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwn3DCneGoZP_oZfnmwLONOsTLJ0H4h-hk315mnMJ8tH-gGw4aiyfRoelwERtDr3LYsAwTa4DPBhjDmpMzjaP4MmqcOrPha5xZhwjd6H8eChZ1VGfJLJqTYg0e83cvu534cgKYKx4j_FoI/s1600/Mark+Zuckerberg-Priscilla+Chan.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwn3DCneGoZP_oZfnmwLONOsTLJ0H4h-hk315mnMJ8tH-gGw4aiyfRoelwERtDr3LYsAwTa4DPBhjDmpMzjaP4MmqcOrPha5xZhwjd6H8eChZ1VGfJLJqTYg0e83cvu534cgKYKx4j_FoI/s400/Mark+Zuckerberg-Priscilla+Chan.jpg" width="400" /></a></div>
Ronamasa