Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect

On By // 24 comments
Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect for blogger, this is upgraded from the previous version How to add floating social media (Google +1, Facebook, Twitter, Digg, Stumbleupon) buttons on blogger, but here i added Social Bookmarking Widget with simple Jquery hover Effect. You can See the live demo on the left side of the demo page and when mouse over the badge with Social Bookmarking buttons is visible by Sliding to right.
Live Demo:-

How to Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect?

Here There are 2 Simple Steps
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>
Step 2: Adding Widget Code
  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: &#39;en-US&#39;} </script>
  3. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript. 
  4. Paste this code inside it.
    <script type="text/javascript">
    jQuery(document).ready(function() {jQuery(".btntslidebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
    <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;}
    <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>
  5. Save your widget, refresh your blog. Now you can see the widget.
If you Liked it! then feel Free to Share and leave a Comment


  1. hey i want sharing buttons like yours..can u give me code..thanx

  2. How to remove it from blogspot homepage and just show it in blogs posts page?

  3. Same ques as above, hw to remove the widget from the home page n have it only in posts? thanks, great widget!

  4. @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?

  5. My site slider s not working when i used jQuery dono why can u fix this..

  6. Replies
    1. This s my Blogger Id http://mp3songsfreedwnload.blogspot.in/.. Thanks in advance..

    2. Please add this Widget to your blog Then let me Know.. I will Solve the problem :)

    3. Hi 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..

    4. Hi Gopinath,
      Please contact me through contact form or Give your mail ID I'll contact you.

    5. ecegopinathgunasekaran@gmail.com

    6. Sorry Chan Deep i dono how.. but now my slider s working.. Anyway thanks for ur precious replies..

    7. No problem. You're welcome.. :)

  7. This s my Blogger Id http://mp3songsfreedwnload.blogspot.in/.. Thanks in advance..

  8. I 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

    Please tell me how I can fix the issue.

  9. This comment has been removed by the author.

  10. Replies
    1. To change it in the code search for left: (you'll find three left:)

      Replace all the three with right:

      That's all ;)

  11. can u post on the post bar like button

  12. Its good to share this informational article which is very much helpful. Good work keep it up.


I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.