Monday, October 1, 2012

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.
blog-post-option
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>


Replace with your links that i highlight with color.

7. Now save your HTML/Javascript'.

    You are done...

1 comment:

  1. Nice widget bro , But I've seem this widget on lot's of blog , was this widget made by you .

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete