How to add Floating and mashable Facebook Share Box on blogger blog blogspot page

Adding Floating and mashable Facebook Share Box on blogger 

Many of blogger widget are available available to add to blogspot page of blogger blog but a J-query enable facebook share floating box are very rare to add.

                           Live Demo

Here I will disscuss how to add this floating and mashable facebook widget by very easy two steps.

1. Adding facebook share floating box code
2. Adding J-query code 
3. Fist Step:

1. Go To Blogger > Design > Page Elements

2. Click on "ADD A GADGET"

3. Choose HTML/JavaScript Widget

4. Paste the Following Code inside it.

<script type="text/javascript"> //<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");},
500);}); //--> </script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=ADD YOUR FACEBOOK PAGE ID&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Floating Widget:<a href=" http://ehow-to-tutorials.blogspot.com/2011/12/how-to-add-floating-and-mashable.html">ehow</a></span></div></div>

you  have to Replace ADD YOUR FACEBOOK PAGE ID  with  your FACEBOOK page ID as like as :

e.g  http://www.facebook.com/pages/Tutionspot/165736950181089

Save the widget  then complete second Steps.

Second Steps 
1. Go To your Dashboard > Design > Edit HTML
2. Search for </head> before it Paste the below JQuery code.
3. (Ignore this step if you have already added JQuery Plugin to your blog).


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


Finally get the Floating and mashable Facebook Share Box on your blogger blog page.