How To Add Pop Out Social Bookmarking Widget With Smooth Jquery Hover Effect

Now a days Blogism is going more powerful with Social Bookmarkings. Facebook, Twitter, Stumble Upon, Digg, Tumbler are famous for getting high quantity visitors and for better blogger SEO.

This is the tutorial about adding the Pop Out Social Share Widget for Blogger.

What's Special in this Widget ?

The widget itself is fabulas creation with custom Jquery Hover Effect.
We have added Facebook like, Google+ , Stumble Upon, Digg Submits and Twitter Tweet.
You will not get the beautiful presense of this widget until you try it.

Installing the Widget for Blogger

1. Go to Blogger > Template > Edit HTML.
2. Find this code </head>

3. Paste the following code just above it.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

4. Now click Save and go to Layout > Add Gadget > Select HTML/Java Script

5. Copy paste the following Code.


<script type="text/javascript">
/*<![CDATA[*/
jQueryundefineddocument).readyundefinedfunctionundefined) {jQueryundefined".btntslidebox").hoverundefinedfunctionundefined) {jQueryundefinedthis).stopundefined).animateundefined{left: "0"}, "medium");}, functionundefined) {jQueryundefinedthis).stopundefined).animateundefined{left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{    background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqd8J_pMYE2KM1RQfvPuyceuPJAh_1e4cY6aX93UqN6eat7LRiW7yqaz7r6TLqT5QAB92qIZzGGQ8Xb8KDsBbKq_2wXzo9rTXbX8B-8diQ7yZ-KvVAaJbLsXN0ae16vwm0DrVcJ3Ak7y0/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"> undefinedfunctionundefined) { var s = document.createElementundefined'SCRIPT'), s1 = document.getElementsByTagNameundefined'SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBeforeundefineds, s1); })undefined); </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://techethix.blogspot.com/2013/07/pop-out-share-widget-blogger.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get This</span></a> </div>
</div>
</div>
</div>