Stacked Social sharing buttons with jstackmenu
Jstackmenu is a jquery plugin providing a feature to stack the items into a menu.Its a very cool plugin to make a stack menu.So implementing the stacked effect to social buttons and adding them to your blogger or website
.
<div id="stack"> <div class="trigger"> <img alt="share" src="http://moronicbajebus.com/blog/jstackmenu/files/icons/heart-64x64.png" /></div> <ul> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img alt="Twitter" src="https://sites.google.com/site/fuzionproblogger/home/twitter.png" /></a></li> <li><a href="http://digg.com/"><span class="title">Digg</span><img alt="Digg" src="https://sites.google.com/site/fuzionproblogger/home/digg.png" /></a></li> <li><a href="http://www.facebook.com/"><span class="title">Facebook</span><img alt="Facebook" src="https://sites.google.com/site/fuzionproblogger/home/facebook.png" /></a></li> <li><a href="http://reddit.com/"><span class="title">Reddit</span><img alt="Reddit" src="https://sites.google.com/site/fuzionproblogger/home/reddit.png" /></a></li> <li><a href="http://stumbleupon.com/"><span class="title">StumbleUpon</span><img alt="StumbleUpon" src="https://sites.google.com/site/fuzionproblogger/home/stumble.png" /></a></li> <li><a href="http://delicious.com/"><span class="title">Delicious</span><img alt="Delicious" src="https://sites.google.com/site/fuzionproblogger/home/delicious.png" /></a></li> <li><a href="http://flickr.com/"><span class="title">Flickr</span><img alt="Flickr" src="https://sites.google.com/site/fuzionproblogger/home/flickr.png" /></a></li> </ul> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"> </script> <script src="http://moronicbajebus.com/blog/jstackmenu/files/jstackmenu.js" type="text/javascript"> </script> <script> jQuery( document ).ready( function( ){ var stack = jQuery( '#stack ul' ).stackmenu( ); jQuery( '#stack .trigger' ).click( function( ){ stack.stackmenu( 'toggle' ); } ); } ); </script> <style> #stack { padding: 0; position: fixed; left: 100px; bottom: 100px; } #stack .trigger { position: absolute; z-index: 50; height: 64px; width: 64px; padding: 2px; left: 0; top: 0; cursor: pointer; } #stack ul { position: absolute; top: 0; left: 18px; height: 64px; width: 32px; bottom: 0; margin: 0; padding: 0; } #stack ul li { display: block; padding: 0px; width: 32px; height: 32px; margin: 6px 0; } #stack ul li .title { display: none; } #stack ul li a:hover .title { display: block; position: absolute; right: 38px; top: 8px; padding: 1px 8px; height: 14px; font-size: 11px; background-color: #fff; color: #333; font-family: Arial, sans-serif; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #stack ul li img { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; -moz-box-shadow: 0 0 5px #222; -o-box-shadow: 0 0 5px #222; border: none 0; padding: 2px; background-color: #fff; } #stack ul li a:hover img, #stack ul li a:hover .title { box-shadow: 0 0 10px #00a; -webkit-box-shadow: 0 0 10px #00a; -moz-box-shadow: 0 0 10px #00a; -o-box-shadow: 0 0 10px #00a; } .ui-stackmenu { position: relative; } .ui-stackmenu-item { position: absolute; } </style>
i like this very much...but for some reason...when i added this to my blogger... the widget didnt work out right "S it was overlapped by other widgets on the homepage... i think i didnt implement it right///
ReplyDeletei also tried adding this after my post...it still didnt work out..it clashed with my linkwithin gadget :S
ReplyDeleteHey i have updated the code......just click the add to blogger button and you are set to go...dont forget to add the jquery.js before </head> section ...if you have added already no problem
ReplyDeletelook here for working example http://splashscr.blogspot.com/