Membuat Galeri Foto

Tampilan blog akan lebih menarik dan terkesan lebih lengkap jika ada satu atau beberapa halaman yang memuat Galeri Foto. Ingin membuatnya dengan cara sederhana? berikut tutorialnya

1. Upload foto-foto yang akan anda tampilkan pada galeri ke hosting tempat penyimpanan foto (saya biasa menggunakan Picassa yang merupakan bawaan Blogger)
2. Buatlah posting lama mode HTML.
3. Masukkan Kode berikut pada postingan.
4. Rubah kode-kode url foto dengan url foto anda yang telah di upload tadi.
5. Publish

BERIKUT KODENYA:

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Membuat Galeri Foto</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://infobege.blogspot.com/2011/08/membuat-galeri-foto.html" target="_blank">
<img border="0" height="150" src="http://infobege.blogspot.com/contoh.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://infobege.blogspot.com/2011/08/membuat-galeri-foto.html" target="_blank">
<img border="0" height="150" src="http://infobege.blogspot.com/contoh.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://infobege.blogspot.com/2011/08/membuat-galeri-foto.html" target="_blank">
<img border="0" height="150" src="http://infobege.blogspot.com/contoh.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>


CATATAN:

1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.