HOW TO ADD COLOURFULL SOCIAL BUTTONS TO BLOGGER

Something is fishy happening in google headquarters every day they  started the morning with a new penalty for bloggers and webmasters by releasing algorithm updates,changing there polices and doing something strange to keep SERP clean. They have released latest algo updates two times a month in the history of algorithms.
So bloggers and webmasters keeping google aside are taking shadows of social media quality Dofollow backlinks to genrate there traffic and revenue.So here we are today we have relased the widget to solve all these problems with the simplicity and with the great ease colourfull social buttons with hover effect which will enhance your blog beauty we have put a new entire look to it which will greatly enhance your visitors so in this post we will tell you ,How to add colourfull social buttons with hover effect to your blogger blog.

                                                                                              
How To Add Social Media Buttons To Your Blogger Sidebar

Go to your blog Layout section > Add A Gadget > HTML

Paste the above whole html code in it and save it   
    

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

Change The Username In The Code 

• 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

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code