Tuesday, December 30, 2014

Social Bookmarking Widget for Blogger

DEMO
This Social Bookmarking widget has professional and good look color, s. You can use this widget anywhere you want to your blog. And you can change any color, width, and height.

Let's see how to add this cool widget to your website/blog

1: Select your website/blog layout section 
2: Now click add a gadget box button Copy below (HTML/JavaScript) coding and Paste into your new Gadget and save
<style type='text/css'> /******(MyBlogger Tools)******/ .mybloggertools-multicoloredwidget {  width: 295px;  margin: -5px;  text-decoration: none; } .mybloggertools-multicoloredwidget ul {  margin: 0px;  padding: 0px;  text-decoration: none;} .mybloggertools-multicoloredwidget ul li {  list-style:none;   padding: 0px; text-transform: none; text-decoration: none;} .mybloggertools-multicoloredwidget ul li a {   color: #ffffff;   display:block;  text-decoration: none;} .mybloggertools-multicoloredwidget ul li a:hover {  color: #ffffff;  background-color: #B9B9B9;  text-decoration: none; } .mybloggertools-multicoloredwidget ul li .facebook { background: url("http://2.bp.blogspot.com/-TiXJSBvd0gc/VKL2aYdhtrI/AAAAAAAAAoY/WHxpF4Rmz9M/s1600/Facebookiceon.png") no-repeat scroll 11px center #6660D8; background-size: 20px; padding: 18px 45px; } .mybloggertools-multicoloredwidget ul li .google { background:url("http://2.bp.blogspot.com/-3q1dEhphU5s/VKMBa3t2kJI/AAAAAAAAAoo/FOBt77WUr5c/s1600/Googleplusicon.png") no-repeat scroll 11px center #E0464A; background-size: 20px; padding: 18px 45px; } .mybloggertools-multicoloredwidget ul li .twitter { background: url("http://3.bp.blogspot.com/-8C8BlpZsDGA/VKMBc0VHNaI/AAAAAAAAAo0/oraNCILsBRs/s1600/twittericon.png") no-repeat scroll 11px center #499DF5; background-size: 20px; padding: 18px 45px;}.mybloggertools-multicoloredwidget ul li .rss { background: url("http://3.bp.blogspot.com/-6lZekH72dDg/VKMBc8UVhTI/AAAAAAAAAow/NAkUzXF6wsg/s1600/rssicon.png") no-repeat scroll 11px center #FFAF00; background-size: 20px; padding: 18px 45px; } </style><div class="mybloggertools-multicoloredwidget"> <ul> <li><a class="facebook" href="https://www.facebook.com/mybloggertools">Find Us on Facebook</a></li><li><a class="google" href="https://plus.google.com/103611678617885891853">Join Us on Google+</a></li><li><a class="twitter" href="https://twitter.com/MyBloggerTools">Follow Us on Twitter</a></li> <li><a class="rss" href="http://feeds.feedburner.com/mybloggertools">Subscribe to Our RSS Feed</a></li> </ul> </div>

Change Customization coding :)
4: Change Blue color, link into your Facebook (URL) 
5: Change Red color, link into your Google Plus (URL) 
6: Change Green color, link into your Twitter (URL) 
7: Change Orange color, link into your Feed-Burner (URL)

If you want to change background color just change this text
Change #6660D8 to change Facebook background color
Change #E0464A to change Google Plus background color
Change #499DF5 to change Twitter background color
Change #FFAF00 to change RSS Feed background color

Hope you will like this cool widget. This widget is free & doesn't have credit link. If you face any problem don't hesitate to contact me. And also you leave your comments in the comments area below.
So! Happy blogging :)

Previous Post
Next Post

0 comments: