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.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.