Professional Looking Social Sharing Widget For your Blog !

Social sharing is very important for successful blogging , What's the use of posting your valuable information if the world don't come to know about it ? though you might already be using some social sharing buttons and all . I have something very interesting for you - A professional Google type looking Social Sharing Widget . Hope you enjoy it .
So here are the steps for installing that beautiful Widget in you Very valuable blogger blogs !
Here's a live preview  of the Social Sharing Widget :-

Social Sharing Widget 

You liked the design ? Add that to you blog :-

• Log in to your Blogger blog .
• Select your blog from the list .
• Go to the Layout tab which you will see on the left hand side of the screen .
• Go to ' Add a gadget option ' . At the place where you want the above widget to appear .
• From the List select Html/java script .
• Copy and paste the following code in that content box :-
• After Pasting the code Save the Widget and try Refreshing your blog homepage , 

 <div class="btnt-chronicl-social">  
 <ul>  
 <li><a class="rss" href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/ClkpC">Subscribe to the RSS Feed</a></li>  
 <li><a class="twitter" href="https://twitter.com/anuragany">Follow me on Twitter</a></li>  
 <li><a class="facebook" href="https://www.facebook.com/techieblogie">Find me on Facebook</a></li>  
 <li><a class="google" href="http://Techieblogie.blogspot.com/">Join me on Google+</a></li>  
 <li><a class="linkedin" href="http://Techieblogie.blogspot.com/">Connect with me on LinkedIn</a></li>   <li><a class="youtube" href="http://Techieblogie.blogspot.com/">Watch me on YouTube</a></li>   </ul>  
 </div>  
 <style type='text/css'>  
 /*<![CDATA[*/   
 .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; }  
 .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }  
 /*]]>*/  
 </style>  

Change the links in the color to your own links and save the gadget !

Yeah ! you are Done Just add the code and check whether the code works though this has been tested on 100 of templates and is working , still if it do not work .... COMMENT and we will FIX you problem .

Google+

Liked Us ? Get all our UPDATES in your INBOX