Membuat efek zoom picture (Gambar) diblogger

Contoh

Bagi sobat-sobat yang pengen blog nya kelihatan cantik nan indah, mungkin trick ini bisa membuat blog sobat-sobat jadi terlihat lebih manis. tips kali ini adalah untuk membuat gambar / picture yang kita upload tidak monotone, yaitu gambar yang kita upload bisa nge-zoom ketika mouse diletakkan di gambar / picture. Contoh :

lets check it out.

1. Login ke account blogger sobat
2. Masuk ke menu Rancangan > Edit HTML
3. Search (ctrl+F) kode ]]></b:skin>
4. Kemudan pastekan kode Berikut di atas kode tadi 

          _________________________________________________________

     .bsrgbr img{ -webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.3); /*Mozilla scale version*/ -o-transform:scale(0.3); /*Opera scale version*/ -webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .bsrgbr img:hover{ -webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.4); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/ -webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/ -moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/ opacity: 1; }

          _________________________________________________________

      5. Kemdian simpan

Berikut tag html untuk menampilkan efek zoom di gambar :

<div class="bsrgbr">
<img src="link gambar">
</div>

Semoga Bermanfaat.. :)