Best Animated Rotating Social Widget for Blogger

If you are a Blogger that really likes interactive or animated widgets in your blog, This widget is really a must have for you. And aside from this widget being awesome, This can also increase your social likes or follows.

When adding widgets, The one that always comes to other blogger's minds are the effect of the loading speed of their blog. So other's just refuse to add some cool widgets in their blogs because they are afraid that this kind of widget can increase their page loading speed. And all of us doesn't want pages that loads very slow even you have a very fast internet connection. But now we are no worry because this widget is made with pure CSS and HTML codes so you really not need to worry.

WIDGET DEMO

To add this Social widget in your blog, You just need to follow the easy steps below and your blog will rock in a few seconds. Please follow the procedure below carefully so there will be no problems inserting this on your blog. But if you can't really solve a problem when adding this widget in your blog. You can drop your comments below and we will try to answer it as fast as possible.

Procedure on how to put Animated Rotating Widget on Blogger (Blogspot):

• Login to your Blogger Account.
• Go to Layout.

• Then add a gadget and choose HTML & Javascript.

• Then Paste the code below.

<style>

ul.social {

list-style:none;

overflow:hidden;

}

.social li {

float:left;

overflow:hidden;

background:none!important;

margin:0 6px;

padding:0!important;

}

.social li a {

display:block;

width:40px;

height:58px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBed2wXHHC7UJN4CIVw2djK27mtV8d9o3PXN7RoFVOvXULHB-WRPH-m9v4mQalR9XX_578b5D2eveMk5ieBvdWSgLNHOIfCtFfb-XB6jlraoTUH6-fnm0El3W8s4mKhGOKT9ADS_A2t6U/h120/123.png) no-repeat transparent;

text-indent:-99999em!important;

-webkit-transition:ease-out 700ms;

-moz-transition:ease-out 700ms;

-o-transition:ease-out 700ms;

-ms-transition:ease-out 700ms;

transition:ease-out 700ms;

}

.social li a:hover {

transform:rotate(360deg);

-ms-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-o-transform:rotate(360deg);

-moz-transition-duration:700ms;

-webkit-transition-duration:700ms;

-o-transition-duration:700ms;

padding:0!important;

}

.social li.twicon a {

background-position:0 -1px;

border-right:1px solid #e6e6e6;

}

.social li.pinicon a {

background-position:-47px -1px;

border-right:1px solid #e6e6e6;

}

.social li.rssicon a {

background-position:-100px -1px;

border-right:1px solid #e6e6e6;

}

.social li.fbicon a {

background-position:-150px -1px;

border-right:1px solid #e6e6e6;

}

.social li.twicon a:hover {

background-position:0 -60px;

border-right:1px solid #e6e6e6;

}

.social li.gicon a {

background-position:-200px -1px;

}

.social li.gicon a:hover {

background-position:-200px -60px;

}

.social li.pinicon a:hover {

background-position:-48px -60px;

border-right:1px solid #e6e6e6;

}

.social li.rssicon a:hover {

background-position:-100px -60px;

border-right:1px solid #e6e6e6;

}

.social li.fbicon a:hover {

background-position:-150px -60px;

border-right:1px solid #e6e6e6;

}

</style>

<ul class="social"><li class="rssicon"><a href="http://feeds.feedburner.com/x" rel="nofollow" target="_blank">Rss</a></li><li class="twicon"><a href="http://twitter.com/x" rel="nofollow" target="_blank">Twitter</a></li><li class="fbicon"><a href="http://facebook.com/x rel="nofollow" target="_blank">FaceBook</a></li><li class="pinicon"><a href="https://pinterest.com/x rel="nofollow" target="_blank">Pinterest</a></li><li class="gicon"><a href="https://plus.google.com/x rel="nofollow" target="_blank">Google +</a></li></ul>

Animated Rotating Social Widget Customizations:

Just change the links in the code that is listed below and you're done. Just change the text colored in x with your own links.

• http://feeds.feedburner.com/x
• http://twitter.com/x
• http://facebook.com/x
• https://pinterest.com/x
• https://plus.google.com/x

Then Save the widget and drag it where you like the widget to appear and you're done!

Final Words:

If you have anything you want to say or any suggestions, Please make a comment below.