How to Create a social Network Icon

 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/AVvXsEip97Ve00e5KmN0K5LHvatRAQhWIEKkeYWtew0XQa0f85pVGOncQ2fvQIRFe6e3mBsJ-kDfZYi279fvKzpbb75_ykpGVRnGu6lLWJFpL48wGmBaVnGGJhEFHZfjhFxNYgH2CVdrCXHsCYt_/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8iC90xql3U2luxCR6fYVuHL-R8HWQ1cqb7CHdIwdwDmyZFD21pawrulwXV7dSOKBW2HfdWqSZXkuO_3Otfb2yH_NxHtARzF2cBJGChjXgsAa3lhXF8-0V3ag49pB2UbKpV8x4d_HBGdM4/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_98dfyNLhDhQ4pHx_0Dbcj9BZUpL_KlDkSxOg8rcqHDt6zTvPtsitBHe8Y1uWpmdEA2rrwN8QzHd42ddDyUi7lanIlzIH7KEkWJlasQmdBqwdc0wGhliuCxZ4t9KEZCPzZkMrERSjuc9/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfn6TyvDt7sWkJ18V5CmtSAO3Vf8MYNvBT37Ht9HV4HR7w8PPPRLc7A90coL77RG0qbnIsbnsuGRdye-LwrzzvQEtr-kY1xMg9G6-kPBS4BinlklULskUNP7gyrwBWurA29mpLc34etny/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwQW8xUUNdgIfOdTdMKkXjxUfMFZrnuU08-27crdgESyaz5efs4gWmHRydwyNJPkF4FfwCaNy4_dVYXwstHF6H-QJeQ2Xa_CLzWCr-IuqojxNGjkHOFhXy0BD8a5ybRuJBoZQANE8up5r/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>