Cara Membuat Galeri Foto Di Postingan Blog - Memasukan banyak foto sekaligus didalam sebuah postingan memerlukan sebuah cara tertentu agar tampilan foto-foto tersebut menjadi menarik. Misalnya Anda ingin membuat sebuah artikel khusus yang berisi kumpulan foto dokumentasi perjalanan wisata atau acara seremonial, jika 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 membuat tampilan banyak foto didalam postingan blog menjadi menarik, maka Anda dapat menampilkannya kedalam bentuk galeri. Berikut ini cara membuat galeri foto didalam postingan blog yang dapat Anda lakukan :
Baca juga artikel : Cara Membuat Gambar Sejajar Pada Artikel Blog
1. Login ke blog Anda.
2. Buat artikel Anda, Postingan > Entri baru.
3. Alihkan mode "Compose" menjadi "HTML".
4. Silahkan copy kode dibawah ini, kemudian 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>
<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 tulisan 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 keinginan Anda
- URL Image Anda : masukan URL foto Anda, contohnya seperti berikut :
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpun2l_ku1e4ioUhA5XZP-snapWgTXRbpOxZh7WJY-YgrsTsCkCj3_NiIiGx1Qbjs2hpAL8qw5LpfD0l5pJMkwDF0tEQqpx6LqTNVM0e11hY0LcPxbtpz-vG8gIMQEKofquVY_DIxnI0wg/s1600/office-625892_640.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpun2l_ku1e4ioUhA5XZP-snapWgTXRbpOxZh7WJY-YgrsTsCkCj3_NiIiGx1Qbjs2hpAL8qw5LpfD0l5pJMkwDF0tEQqpx6LqTNVM0e11hY0LcPxbtpz-vG8gIMQEKofquVY_DIxnI0wg/s320/office-625892_640.jpg" width="200" /></a>
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpun2l_ku1e4ioUhA5XZP-snapWgTXRbpOxZh7WJY-YgrsTsCkCj3_NiIiGx1Qbjs2hpAL8qw5LpfD0l5pJMkwDF0tEQqpx6LqTNVM0e11hY0LcPxbtpz-vG8gIMQEKofquVY_DIxnI0wg/s320/office-625892_640.jpg" width="200" /></a>
5. Sebelum dipublikasikan, lakukan pratinjau. Setelah hasilnya telah sesuai dengan keinginan Anda, silahkan publikasikan. Contohnya seperti berikut ini :
Jika ingin menambah jumlah foto, copy kode berikut ini dan pastekan dibawah kode </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>
<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 bisa Anda lakukan. Dengan cara ini maka foto-foto dipostingan blog Anda akan tersusun rapih. Semoga bermanfaat.
