Social Bookmarking Widget For blogger With Bubble Effect

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

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/urusername/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/urusername“ title=”Full RSS Feed”>Follow me on Twitter</a>      </li>      <li>        <a class=”icon facebook”href=”http://facebook.com/urusername“ 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://ursite.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://ursite.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEqPCZlWCTGYFC9J5IimBqpiyclPr_vcGet7_vCaKuPR7CU1wibh2ZLcfxYh0yCGzjIUcJEetUosEiZidsjT_RvJ-8GLfBg7OBBM7wIWhg7dEo7ZE3hq06TXxjM2NZaKqig8JxdsRgNI/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;
}