Css Powered Social Widget 2013 For Blogger

Hello guys.Hope you all had a blastin New year.Today I have for you a tempting Css social widget for blogger.Unlike the early editions ,this particular widget is clean and clumsy.I'm sure that this will tempt your readers to have a look at your fb page or twitter land mark.This is a Css powered social subscription + Fan page widget.This  is a must in all your blogs.This widget will also embed Google authorship mark ups in your blog so that your Google plus profile picture will be displayed in Google when people search your site. Doesn't that seem exciting? Lets get into the tutorial.

Live Demo-Css Powered Social widget v3

• Subscribe to the RSS Feed
• Follow me on Twitter
• Find me on Facebook
• Join me on Google+
• Connect with me on LinkedIn

The Code -Copy right Softwarevilla

<style type="text/css">
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/softwarevilla/UYitv">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/anzjoy99">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/unbelievableuniverse">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/Anzjoy">Connect with me on LinkedIn</a></li>
</ul>
</div>

Customization-Little Touch Up

• Replace The Text In Orange With your Feed Burner Id
• Replace The Text In Blue With your twitter Id
• Replace The Text In Green With your Facebook Fan page URL
• Replace The Text In Pink With your Linkin Id