Floating Facebook Like Box widget For Blogger And Website

Tweet

Floating Facebook Like Box widget For Blogger:

Floating and scroll to to left Side of Blogger Sidebar Facebook Like Box is very attractive way to get more fans to your facebook Page.
As A Blog Owner You need to promote Your Blog. and for this Facebook Really help you. infact Facebook Fan Page is A great Source to attract Visiters.
Now a days everyone Using Facebook to Promote Blog. and you need some likes means Fans to Share your thoughts and to share your Blog posts.

How it Works:
when Some one Hover Mouse on Facebook then it Move to left side and then Go back to the previous state.
The best thing is that it doesn't hurt the user and also did not reserve place in Your Blog.
if you are Using the Common facebook LikeBox in your Blog. usually it Reserve Space and not good impression.

How To add to blogger:

1. Go to Your Blogger Layout, Add Gadget>Html/javaScript
2.Copy The Below Code and Paste it into a Gadget.

<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/AVvXsEhbnUTdhm0khGX5wvo67eDClTaoYuFRoTYoLHRETJAs4_RkeUYPfkdDHVlAVMa2FnJrOAhnZ2wi_Hkztqx7SlVM2ddyF6GP7HdxDDtAFkrT4Qr0EVOa3jLaOmT_d4Tt7n7bmWJB_SPdRDFK/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/username&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;">

</iframe></div>
</div>
<a href="http://TrixKing.blogspot.com" target="_blank">How to Blogger -Freebies-SEO </a>

3. Paste The below Code Just Before </head>

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

Note: ignore Step-3 if you already have this code at Before </head>

How to Add in Website:

1. copy and paste above html code just above</body>
2. Also do step no 3 above

Customization And Usage: 
In the Html/Javascript code Replace Username with your Facebook Page User Name.

Replace username with your Facebook Page username

Please Share it! :)