Add POPUP Social Bookmarking Widget with Smooth Jquery Hover Effect

There are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin:

Go to Blogger Dashboard > Design tab > Edit Html
Search for </head> tag
Add below line of code Before </head> tag:

<script src="" type="text/javascript"></script>

Step 2: Adding Widget Code:

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='' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript.
Paste this code inside it.(Download this code)

<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("") 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="">
</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 = ''; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='' 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=""></script></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'><a href="" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>

Save your widget, refresh your blog. Now you can see the widget.