Add a Multi Color Social Bookmarking Widget

We also have an another Social Bookmarking Widget for blogger which has a unique feature with multicolor and black mouse hover effect when we touch widget by mouse pointer this widget is simply made by using the CSS and HTML and some images so this widget will not has any error in the installation and also it works very awesome in your own blog and it will give a unique rainbow effect to your bookmarking experience.This widget is very smooth and easily customizable so you easily use it as the sharing widget for your blog by using the sharing codes but we will publish it soon with same widget. I'll recommend you to add this widget in your blog be'coz it's a pure CSS widget.

Live Demo

Add Multi Color Bookmarking Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

 <style type='text/css'>
/*WIdget by www.widgetgenerators.blogspot.com*/
.wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
.wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
.wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
.wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
.wg-roseicwidget 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; }
.wg-roseicwidget 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;}
.wg-roseicwidget 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; }
.wg-roseicwidget 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; }
.wg-roseicwidget 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; }
/*WIdget by www.widgetgenerators.blogspot.com*/
</style>


<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="https://www.facebook.com/WidgetGenerators">Join Us on Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/WidgetGenerators">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/WidgetGenerator">Follow me on Twitter</a></li>

<li><a class="google" href="https://plus.google.com/101961392825834817673">Join me on Google+</a></li>
<li><a class="linkedin" href="#">Connect With Us on LinkedIn</a></li>

</ul>
</div>

• Save your widget after below changes.

 Make Changes....!

• Replace WidgetGenerators with your Facebook page user name.
• Replace WidgetGenerators with your Feed burner user name.
• Replace WidgetGenerator with your Twitter user name.
• Replace 101961392825834817673 with your Google + id.
• Replace # with your Linkedin user name.

If Any Problem Comes, Ask in Comments