Multi- Colored Social Sharing Widget (With Mouse Hover Effect) For Blogger,wordpress

   Hi, Today i writing about  a useful and beautiful social sharing widget. This widget is fully worked with CSS code. Also attractive because of highlighted color combination, You can easily add this widget on your blogger. It make a good impression in visitors. Follow steps and install it.




















Log in to your Blogger account.

• Select Layout.

• Click on “Add a Gadget” option.

• Choose “Html/Javascript” option from given list.

• Copy below code and paste it into “Html/Javascript” 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="YOUR-FEED-BURNER-LINK">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="YOUR-TWITTER-LINK">Follow me on Twitter</a></li>
<li><a class="facebook" href="YOUR-FACEBOOK-PAGE-LINK">Find me on Facebook</a></li>
<li><a class="google" href="YOUR-GOOGLE-PLUS-LINK">Join me on Google+</a></li>
<li><a class="linkedin" href="YOUR-LINKEDIN-LINK">Connect with me on LinkedIn</a></li>
</ul>
</div>

Replace highlighted RED color with your social media links.

• Save your layout and go to preview

Leave a comment …………………if you like this widget……………..

Posted in: Blogs and Websites, Tips N Tricks, Tricks + Hacks