Membuat Photo Gallery Dengan Css

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, 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 /><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 /><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 /><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 /><br /> <div class="Photoz32" style="float: left;"><img alt="KETERANGAN PHOTO" height="125" src="URL PHOTO KALIAN" width="125" /></div><br /><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 /><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 /><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 />

5. simpan