Friday, November 16, 2012

Cara Membuat Zoom Effect pada Gambar di Blog

Mungkin para Blogger sudah tidak asing lagi dengan efek Zoom pada Foto di postingan Blog. Efek Zoom ini akan membuat foto yang di sentuh cursor akan membesar ukurannya atau seperti Zoom otomatis.
Trik ini bagus untuk mempercantik Blog anda. Jika tertarik langsung saja ikuti Langkah - langkah erikut.
Cekidot :


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://1.bp.blogspot.com/-SDUhmZaz-u0/UJ0FceRUY5I/AAAAAAAAAVI/uTPPkcK_WO0/s1600/Untitled-4%2Bcopy.jpg" width="284" /></a>

2 Komentar "Cara Membuat Zoom Effect pada Gambar di Blog"

Kraeng Francisco December 9, 2012 at 9:34 AM WIB Permalink

Terima kasih ilmunya sobat, patut dicoba.

Aries_Bro December 14, 2012 at 5:36 PM WIB Permalink

trima kasih balik kawan...
di coba aja karna mencoba itu masih masuk kategori Halal...
ha ha...