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.

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

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. 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/AVvXsEgfj8l9riwBjk28RT4HQxjcU0mZzMpXV6ZxmRJQVyVEQH7M8x0ukA99wxaoEEhLgZmBWhFB9BmVVBejXZ9kTZYZvsMbOBjReLiXqvnRrgutap0x8qi5RUB9cHSaGWd_-Jo_19UFqDaGMcM/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;}
.modernhackerss{width:300px;float:left}
.modernhackerss .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}
.modernhackerss .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}
.modernhackerss .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.modernhackerss.com/">Blogger tricks</a></div>
<div class="modernhackerss">
<h1 class="title">
Connect With Us!</h1>
<div class="subicons">
<ul class="social">
<li class="rssicon"><a href="http://feeds.feedburner.com/modernhackerss" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/modernhackerss" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon"><a href="https://www.facebook.com/pages/Modernhackerss/229304697206442" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="pinicon"><a href="https://pinterest.com/modernhackerss" rel="nofollow" target="_blank">Pinterest</a></li>
<li class="gicon"><a href="https://plus.google.com/113542915191382664980" rel="nofollow" target="_blank">Google +</a></li>
</ul>
</div>
</div>


 Replace with your links that i highlight with color.

5. Now save your HTML/Javascript'.

    You are done...

For any help please comment here....