Menengah : 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>

#alexirfani 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;}

#alexirfani 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="alexirfani"><img src="Url Gambar" width="210" height="280"/></div>. Kemudian ganti "Url Gambar" dengan link gambar yang akan di Zoom Spin. Ubah nilai width (untuk lebar gambar) dan height (untuk tinggi gambar).

"Semoga Bermanfaat"

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Alex Irfani, Published at 00.32.00 and have 0 komentar