Cara Membuat Icon Social Bookmark Dengan Efek Spinning

Conto Icon Social Bookmarking Dengan Efek Spinning

Cara Membuat Icon Social Bookmark Dengan Efek Spinning-Selamat pagi sobat.. Dikesempatan kali ini saya akan membahas tentang Cara Membuat Icon Social Bookmark Dengan Efek Spinning.

Live Demo

Dengan menambahkan efek spinning, icon social bookmark menjadi lebih menarik karena dapat berputar-putar. Kalau begitu kita langsung saja menuju ke cara memasangnya.

1. Masuk ke akun blogger anda.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin>
5. Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>

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. Lalu klik Simpan Template.
7. Lalu Masuk ke Tata Letak.
8. Klik Tambahkan Gadget.
9. Pilih HTML/JavaScript.
10. Lalu masukkan kode berikut.

<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->
<a href="http://urlanda.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1L7BirdohJcUn4FDWILaZBF_76WXUr0QX_68TSm4iLiWnwe7O2MxgDtj8f8NZqWFbxKy-cP1O3iadqcDuUCqxKulE85_o94-pLxGEC3hl9fQXEZvsnhEfaONQCtTiKlH9iqn3y7nw1RWK/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJRv4r_8kZ43sgj53WOrEPHzaI_-uKbDZ7Pvde6QVYmAb1X-eA9PJNKfWxsLL3UXBhpjQHk7p8vpf2QsRbtY_STO2MleO1TKOMPcN-RZjtitlAGnujlRpxEqo7Tl2d4JAf1Cb7Fs3Bvkc/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNDkKw5n7ZjsyoRZRvEv59u8fLxeWpXldtXp3z4b1FZaxnaYbQpgxQlR2_WrNhRnP-2axSdgTjlSCRqOXGJv-9McszIMl4sHo2iJQACut75A-X-sUidqeG-S9VeIVR0en5b5GAMbEJFWkg/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkF5EWPTlu2cKYPrFE-LLol7x2qW_4CNJUrld30EZKJbmy84Yai0Bkyc2OzNQdvBqmHQNPhYuRLfG-pSDwpIdP-oA7-W3rax_T2NwXxwFd1WQo36SUK0w4te61st4BbBDVq9Ki6z1qFNc/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROrkxHhnyrR-9vli8II8Iy4sKqr5ZWvg7RmpYrfmswW3TWHvi506IXUpE114MuPT7mkpKZn3Y281CvPkUX-9ujdeSfEJerC32GvG8SWbQdLG9mzO8Af8Erve844CdYgIhZu5hf8IcIAHx/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>

NOTE :

• Ganti tulisan berwarna biru dengan ID anda.

11. Klik simpan dan lihat hasilnya.

Selamat mencoba sobat.. Semoga berhasil. Jika ada yang ingin ditanyakan silahkan berkomentar.
 

source