Spinning Social Icons With CSS3 For Blogger

We always try to make something different which will attract our readers/visitors quickly.In today's tutorial we will play with some simple CSS3 properties such as -moz-transform and create a simple social widget with CSS3 spinning effect.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.

How To Add Spinning Icons With CSS3 To Blogger?

I am giving 3 style of this widget,choose any of them and follow below steps to add it to your blog.

1. Choose any style below
2. Copy the code
3. Replace my usernames with yours
4. Go to Blogger Dashboard > Layout
5. Click on Add a Gadget
6. Select HTML/JavaScript
7. Paste your code and save it.

Style 1

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By HelperBlogger */
</style>  



<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEn7muGV3rmFmNdtNVhgVI3fwQFpPMuCFzZF7-0vfIJmHDfXBLqEeTAug4vXfNwaaNs1edNS0Wuxh03Y0Pyq9kh4fZFfnPzh_lvtoY1g-loUWK6tAoVw7iMjx8ZGcFRzV28VxTpPQhxA/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxGDUJouXNwXYE-ZtU49rSN3Ix2nKu7Nsv4iY0mGmUIx00t7FblQ-g5ga-U1ST_FIbdUbeKDdvqHcc1rEoe45qrNsTb44GmO0ZDw64DRcodaghSr0Kiwa59fhrnEczaM3DIb6zOzaPGA/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXweDMDUsPB7_pytUJ2ax2wRrhEJrVuJ9f1Q2Vj_glRZlJAtL4h8LOM_kD9sVvR_-n2eZSjGq06CoPZB8Qe94buQzfD7RMfNTbuA0EvTPlWHLkUooz4WxzVzrF25ZzAUdSG9syWeYXyBM/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjE5ORxy5YR77L8pVbNbt6HBz40DNiGa-J6wcVqLK8zSu_YDmhD3EuD5REi4y5H9Dy1eKoiDQhhlLiev9iWczU28tWc31LsKliQFV_IzM6yQY4Q2JENPzqj3aXlMO8RL6XWQeQlKmC7s/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uGTY-38hX3Yx-0aA5FWnZediSkRbnHdWC4xxA_RJeaXSco3pKqIUAPSXk2djWFpZgHGCSx2mhC-ajApY5rQKrZsMdhNBKBrqksT-zWdlIgMkjrDbM_CDBcDMvXCPz3NdsqjEjDIkt9g/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Style 2

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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#hb_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 HelperBlogger */
</style>  



<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEn7muGV3rmFmNdtNVhgVI3fwQFpPMuCFzZF7-0vfIJmHDfXBLqEeTAug4vXfNwaaNs1edNS0Wuxh03Y0Pyq9kh4fZFfnPzh_lvtoY1g-loUWK6tAoVw7iMjx8ZGcFRzV28VxTpPQhxA/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxGDUJouXNwXYE-ZtU49rSN3Ix2nKu7Nsv4iY0mGmUIx00t7FblQ-g5ga-U1ST_FIbdUbeKDdvqHcc1rEoe45qrNsTb44GmO0ZDw64DRcodaghSr0Kiwa59fhrnEczaM3DIb6zOzaPGA/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXweDMDUsPB7_pytUJ2ax2wRrhEJrVuJ9f1Q2Vj_glRZlJAtL4h8LOM_kD9sVvR_-n2eZSjGq06CoPZB8Qe94buQzfD7RMfNTbuA0EvTPlWHLkUooz4WxzVzrF25ZzAUdSG9syWeYXyBM/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjE5ORxy5YR77L8pVbNbt6HBz40DNiGa-J6wcVqLK8zSu_YDmhD3EuD5REi4y5H9Dy1eKoiDQhhlLiev9iWczU28tWc31LsKliQFV_IzM6yQY4Q2JENPzqj3aXlMO8RL6XWQeQlKmC7s/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uGTY-38hX3Yx-0aA5FWnZediSkRbnHdWC4xxA_RJeaXSco3pKqIUAPSXk2djWFpZgHGCSx2mhC-ajApY5rQKrZsMdhNBKBrqksT-zWdlIgMkjrDbM_CDBcDMvXCPz3NdsqjEjDIkt9g/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Style 3

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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#hb_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 HelperBlogger */
</style>  



<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEn7muGV3rmFmNdtNVhgVI3fwQFpPMuCFzZF7-0vfIJmHDfXBLqEeTAug4vXfNwaaNs1edNS0Wuxh03Y0Pyq9kh4fZFfnPzh_lvtoY1g-loUWK6tAoVw7iMjx8ZGcFRzV28VxTpPQhxA/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxGDUJouXNwXYE-ZtU49rSN3Ix2nKu7Nsv4iY0mGmUIx00t7FblQ-g5ga-U1ST_FIbdUbeKDdvqHcc1rEoe45qrNsTb44GmO0ZDw64DRcodaghSr0Kiwa59fhrnEczaM3DIb6zOzaPGA/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXweDMDUsPB7_pytUJ2ax2wRrhEJrVuJ9f1Q2Vj_glRZlJAtL4h8LOM_kD9sVvR_-n2eZSjGq06CoPZB8Qe94buQzfD7RMfNTbuA0EvTPlWHLkUooz4WxzVzrF25ZzAUdSG9syWeYXyBM/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjE5ORxy5YR77L8pVbNbt6HBz40DNiGa-J6wcVqLK8zSu_YDmhD3EuD5REi4y5H9Dy1eKoiDQhhlLiev9iWczU28tWc31LsKliQFV_IzM6yQY4Q2JENPzqj3aXlMO8RL6XWQeQlKmC7s/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uGTY-38hX3Yx-0aA5FWnZediSkRbnHdWC4xxA_RJeaXSco3pKqIUAPSXk2djWFpZgHGCSx2mhC-ajApY5rQKrZsMdhNBKBrqksT-zWdlIgMkjrDbM_CDBcDMvXCPz3NdsqjEjDIkt9g/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Now replace highlighted lines with your social profile URL.

Finally save your widget and you are done :)