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/Tonysblaster">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/Infoblogmaz">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/Infoblogmaz">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/Tonyisrightblogspot">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 Red words with your Url's.


Replace Tonysblaster with your feedburner Feed ID
Replace Infoblogmaz with your facebook Page ID
Replace Infoblogmaz with your twitter ID
Replace https://plus.google.com/TonyisrightBlogspot with your Google+ ID
Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL

Well Done!

If need any further information please feel free to leave a comment below your reply will highly appreciate.