Aiizahh : Membuat Social Icon Berputar

Selamat sore sob...

Gimana kabarnya hari ini??? Semoga sehat selalu...

Ok, pada kesempatan kali ini saya ingin berbagi cara membuat efek berputar pada icon-icon social network saat disorot mouse, seperti facebook, twitter, dan kawan-kawannya, hehehe...

Untuk penampakannya kurang lebih seperti berikut :

Nah, kalo temen-temen tertarik, silahkan ikuti PBL (Praktek Blogging Lapangan) berikut :

1. Login ke blogger.

2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript.

3. Masukkan kode berikut :

 <style>

p#aiizahh_socialnetworkicon img {
 /* Social Network Widget By http://aiizahh.blogspot.com */
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

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

/* Social Network Widget By http://aiizahh.blogspot.com */

</style>


<center><p id="aiizahh_socialnetworkicon">
<a href="http://twitter.com/USERNAME"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtdJRmUdIxexRhXL1ncg0vNKpHC8pXGOrNSkkLJVrHskH4-b-MYDLwAobQvxd72WInO7XTRP9j1rTbG-DMxALDE8Uu3jz68dsjEhkE_pcUcQMuw_57OT5Tg0VSGY0oqlYvXO3B9dBRakR/s0/twitter.png' title='Twitter" /></a>
<a href="http://www.facebook.com/USERNAME"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWxUSAkXg1fgL0es_pids8ZwCd0S_mLVk8HtLgX7ndJoZtiZobbPzQVHPuB4dFmFp0ranDNdxpAgp2a5lS4U9CdjoaNdtv3g3KAH9NJfIqbEysj_pk6cUpjr4cUW3dCLAEnMhpBuugcbEg/s0/facebook.png' title='Facebook" /></a>
<a href="https://plus.google.com/USERNAME"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRfk6ztaIped5GVI1Pqa_C4VY4beb0f1ugJtpGPWKksoPeBSGhazv2nU6DXqlSVFk3GmQH5FfKVgtxvBp6FyeWN4i-6HPnqv1POsgZ5GnIx0PmRrVUuKVMPbQt9GjRakVxwRT8ptr-wMJ/s0/gplus.png' title='Google Plus" /></a>
<a href="http://www.linkedin.com/USERNAME"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUrkP4OItp5AZxRx3gdf5k_eyV21uE0TnRh6_gGfR0yzhIrCudX40m7L1ihpXi1T6TVl4-uHNBSi7EEOs1ewO7-6jKGSjeYqvVW8YG4RiWVqw1LVNBzG377bmcNQXFIHXCD06JQqucGrB/s0/linkedin.png' title='LinkedIn" /></a>
<a href="http://URL BLOG/feeds/posts/default"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgotei9XeUnu_zBj6eE3zOhZdPXuLBGbgqvTMun9T5Lxr_pwHIb_xw3QgaOzusxwyLXqOjmEsZHSoNkhHjGVgkXWY1AhhrnoK2iDLB1uOkEoG3FoCJWLbBUMvqbueK_eaW5NcDK7Eizhhez/s0/rss.png" /></a>
<a href="mailto:USERNAME@gmail.com"' target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTPYF4-nlsfqTvIZAfvA7lYVDyKq5q5TWl2gKyzCZ5NFxR-BlKADAqiwZVfCQB2HxAOfwYkTEI5hOBZHYkefBYaLQyDkLxhKU8P-qkUXQkg2_JxnOYhw5PxHPkJjedBiksU10OdtpNqRs/s0/email.png' title='Email" /></a>
</p></center> 

4. Simpan.


5. Enjoy.

*Keterangan : Ganti kode berwarna biru sesuai Username dan URL milik temen-temen...

Gimana sob???sudah jadi icon social networknya dengan efek berputar...
kalo gagal, berarti ada yang salah dengan kode yang agan masukkan....

Terima kasih ya semoga bermanfaat dan jangan lupa meninggalkan komentar....

Sumber : http://aiizahh.blogspot.com/2013/03/membuat-social-network-icon-dengan-efek.html#ixzz2Tcn4MGO6
Follow us: @aiizahh on Twitter