ADD CSS3 SPINNING SOCIAL SHARING BUTTONS IN BLOG

Hey friend, Here a new cool social sharing button design using css3, which is an animated button that looks cool.The buttons are circular in shape with a slight fold on the top right.It spins on mouse over and then spins in reverse on mouse out.
The spinning animation is done using -moz-transform(a CSS5 property), which converts spinning effect to social sharing buttons, with 3 spinning variations you can choose from: 70 degrees clockwise, 360 degrees clockwise, and 360 degrees counterclockwise.
Simply follow the instructions below to use this buttons your site:


  • First, login to you Blogger dashboard of your blog, go to “Layout” and then click on the “Add a Gadget” button where you’d like to place the social sharing buttons
  • Choose HTML/JavaScript in the list of gadgets
  • Copy/paste the code below in the content box (giving a name for the gadget is optional):
<style>
p#socialicons img {
-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;
}
p#socialicons img:hover {
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons1 img {
-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;
}
p#socialicons1 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img {
-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;
}
p#socialicons2 img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<center>
<p id=”socialicons”>
<a href=”http://www.facebook.com/gaganjaiswal07” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-Q7l2AIANnbI/UApzYR4CKWI/AAAAAAAABDE/g7m_rz8dW0s/s1600/latesthack.com-facebook.png” /></a>
<a href=”http://www.twitter.com/gaganjaiswal/” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png” /></a>
</p>
<p id=”socialicons”>
<a href=”https://plus.google.com/u/0/123456789012345678901” target=”_blank”><img border=”0″ src=”http://3.bp.blogspot.com/-4sZkt3DbUxg/UApzY-Eda8I/AAAAAAAABDM/p8-j4asZm6Q/s1600/latesthack.com-google_plus.png” /></a>
<a href=”http://feeds.feedburner.com/FEEDBURNER_NAME/” target=”_blank”><img border=”0″ src=”http://2.bp.blogspot.com/-qxygObBRqtM/UApzZd8YQNI/AAAAAAAABDU/Pxn3uOsVjeg/s1600/latesthack.com-rss.png” /></a>
</p>
</center>
<p style=”display:none;”>Spinning icons by <a href=”http://www.latesthack.com”>Latest Hack</a></p>
  • Replace all the necessary username values (facebook, twitter, google plus, and feedburner) with that of your own
  • To make the buttons spin 360 degress clockwise, change id=”socialicons” to id=”socialicons2″
  • To make the buttons spin 360 degress clockwise, change id=”socialicons” to id=”socialicons1″
  • To make all four buttons to appear in one horizontal line instead, simply delete the highlighted </p><p id=”socialicons”> tags above.
  • Save the gadget and there you have it, your own spinning social sharing buttons!

 That's it.If you like this don't forget to hit share button just below.