Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3

Baiklah sekarang cara membuat efek spinning pada icons social bookmark
Langkah Pertama

• Login ke akun anda
• Pada dasbor>> klik template>> edit HTML
• Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></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); }

• Simpan template

Langkah Kedua

• Pada dasbor masuk ke menu tataletak>> klik tambah gadget>> pilih HTML/JavaScript
• Sekarang salin dan tempel kode berikut pada form yang tersedia dan beri judul yang anda inginkan

<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/AVvXsEidoNi3H3QWNyUBwzmnl3pFK_IOsvM3eiK4qhZ2nFIJQCHNUGYw4KEBACdX8WQVmV2jN-hdLBUtEBdrtL3byvpD7Wm_nOExnRLuGcJ4eheg_ZS1wl72ikRrO1zqP2oAj2li5UfWLzqCX7y_/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2XYw4-wD8Ps9B6D0eys-xC_Is47UwiEKz9neNcbzZ2MtGzHNFh631juNqS4HOgoZ4mMxS_flVf-X-AXihI5fgQiVPqfOcuO7KV879jVoJ9KiHQiqHjSsFot6NsCXnl7Nk8OTyPxOsM0Y/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyAu6-xYk88UKCxdBL_MGna4IHDVb1k_INbO-us2KYkYIql4owZcWRAjrL0KKNpSci2tLmdNjcszTgHnifMy98q5OrmyKCqcXh6970JcF-LOOM1a4p9NLYr3RfC34lWm4Jv56iXng_lXeX/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk30MIjDmI8NLMBlpPBJrisIkeeJ2oUYMsPUkCblNs1d7Y27Cqfg4xMCpf2fIrbVCOWpGmdG-5B4Y3hDGxn-Be63lgvK28ja2P2HEy3fZaKuEdmevJ6FEi8TACiTEXcbG7Z6DJv0NJN5Gp/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oRRa0KNM-feT-KrNfiSbsuSm_ljCBNO0YfmCBJ7OHNmRINxkNN-OIZY__GSUp7cQwzFV9JJickKCrGXV5CGKmFSKkmc32aSOvUrzcEczoJCs1GX2bm_Zze7V8ZNdBVgH3DrauBfWuEiK/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>

• Simpan dan lihat hasilnya diblog anda