Add Pure CSS Spinning Social Icons For Blogger

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. 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. This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.On mouse hover they spins(rotates) some degrees and when mouse hovers out on it they return to their original position,this effect is caused by the CSS3 property which I have mentioned above.Now lets go to the tutorial and see how to add them into blogger blog.
Live Demo

ADD YOUR OWN SPINNING SOCIAL ICONS WITH BELOW GENERATOR

HOW TO ADD SPINNING SOCIAL ICONS MANUALLY WITH BELOW CODE:

• 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>
#NBT_socialicons img {
 /* Spinning Social Icons Widget By www.AllTipsoTricks.blogspot.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;
}

#NBT_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.AllTipsoTricks.blogspot.com */</style>

<center><p id="NBT_socialicons">
    <a href="http://www.facebook.com/AllTipsoTricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaw3_jWcgE_aeBu5TABsuUwQdBIVEbl13asQezjVnn3elD4Uta8ztMNjGd87nW2NOoJesRCB2ONb3xjaOHZNcvU4suk7ILuVcxyy4VFBCGadbit3_ZpnI91i6_Nre8FNHpDnGHZrErsghg/s1600/NBT+facebook+icon.png" /></a>

    <a href="http://www.twitter.com/AllTipsoTricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgzR0q5ZbGhMESSYprw089n-mrfecH8WV9J2S9iDzq90YcLGS0QmwOqs2EcWi1A2dRAQh7uS5zfA22NV-2riCYPjVA29HkxErLLekCbNQkt8kPLrOLXSzX6ct8ed3sMe60Y_dzIX19Due/s1600/NBT+twitter+icon.png" /></a>

    <a href="https://plus.google.com/111151918137636019486"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbj4RtJCNxj7wGmZuCnCRWn3FU6oEsHcXbtFxdhyphenhyphendgTa88GORTDs6agdnhyhJSDBLiXCVAA-Maz4NmW7wZVzV24Hr7C0du4mwNTI5-Ng5BP9tL6qXqJnA1Vwy_hhcnfudMUSojLUr3Kw6/s1600/NBT+google+plus+icon.png" /></a>

    <a href="http://www.feeds.feedburner.com/AllTipsoTricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoUCNhBiQhOXEmPWaAjoH0d1XZqPyB11JDJqavt-cOW3XXG2y0_M7pdbn5Bd7S-OgR8OjRgH2jinQzC3nqRfUXpRJsHpKH0QRNdlZXMM_Vrn7ZDHtO1sSJFBhk0gXqgtlqlYK5MZMCzna/s1600/NBT+rss+feed+icon.png" /></a>

    <a href="http://www.youtube.com/TheHeavenPk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhMnQBAfo2RNvFAnt-RtwSPeaNS2cJV9ZTMAJska9OVxBHwZUXPvC0jpUibs8pGkNdIMerOnqL5Pl6LAXd2QTF8IwA0UF-cSBtbP4wM_MQ6BITkR5HQMcPqj8eqYQNXaMLFUzQ8yVLkGD/s1600/NBT+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

Now replace highlighted lines with your social profile URL

• http://www.facebook.com/AllTipsoTricks
• http://www.twitter.com/AllTipsoTricks
• http://plus.google.com/111151918137636019486
• http://www.feeds.feedburner.com/AllTipsoTricks
• http://www.youtube.com/AllTipsoTricks

If Your Like This Widget then please let us know your opinion. Drop your comments below if need any help.
Happy Blogging.... :)