Saturday, 19 November 2011

Membuat Efek Zoom Pada Gambar Di Blogger

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 :

Contoh Gambar


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
  5. .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; }
  6. Kemdian simpan

Berikut tag html untuk menampilkan efek zoom di gambar :

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

Semoga Bermanfaat.. :)

2 komentar

untuk mengaplikasikannya langsung ajha ke editor postingan sobat..
ntar di postingan itu kita taruh tag untuk efek membesarkan gambarnya..

contoh:

isi postingan

<div class="bsrgbr">
<img src="http://test.com/image/test.png">
</div>
contoh efek zoom
blablablabla

Silahkan berkomentar dengan bijak. Setelah anda mampir dan berkomentar, saya akan berkunjung balik. Dan jangan meninggalkan link hidup ya, Terimakasih :)
EmoticonEmoticon