Add Css Social Widget In Blogger

Hi Friends,In this Post i m sharing this css Social widget with hower effect for blogger.Hope you like this widget.This css widget is very cool and stylish.itcontains all the social links like: facebook,twitter,Google+,LinkedIn,Rss feeds,I'm sure that this will tempt your readers to have a look at on your social links.Now,Hurry up add this widget in your blog. Its very easy. just follow the below steps one by one.

How To Add Css Social Widget In Blogger 

• First for All Go To Blogger.com > Page Elements > Add a Gadget
• Choose HTML/JavaScript from the list of the gadgets
• Copy and paste the code below in the content box. 

 <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/HashmiWorld4U">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/HKashifJaved">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/HashmiWorld4U">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/104283015279880391921">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/YourUserName">Connect with me on LinkedIn</a></li>
</ul>
</div>

Change all Bold Red words with your Url's.

• Replace HashmiWorld4U with your feedburner Feed ID
• Replace HashmiWorld4U with your facebook Page ID
• Replace HKashifJaved with your twitter ID
• Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
• Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL

Well Done!