Live Demo:-
How to Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect?
Here There are 2 Simple StepsStep 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
- Go to Blogger Dashboard > Design tab > Edit Html
- Search for
</head>tag - 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>
- Now search for <head>
- 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> - Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript.
- Paste this code inside it.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".btntslidebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{ background: url("http://4.bp.blogspot.com/-q4SqFaTkiTs/TyO_7WhbQYI/AAAAAAAAAjE/n6UDCpWQ3Wo/s1600/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%;}
.btntslidebox 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="btntslidebox" 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.blogtipsntricks.com/2012/01/add-pop-out-social-bookmarking-widget.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>
</div>
</div> - Save your widget, refresh your blog. Now you can see the widget.
9 comments:
hey i want sharing buttons like yours..can u give me code..thanx
@Nachiket
This is the previous version of this widget you can get it in this page
How to add floating social media (Google +1, Facebook, Twitter, Digg, Stumbleupon) buttons on blogger
Cool..
How to remove it from blogspot homepage and just show it in blogs posts page?
Same ques as above, hw to remove the widget from the home page n have it only in posts? thanks, great widget!
@Bhavika
You can check out this post which is recently published in our blog to hide this widget from home page.
How to Show and Hide Blogger Widgets On Certain Pages?
thanx alot for sharing this widgets great blog
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 video player
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
Post a Comment