Membuat Efek Zoom pada semua gambar posting

Bagaimana cara Membuat Efek Zoom pada semua gambar posting ???

Berikut ini langkah-langkahnya:
1. Login ke Akun Blogger
2. Klik Design/Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (BackUp Template terlebih dulu)
4. cari code : .post img{
lalu hapus kode diatas, ganti dengan kode berikut:

.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px}
.post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s;
-moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
-webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
}

Kalau tidak ketemu, letakkan kode berikut diatas kode ]]></b:skin>

.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px}
.post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s;
-moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
-webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
}

5. Simpan/Save Template, dan lihat hasilnya..

---

Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!

<a href="http://yauni.blogspot.com/2011/08/membuat-efek-zoom-pada-semua-gambar.html">Membuat Efek Zoom pada semua gambar posting</a>

Posted in: Tips-Tricks Blog