Add Spinning Social Icons Using CSS3 For Blogger

Adding eye-catching social sharing widget to your blog/site increase your chances of getting more subscribers. Most visitors are force to click on subscription widget due to awesome sharing widget you present them, why some clicked it just for testing and before you know it, they become your loyal subscribers/followers.
Now i will be sharing with you, a spinning social sharing widget, which rotate on mouse hover according to the degree you set it, and return to it's original position when you remove the mover hover.

How To Add Spinning Social Icons

• Go to you blogger dashboard
• Click on Design > Page elements > Add a Gadget (Old blogger interface)
• Click on Layout > Add a Gadget (New blogger interface)
• Select HTML/JavaScript from the options listed and paste the following code in the content box.

<style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget By www.realcombiz.com */
    -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#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By www.realcombiz.com */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMF9Wt691ud2sluQ7JHC5vesfnJlgNLqM10NRL28zBALPwTaMmp5ngsx8PPecxTloah3kcNnNiz9CraIHrE5KLrXyIJprClRyA2JSUChymmKNbAz7erm44AgRUyZ6BrRm4uWAwM393vs/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAvyLz4ge6e21PNuetRGe3cUieCdZcjWYDlIxtCGlZ736pumCD2j7HQGuMjV4ta0M2S5-jeIOBc7EyJh0DFZBT-Sfv-fkEr22kJtQnp8K-asntyZ0Vt5reXgEgQcr9wQXdtl4FXZtV3Q/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/110710740924167130289">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1AjWa-NLih7WnLZhoEgdiUXylpkwoghQ5mPwwd0EXSV8V86AieuaV9Vw5oJe_wUz5AIq96eJKdF8rMhw77QjOfMQqc_tmwz-Y4v10RHv3bXWjY1B9tBPMAFmLc9kgUipDBl0-ZSWdug/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7h86WdQ3Vo2S7n9qP5wssqNq38KCfK9o2aqu5HgMyc2PDrS5E8TlISFIf-aMZy8lb2QGsbAMk41mH4gHMk41PhLmWE3QQa0Tp_9U1ikNGm8LUmD5fXdvYp6uUO75W9YfjxCcUhDv5dm0/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5y5CUnR-6VWibmhx7rnI6-rum7ewSKvYBDNsAPeAb3Ua9IlNtS5LrI9RZi1Bh5WO6G2LTIZvL1LEPPREbJoh5twuB6_DKodTeE0HeFogiwFq1-ilugVrJgL3ObfgUhQQgjDMgoGxk2bw/s1600/rb+youtube+icon.png" /></a>
</p></center>

• Click on Save button

Customization

You can easily customize the icons to your own satisfaction by editing the code below.

• To change the rate (time taken) at which the icon rotate, simple edit 0.8s
• You can also change the degree at which the icon rotate,simply edit 360deg

Start playing with our HTML Editor for perfect customization of the widget, and if you need any further help, don't hesitate to ask using the comment box. Peace out pals :)

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz