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
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)+'&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&url='+encodeURIComponent(document.location)+'&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&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)+'&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>
Comments
Post a Comment