Cara membuat efek zoom pada gambar post blog

Jika sobat ingin membuat efek zoom pada gambar postingan,

seperti gambar di atas(sorot mouse aja jika ingin lihat contohnya)

simak caranya:

1. Login blog

2. Rancangan

3. Edit html dan centang expand widget template

4. Letakkan kode berikut di atas ]]></b:skin>

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

5. Simpan template

Kemudian dalam editor postingan letakkan kode berikut pada gambar

<div class="hovergallery"> URL GAMBAR  </div> 

<div class="hovergallery"> <img src="http://dl4.glitter-graphics.net/pub/563/563974hf7kaxk18y.gif" width=90 height=90 border=0> </div>

Selanjutnya simpan postingan.

Mudah bukan cara membuat efek zoom pada gambar.

Selamat mencoba aja deh,

semoga tutornya bermanfat...