Foto atau gambar yang ditampilkan dalam sebuah tulisan baik dalam buku, surat kabar, majalah maupun dalam dunia online blog, dan lain-lain bukan hanya untuk memperindah tampilannya semata.
Tampilan foto/gambar berdampingan (horizontal)
Tujuan utama menampilkan foto dalam tulisan adalah sebagai alat untuk memudahkan pembaca cepat memahami maksud pesan dalam tulisan tersebut.
Pada artikel ini akan dibahas cara menampilkan dua foto atau lebih berdampingan (horizontal) pada halaman posting. Kegunaan meletakan dua foto atau gambar berderet sejajar antara lain untuk menghindari banyaknya ruang halaman posting yang kosong.
Cara menampilkan dua foto (gambar) atau lebih sejajar akan dijelaskan berikut ini. Namun langkah yang diuraikan ini blogger sedang berada dalam halaman posting blog sudah ada gambarnya.
Cara menampilkan dua foto/gambar atau lebih berdampingan sejajar (horizontal) sebagai berikut, yaitu:
- Klick Edit HTML yang berada di bagian atas halaman edit posting untuk menemukan kode gambar
- Block kode gambar pada halaman compose. Kode gambar ke dua yang akan ditempatkan berdampingan dengan gambar pertama (horizontal). Kode yang diambil hanya kode gambarnya saja (tanpa tag pembuka pemisah gambar atau kode <div class="separator" style="clear: both; text-align: center;"> di sini letak kode gambar </div> atau tag penutup pemisah gambar)
- Cut (potong) kode gambar sesuai petunjuk langkah ke dua di atas
- Letakan kode gambar:
- Jika ingin menampilkan gambar pada kedua di sebelah kiri gambar pertama yang sudah ditetapkan secara berdampingan letakan kode gambar ke dua sebelum kode <a href atau sesudah kode pembuka pemisah gambar <div class="separator" style="clear: both; text-align: center;">.
- Apabila ingin menampilkan foto atau gambar kedua sebelah kanan gambar pertama letakan kode gambar ke dua setelah tag penutup gambar </a> atau sebelum tag pemisah gambar </div>
Letak kode gambar yang dimasukan (insert) dalam halaman posting Compose blog biasanya seperti di bawah ini.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7bSDxWr4dRE/T7zwjEN_blI/AAAAAAAAHu0/ejgDxPfghI8/s1600/Piala+Eropa-248+Blog.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-7bSDxWr4dRE/T7zwjEN_blI/AAAAAAAAHu0/ejgDxPfghI8/s1600/Piala+Eropa-248+Blog.PNG" /></a></div>Setelah melakukan langkah-langkah yang diuraikan di atas klick Compose untuk melihat hasil sementara gambarnya. Sedangkan jika masih ingin edit (memperbaiki) gambar klick Edit HTML lagi. (248 Blog).
0 komentar:
Posting Komentar
Terima kasih atas kunjungan anda. Silahkan berikan komentar tentang artikel ini. Akan tetapi perlu dimaklumi bahwa Komentar yang tergolong iseng tidak akan ditampilkan. Untuk mendapatkan jawaban langsung pada kotak masuk Email anda, klick teks Subscribe by Email. Atas atensi dan partisipasinya terima kasih.