Cara Membuat Gallery Image Keren

Cara Membuat Gallery Image Keren - Selamat malam sob..Kali ini saya akan share salah satu tips bagaimana membuat gallery image yang keren. Pada posting sebelumnya saya juga sudah share cara membuat gallery image diblog dengan menggunakan efek CSS3 sebagai daya tarik penampilanya, kalau sobat tertarik untuk mencobanya, bisa klik disini cara membuat gallery foto di blogspot.

Untuk tips kali ini saya tidak menyediakan live demonya, tapi tampilanya  bisa sobat lihat seperti gambar diatas, memiliki efek lekuk dan akan kembali berbentuk kotak ketika mouse kita arahkan ke gambar. Mungkin untuk lebih jelas nya, silahkan sobat langsung coba saja dengan cara memasukan kode dibawah ini pada postingan, dan waktu ngedit postingan posisinya dibagian HTML ya bukan Compose. Berikut scriptnya :

<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="Farish Blog" 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>

Note : Silahkan sobat ubah link IMAGE URL dengan Link image milik sobat sendiri.

Okey..cukup sekian sob, tips kali ini yaitu  Cara Membuat Gallery Image Keren.

Tweet