Cara Membuat Galery Foto Di Postingan - Memasukan sebuah foto ke dalam artikel atau postingan menjadi hal yang biasa dilakukan oleh seorang Blogger. Namun untuk memasukan foto dalam jumlah banyak, maka perlu dibuatkan sebuah galery agar hasilnya terlihat rapih.
Bagi Anda yang ingin membuat artikel khusus seperti fashion atau sebuah produk-produk tertentu sehingga memerlukan banyak foto, berikut ini cara membuat galery foto di artikel blog Anda :
1. Login ke blog Anda.
2. Silahkan buat artikel Anda.
3. Pada area Enty, alihkan mode Compose ke mode HTML.
4. Copy kode di bawah ini, paste di area Entry mode 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 tulisan yang berwarna Merah !
- width:33% - jumlah tampilah foto berjajar adalah 3 (100/3), Jika ingin berjajar empat maka 33% harus diubah menjadi 25% (100/4). Jika ingin berjajar 2, diubah menjadi 50%.
- 150 & 200 : tinggi dan lebar foto, silahkan diubah sesuai kebutuhan.
- Url image Anda : tempat memasukan url foto Anda.
5. Sebelum dipublikasikan, lakukan pratinjau. Jika hasilnya telah sesuai dengan keinginan Anda, silahkan publikasikan dan lihat hasilnya.
Contoh foto berjajar 3
Jika ingin menambah jumlah foto :
- copy kode dibawah ini, paste di bawah 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>
Baca juga artikel : Cara Membuat Gambar Sejajar Di Artikel Blog
Itulah Cara Membuat Galery Foto Di Postingan Blog yang bisa Anda lakukan. Semoga bermanfaat.
Share artikel... !
