14 November 2012

Cara Membuat Zoom Effect pada Gambar di Blog



Jadi gini misal ada orang yang mau liat gambar di blog kalian, nanti gambar itu akan nge-zoom sendiri gituuuuu.... Buat blog jadi bagus kooookk :D


Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini di bawahnya:

.ow 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;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan Template jika sudah selesai.


6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada kode HTML gambar, contohnya seperti ini:

<a class="ow" href="http://twitter.com/kurniasepta" ><img border="0" height="177" src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" width="284" /></a>



Sourced: http://kurniasepta.blogspot.com



No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...