Membuat Gallery Photo Di Blog

Kalau pada postingan sebelumnya saya membahas tentang bagaimana cara Membuat Album Foto Pada Blog, maka kali ini saya akan membahas tentang hal yang sama namun tampilannya jauh berbeda. kamu bisa lihat pada tampilan galeri di bawah ini:

Gimana, menarik bukan??? Tertarik?? ikuti tutorialnya di bawah ini. Untuk memmbuat Gallery Photo pada blog pertma yang harus kamu lakukan adalah:

1. Buat postingan selayaknya kamu membuat artikel atau semacamnya, dalam membuat postingan pilih             metode HTML.
2. Kemudian pastekan Kode script di bawah ini pada postingan kamu
3. Selanjutnya kmu ganti Tulisan yang berwarna dengan URL foto kmu. Untuk mengetahui url fotonya kmu bisa upload foto kamu di bawah kode script ini kemudian pastekan pada tulisan yang berwarna tadi.

<div class="snap_preview">
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1.jpg" title=" title anda" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
 <a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Rudi Photo's" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
 </div>

Selamat Mencoba,, Semoga Berhasi.......!!

Dan jangan lupa, jika tampilan foto ingin berefek ketupat seperti di atas kamu bisa liha bagaimana cara Memberikan Efek Ketupat Pada Blog.