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 :
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 arahan 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 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 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 menyerupai berikut :
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmZD-o4JypTmHr85lavowkFDpNuWEnBCHREq1kGS0wsP0KSwYNErILfLjKSBP3AHP6Vsi-2VJtL1rQ1WIbtvhwDamRy12HNJKxuUJZzilKnXcXFgtWHoyyBkmNZJ9EjwIdmicOwgpVKmv/s1600/office-625892_640.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmZD-o4JypTmHr85lavowkFDpNuWEnBCHREq1kGS0wsP0KSwYNErILfLjKSBP3AHP6Vsi-2VJtL1rQ1WIbtvhwDamRy12HNJKxuUJZzilKnXcXFgtWHoyyBkmNZJ9EjwIdmicOwgpVKmv/s320/office-625892_640.jpg" width="200" /></a>
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmZD-o4JypTmHr85lavowkFDpNuWEnBCHREq1kGS0wsP0KSwYNErILfLjKSBP3AHP6Vsi-2VJtL1rQ1WIbtvhwDamRy12HNJKxuUJZzilKnXcXFgtWHoyyBkmNZJ9EjwIdmicOwgpVKmv/s320/office-625892_640.jpg" width="200" /></a>
5. Sebelum dipublikasikan, lakukan pratinjau. Setelah kesudahannya telah sesuai dengan cita-cita Anda, silahkan publikasikan. Contohnya menyerupai berikut ini :
Jika ingin menambah jumlah foto, copy arahan berikut ini dan pastekan dibawah arahan </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 sanggup Anda lakukan. Dengan cara ini maka foto-foto dipostingan blog Anda akan tersusun rapih. Semoga bermanfaat.
Sumber http://cari2-cara.blogspot.com/
