Home » Blogger Tutorials, Tricks and Hacks » Blogger Seo Tutorials / Tricks » Add CSS3 Spinning Social Sharing Buttons In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add CSS3 Spinning Social Sharing Buttons In Blogger

Add CSS3 Spinning Social Sharing Buttons In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,413 views

Here’s another cool variation of the social sharing button design, which is an animated button from Sonu of LatestHack. The buttons are circular in shape with a slight fold on the top right (i.e. earmarked). It spins on mouse over and then spins in reverse on mouse out.

The spinning animation is accomplished using CSS, with 3 spinning variations you can choose from: 70 degrees clockwise, 360 degrees clockwise, and 360 degrees counterclockwise.

To use, simply follow the instructions below:

  • In you Blogger dashboard, 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/FB_NAME” 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/TWITTER_NAME/” 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=”socialicons1″
  • To make the buttons spin 360 degress clockwise, change id=”socialicons” to id=”socialicons2″
  • 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!

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. mahesh says:

    its really help full to my blog

  2. Ranjit says:

    Thanks for this it will help me for share my blog….thanks again

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here