Add CSS3 Spinning Social Sharing Buttons In Blogger

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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_tV2BHhB1Zbv8crQnl-N0YhWfoDhgH_wZmu1W-d5buWhxQ_0FcdjcZtm1hpFUh5WKxcr8c7tb_B9LBQeP0386EfISHgwlsSowia6qbeEkhEucdXmIdyN4ZF6hOYB3oModlI851jNyEc/s1600/latesthack.com-facebook.png” /></a>
<a href=”http://www.twitter.com/TWITTER_NAME/” target=”_blank”><img border=”0″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqXKILIEGubP6CroBT7RUHQI8wS7QLyZ0A_rbphyphenhyphenJLNJ1qTAKiqrISSsXvYDMUZU1_f3GFjMQSsjCY3aYrFzTaSdFaNgqbR0wRuxoZUigrsYuQYOojG7iQP8uwH7703eAGlFqaxmSuo0/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLc0sAQEzuA0RS3FZ-K-mvyAP2oBCTPB5uL17AjnZmaof27hRfjvtgtJp6kUa3JGaBWj8PN195PYUkkESz4hMhCprXtYAfyzYTBIUGrWr0vVkZMoRevUmaE9AeY4mdNutc61nwILyhW4A/s1600/latesthack.com-google_plus.png” /></a>
<a href=”http://feeds.feedburner.com/FEEDBURNER_NAME/” target=”_blank”><img border=”0″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIZKrWDRjCi0kTS2DHw8pwueOJpEbG6yD3K5mBY_Soo2WYV1aw4aHfE8JRZv3zFqALSDick6tm7KtGY1M4PYWbw-2NVo8-11dP0DU6ikz7g36GR-FRlRgDR7cKKUVNgNogjiDvM7n0nA/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!

Filed Under: Blogspot, Blogspot Tricks, New Design, Social Sites Tricks, Widgets on Thursday, 5 September 2013