social network Spinning icons

Posted by Garut Cheater Posted on 11:40:00 PM

 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/AVvXsEhXLL_EbXzGfrebCPGuX0JlJABaPZOFvkR4GJ0EZ3uYotH_uIt7eF6IFadRLDncICAx_HJ_8zlf0-TWyWI8eQ-GzPgiE6LghR1o9xt6Web6si3HYza4eSX1U1zJQDwxLoXYgz8iuDbi7zUm/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__hAjOpzQ-m9Hajm8EZ_k9z5kn49H45FQBhevC2g2XMTdZQ_OqVyGevXjuhQvvDvexoFHMBPM6sX3ZmisX1oceetTKI4sb3M9lfCkHOfM49crUL-6iUfRDIwft4JkfuH3CXzeWQQteVxv/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4tJ9LiFYVk2l7_t8JJvIcJkpY5GNLhbSMrEz9MGRH3uN5fkmuTaukKVtkT41zyW_9wvyClf8t-Z8ZKIp8KLP6Lt1LGOl9-qCfSaLjXZ_kf3iM8GKCbeK3fbTKU6Cgn0k9Kg8JbIL2ETB/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBX9JbX0FM-Bu0YxDcpVF8Ykv1v01KM1eqs2aSZ9Vi7crIWqkgRb9t7av_pF5jtSUcL2-Qk0YujBcSAqtN5Num0XquksXfTPIv0B__m-8VdhOPTh1izauZJSgduCk-o-qmHOFqU7dOkWLX/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRhcFqKjgV1XlsZvbx42aVI4KrkXou9bu2cmpZEPrLgd0_XbGhh4Z2W6jiNYjJTZhofaVQv-UKxwqYQxWRTflD_KayMQtyeKmueJsWS3L0dGB4O62d3ijHrDbCoZ3IAka8rJ53nseH7XZ/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>