HOW TO ADD POP OUT SOCIAL BOOKMARKING WIDGET WITH SMOOTH JQUERY HOVER EFFECT?
Step 1: Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin)- 1. Go to Blogger Dashboard > Design tab > Edit Html
- 2. Search for
</head>tag - 3. Add below line of code Before
</head>tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
- 1. Now search for <head>
- 2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
ADD This Code For Automatically
<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function(){jQuery(".NBTslidebox").hover(function(){jQuery(this).stop().animate({left: "0"}, "medium");}, function(){jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.NBTslidebox{background:url("http://1.bp.blogspot.com/-GIVSyJSA3_A/UNk_lh7L84I/AAAAAAAAI2w/YQcuH6_ed_c/s1600/NBTPopOut_Social_tab_left_vertical.png")no-repeat scroll right top transparent !important;display: block;float: left; height: auto;padding: 0 40px 0 5px;width: 65px;z-index: 99999;position:fixed;left:-70px;top:20%;}.NBTslidebox div{border:none;position:relative;display:block;}#floatingbuttons{background: #fff;border-radius: 5px 5px 5px 5px;border: 1px solid #CCCCCC;float:left;padding:0 0 3px 0;bottom:15%;z-index:399;}#floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;}.addbuttons{clear:both;text-align:center;padding-top:5px;}.addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}.addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div class="NBTslidebox" style=""> <div><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class="addbuttons"><a href="http://www.newbloggertips.com/2012/12/how-to-add-pop-out-social-bookmarking.html" title="Add Pop Out floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a></div></div></div></div>
ENJOY :) SAY THANKS :)
