How to create a social network Spinning icons

Example:

socialicons1 360 degree spin onMouseover dan onMouseout  

socialicons2 60 degree spin onMouseover and onMouseout

socialicons3 360 degree spin onMouseover ONLY  

Save the following code in the above code  ]]></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); }

And Save.

Now go to Design - Page Elements

Add Gadget and then select HTML / Javascript

Copy and paste the code below  

<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/AVvXsEgoj529ryiRa-xrXHppHS4Vg97WtsP9omM-zuOi9CR4qJucbFbchvbwC20LQ1v0R9oCqpGVx0esyLD76c5tzv0jRY4RKv15c7t65NboVsqjaf0v2XA98rXcNNVS5GqtWzwC9DuFZs7vcfSL/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7km7SXvhCIQKaNrvkyDDvHhZHBmUyAuARsQLanZCrz-qjmA8bF7LDN5JqwVWRiatRf1q0gYCoBnzi33H9mXh03NRAgcqRFVXVjeLQ7IJyTkEggHHTh-SKOH23nb9wGvM_36uqOX8XrS1D/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXad91IDBPUaGlUmj7wi58VMT40yUcG4sfzJlS_GZHHer9HcAcLkH2ijhnIx0Z8OcFr2lzaz9TDSA_1t8C20dNP5dsJNcM9ePVVBuFUAdlAjTTFRoMvh9YCAdjZXXn_M1LyCzHag0cw1Y/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-5f_YmiGMLDVyHXkvVpagbWlTSkqIslbXCYKKFiN9dwQoxfvPVMaHllMIQ-gDLutFiXmpkVN2oQRaYQ2MNIRlMIn9lZhKc57Yb4QvUzQZP5yyOA_MLA03yLikk5cni47hDbTKmLqQqee/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYoDvljpA1YQTkXXibftUIHHKJeNoIptgR9Q10567XsyB8Hsl6sl0GQ64VnzO5yk9KGFqqWuk81v9D-dx3-RiUnzS1K7wQLfOiEN5dt7E2_lku0wwYgFsay9E9qpPD4AxsS3PZeXFdIVQA/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>