Add A Multi Color Bookmarking Widget On Your Blog

This is a pure CSS and Text based widget. With a multi color social bookmarking widget your blog will look professional and nicer. This is a free social bookmarking widget with multi color option. Also it has some images to show icons of different websites just like Facebook, Twitter and Google+. Don't worry about loading time of your blog because this widget is designed with pure CSS coding. Images for icons in this widget are provided by photobucket.com. This social bookmarking widget will boost your social followers. I have give a hover touch in this widget with black hover color. Also you can change this color with any color as you like. This widget is look like rainbow effects social bookmarking widgets. Give your blog's a professional touch with this error free bookmarking widget. You can customize it to fit on your blog, also you can add it in sidebar and footer areas of your blog. Now read below for more.

Why To Add This Widget Into My Blog ?

1. This widget has professional look - Stylish and Unique looking widget.
2. It will fit in all areas of your blog - You can add this widget into sidebar, footer.....
3. You can customize it as you want - You can change its width, height and colors.
4. This is a cross-platform widget - You can use it on Blogger, WordPress, Weebly and all other major blogging platforms.
5. This is a totally free bookmarking widget - Like many other widgets this widget doesn't has a credit link.

Recommended: How To Increase Google Page Rank - Basic Guide

How To Add Rainbow Styled Bookmarking Widget ?

You can add this widget into your blogs. Don't worry about platform you can add it, if your blogging platform support the HTML and CSS coding. Here I want to teach you how to add this widget into blogger powered blogs.

Step 1. Go to Blogger.com and Login

Step 2. Select your blog and go to its Layout section

Step 3. Now click on Add a Gadget box

Step 4. From lots of options select HTML/JavaScript by scrolling down.

Step 5. Copy following coding using Ctrl + F and paste into HTML area of new widget.

  <style type='text/css'>
/****** coded by www.allblogthings.com *******/
.abt-multicoloredwidget {  width: 295px;  margin: -5px;  text-decoration: none; }
.abt-multicoloredwidget ul {  margin: 0px;  padding: 0px;  text-decoration: none;}
.abt-multicoloredwidget ul li {  list-style:none;   padding: 0px; text-transform: none; text-decoration: none;}
.abt-multicoloredwidget ul li a {   color: #ffffff;   display:block;  text-decoration: none;}
.abt-multicoloredwidget ul li a:hover {  color: #ffffff;  background-color: #333;  text-decoration: none; }
.abt-multicoloredwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 11px center #4CBB17; background-size: 20px; padding: 18px 45px; }
.abt-multicoloredwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 11px center #499DF5; background-size: 20px; padding: 18px 45px; }
.abt-multicoloredwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 11px center #E0464A; background-size: 20px; padding: 18px 45px; }
.abt-multicoloredwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 11px center #7D26CD; background-size: 20px; padding: 18px 45px;}
.abt-multicoloredwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 11px center #FF664A; background-size: 20px; padding: 18px 45px; }
/****** coded by www.allblogthings.com *******/
</style>

<div class="abt-multicoloredwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/AllBlogThings">Subscribe to Our RSS Feed</a></li>
<li><a class="facebook" href="https://www.facebook.com/AllBlogThings">Find Us on Facebook</a></li>
<li><a class="google" href="#">Join Us on Google+</a></li>
<li><a class="twitter" href="https://twitter.com
/UmerPrinceWorld">Follow Us on Twitter</a></li>
<li><a class="linkedin" href="#">We are on LinkedIn</a></li>
</ul>
</div>

Customization

• Change red colored text with your Feed-burner username.
• Change orange colored text with your Facebook page username.
• Change fuchsia colored text with your Google+ username.
• Change blue colored text with your Twitter username.
• Change green colored text with your LinkedIn username.
• Click on Save button and visit your blog.

Final Words

So! dear bloggers I hope, you like this multi color social bookmarking free widget. If you got any problem while installing this widget on your blog then leave a comment below. I will fix as soon as time allow me.