Another most important ,blogger tutorial, about “how to Multi Color Bookmarking Widget On
Your Blog”. Yes I am introducing you about eye catching and fascinating bookmarking
,widget,. This is very much important or blog to bookmarked by others to increase
readers traffic on blog. This widget is fancy and easy to use.
How To Add Multi Color Widget in blog?
Do these steps to add multicolor Social bookmarking widget
- 1. Go to Blogger.com
- 2. Sing in to your blogger account
- 3. Go to your blog
- 4. Go to the layout
- 5. In layout go to gadget
- 6. In gadgets select HTML/JavaScript
- 7. Copy the code given below and paste in HTML/JavaScript
<style type='text/css'>
/****** coded by www.operaorbs.blogspot.com *******/
.oo-multicoloredwidget { width: 295px; margin: -5px; text-decoration: none; }
.oo-multicoloredwidget ul { margin: 0px; padding: 0px; text-decoration: none;}
.oo-multicoloredwidget ul li { list-style:none; padding: 0px; text-transform: none; text-decoration: none;}
.oo-multicoloredwidget ul li a { color: #ffffff; display:block; text-decoration: none;}
.oo-multicoloredwidget ul li a:hover { color: #ffffff; background-color: #333; text-decoration: none; }
.oo-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; }
.oo-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; }
.oo-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; }
.oo-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;}
.oo-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.operaorbis.blogspot.com *******/
</style>
<div class="oo-multicoloredwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/OperaOrbis">Subscribe to Our RSS Feed</a></li>
<li><a class="facebook" href="https://www.facebook.com/PrinxessRabi.OperaOrbis">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
/PrinxessRabi">Follow Us on Twitter</a></li>
<li><a class="linkedin" href="#">We are on LinkedIn</a></li>
</ul>
</div>
Customize
- Change Pink colored text with your Google+ username.
- Change Yellow colored text with your Twitter username.
- Change Green colored text with your LinkedIn username.
- Change Red colored text with your Feed-burner username.
- Change Orange colored text with your Facebook page username.
- Click on "save" button and visit your blog.
Final Words
I hope you will really enjoy blogger tutorial about “how to Multi Color Bookmarking Widget On Your Blog”. This multicolor blog will really be very helpful and for any problem comment below. I will fix the problem.
Comment Policy : We are pleased to see your comment here. However, Please Keep in mind that all comments are moderated manually by humans according to our comment policy all. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and meaningful conversation.