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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnApy0lsKTz8y0jS4CVQym7zPle4zMGAYXt1NN2GPo8s2T1jyvzC9q6-BysmGE-iCc3-gZ8EECGaW8UwQ7K0Bbccn8FVjVg8Ruqjq4B1kP2VgmACehPqhOJBZ4dN4XfPmnV6vzWgTs8eE/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><!-- 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='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.
hey i want sharing buttons like yours..can u give me code..thanx
ReplyDelete@Nachiket
ReplyDeleteThis 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
How to remove it from blogspot homepage and just show it in blogs posts page?
ReplyDeleteSame ques as above, hw to remove the widget from the home page n have it only in posts? thanks, great widget!
ReplyDelete@Bhavika
ReplyDeleteYou 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?
My site slider s not working when i used jQuery dono why can u fix this..
ReplyDeleteGive me your blog url. :)
ReplyDeleteThis s my Blogger Id http://mp3songsfreedwnload.blogspot.in/.. Thanks in advance..
DeletePlease add this Widget to your blog Then let me Know.. I will Solve the problem :)
Deletesure will do tonight..
DeleteHi chandeep i did.. In my slider i have 5 images, But now its showing only the first image.. Will Wait for ur reply.. Fix this..
DeleteHi Gopinath,
DeletePlease contact me through contact form or Give your mail ID I'll contact you.
ecegopinathgunasekaran@gmail.com
DeleteSorry Chan Deep i dono how.. but now my slider s working.. Anyway thanks for ur precious replies..
DeleteNo problem. You're welcome.. :)
DeleteThis s my Blogger Id http://mp3songsfreedwnload.blogspot.in/.. Thanks in advance..
ReplyDeletethank you!
ReplyDeleteI added th widget to my blog http://www.artem-bebik.com/. I'm satisfied except one problem. Jnce I click Like button, the Facebook sharing slider is not coming out of the widget field. Like that http://s16.postimg.org/6ehaviefp/facebook_issue.jpg
ReplyDeletePlease tell me how I can fix the issue.
This comment has been removed by the author.
ReplyDeleteCan I change to the right side?
ReplyDeleteTo change it in the code search for left: (you'll find three left:)
DeleteReplace all the three with right:
That's all ;)
can u post on the post bar like button
ReplyDeletestill like button
ReplyDeleteIts good to share this informational article which is very much helpful. Good work keep it up.
ReplyDelete