Cara membuat Galery Foto pada Blog layaknya Galery Facebook

Mungkin banyak artikel pada blog-blog yang betebaran di Internet yang memuat artikel serupa dengan artikel yang akan saya bahas kali ini.
Karena saat anda menjumpai artikel saya ini, sudah pastinya saya sudah mengalami hal serupa dengan anda. Mungkin sempat terlintas juga dalam benak anda, terutama bagi para Blogger-blogger pemula seperti saya. Maklum walau usia blog saya sudah lebih dari 5 tahun, saya merasa diri saya ini juga seorang blogger pemula. buktinya dari sedikitnya jumlah artikel yang dimuat pada blog sederhana saya ini.

Artikel yang akan saya muat pada Blog saya kali ini ialah "Cara membuat Galery Foto pada Blog". Sebenarnya apa sih fungsi atau tujuan kita membuat Galery Foto pada Blog. Tidak lain dan tidak bukan hanya agar tampilan blog kita lebih bernuansa (Maaf...ini sih menurut saya pribadi  :) ), untuk masalah tujuan saya ataupun anda memasang Galery Foto pada blog, itu sih terserah pada diri anda sendiri, silahkan kalian pikir" lagi apa yang melandasi Anda untuk memasang galery foto pada Blog anda.

Oke ...!!!

Tanpa Basa-basi lagi, silahkan anda ikuti saja Tutorial yang saya muat berikut ini :

1. Pertama-tama, silahkan anda Upload foto-foto yang akan anda muat atau anda pajang pada Galery Foto di Blog anda. (Tentunya anda sudah tau kan, bagaimana caranya Upload Foto ke Blog )

2. Jika anda sudah selesai meng-Upload gambar ataupun foto yang akan anda pajang pada Galery foto anda. Langkah selanjutnya silahkan anda buat Postingan Baru / Halaman Baru ( tergantung anda lebih nyaman yang mana .. )

3. Pada Kasus ini saya mencontohkan Membuat Postingan Baru, caranya ialah : Login Blog => Post => New Entry => Jangan lupa kasih judul Entry atau postingan yang anda buat. Misalkan "Album Foto". Kemudian pilih Tab HTML ( bukan tab Compose yah ......)

4. Copykan Kode Berikut ini :

<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>

<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>

PERHATIAN :

 - Silahkan anda gantikan Teks "URL Image Anda" dengan URL foto/image yang telah anda upload sebelumnya.

 - Sebagai Contoh, seperti berikut ini :

<dl class="gallery-item">

<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3sQm6vqakxbC7laSEJw1cz-rOsMDvUtPNJazL0MynYKSoll2-CTBMJTVih_RAMBjZl-kWUG3CEqeFzUWIeooiKJUiBnaR2WoY4pk0BRjg_Q4Sel7dj3ej2lH53HtmdVAHz5yaFhQbBc3E/s1600/1.jpg" target="_blank">

<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvv9tfduvLGA8bEoyl9pf8puCa5StkgKbwP-mI4VPh1ahR276y3qta1JF33kKpawE4FjxJ55jNfuH2CS0AUVbPDBy7Dr0axMfincCpc1-89Uq_gy5_xQzaJrfUOAqNUy8hyalh-Y8beI4/s1600/2.jpg" width="200" /></a>

</dt>

</dl>

5. Jika sudah, silahkan Anda Publish postingan yang anda buat. Cukup mudah bukan !!!

Sedikit Tambahan Informasi :

• Anda bisa merubah dimensi dari lebar (width) foto yang akan anda buat, silahkan Anda ubah persentasenya misalkan dari (33%) menjadi (25%), carilah Kode berikut ini jika anda ingin merubahnya.
• Ukuran foto yang anda Upload juga mempengaruhi tampilan yang akan dihasilkan. Usahakan Upload beberapa foto dengan dimensi pixel (H x W ) dengan pixel yang sama pada setiap foto.

<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>

Sekian Tutorial saya pada kali ini, semoga Artikel yang saya buat dapat menjadi solusi dari permasalahan yang sedang anda cari.

Oke ... Jangan lupa Subscribe Blog ini jika Anda ingin mendapatkan tambahan ilmu lainnya, terutama masalah tata letak Blog yang sedang anda bangun.