Social bookmarking widget - Using image swapping

This image swapping actually use a image rollover technique , when you move your mouse to any  image it grows and shrink back when the mouse is removed.This effect is based on Lam Nguyen bubble effect with css i have simplified it to make it easier to implement to blogger.

Download images icon set 'large' and 'small'  and upload to any free hosting and take account of the urls.

1.HTML part
Let Us first look at the html part of the widget which contains two classes of images 'small' and 'large'.Small for initial stage and large for active state.

    <ul id="bubble2">
      <li>
        <a href="http://feeds2.feedburner.com/funwithblog" title="Full RSS Feed">
            <img class="small" src="images/feed.png" alt="Full RSS" />
            <img class="large" src="images/feed_large.png" alt="Full RSS" />
        </a>
      </li>
      <li>
        <a href="http://feedburner.google.com/fb/a/mailverify?uri=funwithblog&loc=en_U" title="Feed via Emal">
            <img class="small" src="images/email.png" alt="Feed via Emal" />
            <img class="large" src="images/email_large.png" alt="Feed via Emal" />
        </a>
      </li>
      <li>
        <a expr:href='&quot; http://twitthis.com/twit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
            <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
        </a>
      </li>
      <li>
        <a href="<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
            <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
        </a>
      </li>
      <li>
        <a expr:href='&quot;http://del.icio.us/post?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/delicious.png" alt="Save me" />
            <img class="large" src="images/delicious_large.png" alt="Save me" />
        </a>
      </li>
      <li>
        <a expr:href='&quot; http://technorati.com/faves?add=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'/>
            <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
            <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
        </a>
      </li>
    </ul>

Do not forget to replace large and small images with their respective urls.
2. CSS part

#bubble2 {
    list-style: none;
    margin: 20px 0px 0px;
    padding: 0px;
}
#bubble2 li {
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    width: 72px;
    height: 72px;
}
#bubble2 li a img {
    position: relative;
    border: none;
}

#bubble2 li a img.large {
    display: none;
}

#bubble2 li a:hover img.small {
    display: none;
    z-index: 0;
}

#bubble2 li a:hover img.large {
    display: block;
    margin-top: -28px;
    margin-left: -28px;
    z-index: 1000;
}
<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
    display: inline;
}
</style>
<![endif]-->

Adding to blogger
Search for <p><data:post.body/></p> or <data:post.body/>  in your template.
And place HTML part below it.

Add Css Part of the code to your css of your template which is generally between the skin tag.
<b:skin>   and  ]]></b:skin>