Cara Menciptakan Galeri Foto Di Postingan Blog

Cara Membuat Galeri Foto Di Postingan Blog - Memasukan banyak foto sekaligus didalam sebuah postingan memerlukan sebuah cara tertentu semoga tampilan foto-foto tersebut menjadi menarik. Misalnya Anda ingin menciptakan sebuah artikel khusus yang berisi kumpulan foto dokumentasi perjalanan wisata atau program seremonial, kalau tidak dilakukan pengaturan secara khusus maka foto-foto itu akan berderet memanjang kebawah sehingga tampilan postingan Anda menjadi tidak menarik dan tentunya pengunjung blog Anda tidak menyukainya.

Untuk menciptakan tampilan banyak foto didalam postingan blog menjadi menarik, maka Anda sanggup menampilkannya kedalam bentuk galeri. Berikut ini cara menciptakan galeri foto didalam postingan blog yang sanggup Anda lakukan :


1. Login ke blog Anda.
2. Buat artikel Anda, Postingan > Entri baru.
3. Alihkan mode "Compose" menjadi "HTML".
4. Silahkan copy isyarat dibawah ini, lalu paste di area entry html.

<div class="snap_preview">
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Url Image Anda" target="_blank">
<img border="0" height="150" src="Url Image Anda"" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Url Image Anda"" target="_blank">
<img border="0" height="150" src="Url Image Anda"" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Url Image Anda"" target="_blank">
<img border="0" height="150" src="Url Image Anda"" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Url Image Anda"" target="_blank">
<img border="0" height="150" src="Url Image Anda"" width="200" /></a>
</dt>
</dl>
</div>
</div>

Perhatikan dengan baik goresan pena yang berwarna merah !
- width:33% : tampilan foto barjajar sebanyak 3 (100/3), kalau ingin berjajar 4 maka 33% diubah menjadi 25% (100/4), kalau ingin berjajar 2 diubah menjadi 50%.
- 150 & 200 : tinggi dan lebar foto, silahkan diubah sesuai cita-cita Anda
- URL Image Anda : masukan URL foto Anda, misalnya ibarat berikut :
<dt class="gallery-icon"><a href="https://1.bp.blogspot.com/-UkXIBLVzzYw/WqnvNZtw8xI/AAAAAAAAISA/hVHGXnQhQMo5Pa8KGJgw143zUQd1TLqAwCLcBGAs/s1600/office-625892_640.jpg" target="_blank">
<img border="0" height="150" src="https://1.bp.blogspot.com/-UkXIBLVzzYw/WqnvNZtw8xI/AAAAAAAAISA/hVHGXnQhQMo5Pa8KGJgw143zUQd1TLqAwCLcBGAs/s320/office-625892_640.jpg" width="200" /></a>

5. Sebelum dipublikasikan, lakukan pratinjau. Setelah akhirnya telah sesuai dengan cita-cita Anda, silahkan publikasikan. Contohnya ibarat berikut ini :

Cara Membuat Galeri Foto Di Postingan Blog Cara Membuat Galeri Foto Di Postingan Blog

Jika ingin menambah jumlah foto, copy isyarat berikut ini dan pastekan dibawah isyarat </dl>.
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Url Image Anda"" target="_blank">
<img border="0" height="150" src="Url Image Anda"" width="200" /></a>
</dt>
</dl>

Demikian Cara Membuat Galeri Foto Di Postingan Blog yang sanggup Anda lakukan. Dengan cara ini maka foto-foto dipostingan blog Anda akan tersusun rapih. Semoga bermanfaat.