Membuat Photo Gallery Dengan Css3

Photo gallery...? ya, kalian pasti semua sudah tahu dengan istilah photo gallery atau gallery photo, yaitu kumpulan beberapa photo yang disimpan atau dikoleksi.
Pada postingan kali ini saya akan menjelaskan cara membuat photo gallery pada blog dengan bantuan css3. Untuk contohnya sendiri kalian bisa lihat dibawah ini.

Silahkan arahkan mouse pada gambar.

Menarik bukan ...?

Untuk membuatnya kalian hanya perlu login ke blogger kalian dan silahkan baca proses pembuatannya berikut ini :

1. Pilih Rancangan
2. Pilih EDIT HTML (centang expand template widget
3. Simpan kode CSS berikut sebelum kode ]]></b:skin>

.Photoz3 {
z-index: 1;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.Photoz3:hover {
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}

4. Untuk pemanggilan kode css diatas kalian gunakan kode berikut :

<div style="margin-left: 40px;"><div class="Photoz31" style="float: left;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz32" style="float: left; margin-left: 2px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz33" style="float: left; margin-left: 3px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz34" style="float: left; margin-left: 4px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz32" style="float: left;"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></div><br />
<div class="Photoz31" style="float: left; margin-left: 2px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz34" style="float: left; margin-left: 3px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div><br />
<div class="Photoz33" style="float: left; margin-left: 4px;"><a href="URL LINK KALIAN" title="TITLE Photo"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></a></div></div><br />

Keterangan :
== ganti URL PHOTO KALIAN dengan alamat link photo kalian
== ganti TITLE Photo dengan kata-kata kalian
== ganti KETERANGAN PHOTO dengan kata-kata kalian
== ganti URL LINK KALIAN dengan link kalian
== ganti ukuran photo dengan mengubah kode angka berikut : height="125" width="125"

Jangan Lupa disimpan. Selamat mencoba.