Menambahkan efek zoom pada gambar Blog

Cara membuat efek zoom pada gambar postingan blog anda.

Begini awal mulanya..
Tema yang ada pada blog saia cukup sederhana, bahkan bisa dikatakan sangat sederhana sekali. Ini karena, saia masih suka mengunakan tema default yang disediakan blogger.com. Namun, tidak berarti saia tidak bisa custom blog, hanya saja saia emang suka design dari default itu sendiri karena lebih simple.
Maka dari itu karena simple nya saia berusaha untuk sedikit menambahkan beberapa hal simple juga untuk pengunjung supaya tidak bosan dengan tampilan yang biasa. Akhirnya, saia berpikiran untuk menambah sedikit beberapa efek pada blog saia, dan sekarang giliran untuk menambahkan efek pada gambar saia yaitu efek zoom (magnify).

Efek yang saia gunakan dan akan saia share adalah efek zoom. yaitu dimana detailnya ada pada gambar demo di atas.

 Langsung saja saia share script nya.

.post 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 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

Cara menambah efek zoom pada gambar blog adalah sebagai berikut:

1. Buka blog anda dan masuk ke template dan pilih edit HTML
2. Cari kode ]]></b:skin>
3. Pastekan scriptnya di atas kode ]]></b:skin>
4. Save template 

Selesai. sekarang coba liat blog anda..


Semoga bermanfaat