Membuat Efek "Zoom Spin" Gambar Di Blog

      Blog merupakan salah satu media sharing yang paling ampuh. Blog adalah media global dimana semua orang dapat melihat, membuka, membaca, menemukan informasi di dalam nya dengan mudah kapan pun dan di mana pun ia berada asalkan terhubung dengan koneksi internet. Melalui blog ini pula kita dapat bertukar pengetahuan, tidak hanya seputar komputer namun juga dapat berupa disiplin ilmu lain, seperti otomotif, desain, bahkan seputar dunia usaha.

      Agar blog yang kita miliki mempunyai daya tarik tersendiri, mungkin tidak ada salah nya bila anda mencoba trik berikut. Trik membuat efek "Zoom Spin" gambar adalah sebuah trik yang memberikan efek pada gambar yang ada di blog berputar dan Zoom (membesar) saat pengunjung meletakkan cursor nya di atasnya.

Langkah-langkah membuat Zoom Spin gambar di blog ;

1. Login ke www.blogger.com

2. Pilih Design/Rancangan

3. Klik Edit HTML

4. Beri tanda centang pada "Expand Template Widget"

5. Letakkan kode berikut di atas </head>

<style>
#trikseputarkkomputer img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#trikseputarkkomputer img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}
</style>

6. Save Template

note : untuk mempercepat pencarian tag </head>, gunakan kombinasi tombol Ctrl+F. Kemudian ketikkan </head> pada textbox, tekan enter.

    Agar di setiap postingan mempunyai efek Zoom Spin, tambahkan tag berikut pada postingan yang memiliki file gambar ; <div id="trikseputarkkomputer"><img src="Url Gambar" width="210 height="280"/></div> Kemudian ganti Url Gambar dengan Url Gambar yang akan Zoom Spin.

Demo :