Social Bookmarking Widget For blogger With Bubble Effect

Blogger Social Bookmarking ButtonsSimple Social Bookmarking Widget With Bubble Effect For blogger Blogs.Its Attractive And Most Effective For Sharing.

Demo 

How To Add this To Your blog :

Go to your blogger dashboard then click Design > Add a Gadget > HTML/JavaScript and paste the below code

<ul id=”bubble”>      <li>        <a class=”icon feed”href=”http://feeds2.feedburner.com/dailyblogtools/feeds” title=”Full RSS Feed”>Full RSS Feed</a>      </li>      <li>        <a class=”icon email” href=”http://feedburner.google.com/fb/a/mailverify?uri=dailyblogtools/feeds” title=”Feed via Emal”>Feed via email</a>      </li>      <li>        <a class=”icon twitter”href=”http://twitter.com/dailyblogtools” title=”Full RSS Feed”>Follow me on Twitter</a>      </li>      <li>        <a class=”icon facebook”href=”http://facebook.com/dailyblogtools” title=”Full RSS Feed”>I’m on Facebook</a>      </li>      <li>        <a class=”icon delicious”href=”http://delicious.com/save”onclick=”window.open(‘http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://dailyblogtools.com&amp;title=Daily Blog Tools.com’, ‘delicious’,’toolbar=no,width=550,height=550′); return false;”title=”Full RSS Feed”>Save me</a>      </li>      <li>        <aclass=”icon technorati” href=”http://technorati.com/faves?sub=addfavbtn&add=http://dailyblogtools.com” title=”Full RSS Feed”>Fave me</a>      </li></ul>

After adding, this will look quite normal. Now you have to add the CSS

Add THE Below CSS To Active This Widget

Add the below code just above ]]></b:skin>

#bubble {
list-style: none;
margin: 0px;
padding: 0px;
}
#bubble li {
display: inline-block;
margin: 0px;
padding: 0px;
}
#bubble li a.icon {
background: url(http://1.bp.blogspot.com/-4Cl4QdOS5Nc/TeNsP-AD01I/AAAAAAAAAPc/AqXiG7_zsIA/s1600/sprites.png) no-repeat;
border: none;
display: block;
width: 128px;
height: 128px;
text-indent: -9999px;
}
#bubble li a.feed {
background-position: -139px -12px;
}
#bubble li a.feed:hover {
background-position: -13px -12px;
}
#bubble li a.email {
background-position: -139px -149px;
}
#bubble li a.email:hover {
background-position: -13px -149px;
}
#bubble li a.twitter {
background-position: -139px -283px;
}
#bubble li a.twitter:hover {
background-position: -13px -283px;
}
#bubble li a.facebook {
background-position: -139px -422px;
}
#bubble li a.facebook:hover {
background-position: -13px -422px;
}
#bubble li a.delicious {
background-position: -139px -559px;
}
#bubble li a.delicious:hover {
background-position: -13px -559px;
}
#bubble li a.technorati {
background-position: -139px -698px;
}
#bubble li a.technorati:hover {
background-position: -13px -698px;
}

 

 

One Response to “Social Bookmarking Widget For blogger With Bubble Effect”

  1. Any fascinating discussion is worthy of attention, this blog is quite nice.

Leave a Reply

CommentLuv badge

© 2017 Daily Blog Tools. All rights reserved. Site Admin · Entries RSS · Comments RSS
Powered by WordPress · Designed by Theme Junkie