Rotating Cup Style Social Media Widget For Blogger

In this post, im helping to add a attractive social network gadget.You can link to rss feed-burner Facebook, Twitter, pinterest and Google plus.For this gadget, im using CSS and HTML.It have a nice hover style. You can check it from demo.Check here to get earlier social gadget posts.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<style> 
ul.social{list-style:none;overflow:hidden;margin-left: -40px;}
.social li{
float:left;overflow:hidden;
background:none!important;
padding:0!important;margin:0 6px}
.social li a{
display:block;width:46px;height:58px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKTlcaKL46YRKjq8ZcvemqTJ4uB-JNqTJan7QkfWIxzYxh0LhHxCUAkYdP_pXw6B0qxbxFePaxC7LiY17icmWhSHMvNG8IhX0wWXUQtfkp3rCD4AQJIAIhLzWOjuG4VhhwU16LgvrMTE/s1600/social-icon.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{padding:0!important;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}
.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;}
.bloggertrix{width:300px;float:left}
.bloggertrix .count{color:#f17c18;font-size:14px;font-weight:bold;font-family:Helvetica,Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0 0 4px;margin:0}
.bloggertrix .count span.bigcount{color:#f17c18;font-size:24px;font-family:Helvetica,Arial;line-height:39px;vertical-align:middle;margin:0;padding:10px 0 0 0}
.bloggertrix .subicons{border-bottom:1px solid #e6e6e6;margin:0;float:left;width:100%;font-family:Helvetica,Arial;font-size:12px}

</style><br /><div style="display: none;">Email Subscription box by<a href="http://www.bloggertrix.com/">Blogger tricks</a></div>
<div class="bloggertrix">
<h1 class="title">
Connect With Us!</h1>
<div class="subicons">
<ul class="social">
<li class="rssicon"><a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/bloggertrix" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon"><a href="http://facebook.com/bloggertrix" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="pinicon"><a href="https://pinterest.com/bloggertrix" rel="nofollow" target="_blank">Pinterest</a></li>
<li class="gicon"><a href="https://plus.google.com/107955298793879607964" rel="nofollow" target="_blank">Google +</a></li>
</ul>
</div>
</div>