loading...

Friday, October 8, 2010

bubbleUp Social bookmarking widget for blogger

 BubbleUP  makes images in a list  enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation.




                            Preview

                               Code 
<div id="demo_bubble">
<ul id="menu_bubble">
<li>  <img alt="share it!" onclick="window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(document.location)+'')" src="https://sites.google.com/site/fuzionproblogger/home/pics/facebook.png" /> </li>
<li>  <img alt="stumble!" onclick="window.open('http://www.stumbleupon.com/submit?url='+encodeURIComponent(document.location)+'&amp;title='+encodeURI(document.title)+'')" src="https://sites.google.com/site/fuzionproblogger/home/pics/stumbleupon.png" /> </li>
<li>  <img alt="digg it!" onclick="window.open('http://digg.com/submit?phase=2&amp;url='+encodeURIComponent(document.location)+'&amp;title='+encodeURI(document.title)+'')" src="https://sites.google.com/site/fuzionproblogger/home/pics/digg.png" /> </li>
<li> <img alt="Favorite this blog" onclick="window.open('http://technorati.com/favorites/?sub=favthis&amp;add='+encodeURIComponent(document.location)+'')" src="https://sites.google.com/site/fuzionproblogger/home/pics/technorati.png" /> </li>
<li> <img alt="Save it!" onclick="window.open('http://del.icio.us/post?url1='+encodeURIComponent(document.location)+'&amp;title='+encodeURI(document.title)+'')" src="https://sites.google.com/site/fuzionproblogger/home/pics/delicious.png" /> </li>
</ul>
</div>
<style type="text/css">
 
#demo_bubble {
background-color:#ffffff;
 margin: 50px auto 50px auto;
 text-align: center;
}
 
#demo_bubble #menu_bubble {
    margin: 5px 0px;
    list-style: none;
    display: inline-block;
}
    
#demo_bubble #menu_bubble li {
    padding: 0px;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
}
  
#demo_bubble #menu_bubble li img {
    position: absolute;
    width: 48px;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0 8px 0 0;
    border: none;
    overflow: hidden;
}
 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/fuzionproblogger/jquery.bubbleup.js" type="text/javascript">
</script>
<script type="text/javascript">
 
$(function(){
 
    $("div#demo_bubble ul#menu_bubble li img").bubbleup({tooltip: true, scale:96});
    
});
</script>



No comments:

Post a Comment

fuzionpro Headline

fuzionpro