How To Add Floating Facebook Likebox To Your Blog

Here we are again with this terrific widgets. 
People, over the years use facebook like button but today i want to introduce you to an amazing facebook widgets.Slightly like our twtter, facebook, g+ float button Floating Facebook Likebox is a Slider that hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.
The following steps will see you add this our amazing likebox into your blogger blog.

STEP 1. Adding JQuery Plugin To Your Blogger Blogs

 

1. Go To your Dashboard > Design > Edit HTML 
2. Search for </head> before it Paste the following 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'/>

4. Save Your Template.

STEP 2. Add Floating LikeBox To Your Blogger Blogspot

1. Go To Blogger > Design > Layout (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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQNuq7siHpq2zvzOIdyuVMEosJfM7lR3Tqba2elxn7F4nRuO8vFq0fLyYp2LmMW_HOyFp8n_S8L0Gnbo9LvjZ_eBcPPtgoKo6DsGXLcBi9F7Bp5maYF8S9iMfGUfC_71MkiRlWU04Eccuk/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=http://www.facebook.com/tipsbyharsha&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>Widget by:<a href="http://www.gurusmaker.blogspot.com">Huge Tymers Community</a></span></div></div>

https://www.facebook.com/elitestech

if you have not yet created a Facebook Username to your Fan Page then Create it, Once you create a username then replace tipsbyharsha with your newly created username.

5. Click on save and we are done

This is copied fromhttp://blog.eobasi.com