Cara Membuat Gambar Berputar Saat Terkena Mouse

Sekarang saya akan berbagi ilmu lagi, saya dapet nya malam-malam nih, takut keburu lupa karena tidur dan takut keburu ngantuk juga sih, jadi saya langsung saja ke langkah-langkahnya, ok Sob !!!

Langkah-Langkahnya :

1. Silahkan Login ke akun Blogger Sobat
2. Klik Rancangan/Tata Letak
3. Klik Edit HTML, Lanjutkan
4. Centang kotak kecil di samping tulisan Expand Template Widget
5. Gunakan CTRL+F atau F3 untuk mencari kode ]]></b:skin>, jika sudah ketemu silahkan paste-kan kode dibawah ini tepat diatas kode tadi

div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#socialicons1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg); }

6. Save Template/Simpan Template
7. Sekarang Masuk ke Tata Letak
8. Klik Add Gadget/Tambah Gadget
9. Pilih HTML/Javascript
10. Paste-kan kode di bawah ini didalamnya

<center><div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->

<a href="http://www.radiosob.com/2012/07/style-fm-tasikmalaya.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/StyleFMTasikmalayaIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/star-radio-1073-fm-tanggerang-banten.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/StaradioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/05/judul-1-masukkan-item-sobat-disinibisa.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/RugeriIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/radio-elfara-fm-malang.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/ElfaraFMIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/bandung-radio-bandung.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/BandungRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/krakatau-radio-pandeglang.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/KrakatauRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/kisi-fm-bogor.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/KisiFMBogorIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/bens-radio-jakarta.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/BensRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/ninetyniners-fm-bandung.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/NinetyNinersIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/nagaswara-fm-bogor.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/NagaswaraFMIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/radio-ppi-dunia.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/RadioPPIDuniaIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/metal-head-radio.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/MHRIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/kaskus-radio-jakarta.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/KaskusRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/global-radio-jakarta.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/GlobalRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/audio-promotion-krakatau-junction.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/AudioPromotionKrakatauJunctionIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/radio-erdamah-fm-banten.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/ErdamahIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/ramaloka-fm-serang-banten.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/RamalokaIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/berisik-radio-tanggerang-banten.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/BerisikRadioIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/pass-fm-cilegon.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/PassFMCilegonIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/heartline-fm-banten.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/HeartlineIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/ardan-radio-bandung.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/ArdanIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/07/gen-fm-jakarta.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/PramborsIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/05/streaming-radio-rodja.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/RadioRodjaIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/05/streaming-radio-suara-edukasi.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/RadioSuaraEdukasiIcon.jpg" /></a>

<a href="http://www.radiosob.com/2012/05/streaming-indie-radio-online.html"><img border="0" src="http://i1252.photobucket.com/albums/hh574/radiosob/IndieRadioOnlineSmallIcon.jpg" /></a>

</div>
<div class="clear">
</div></center>

Note : Silahkan ganti kode yang di beri warna Kuning dengan link yang anda kehendaki, sebaiknya sesuai dengan gambar, dan gantilah kode yang di beri warna Hijau dengan link gambar yang anda kehendaki.

Sekian dari saya, untuk supaya lebih menarik lagi silahkan di kembangkan oleh Sobat, Semoga postingan ini bermanfaat, sebelumnya saya ucapkan terima kasih.

Tweet