How To Add Floating Facebook Likebox Widget

Posted by Zain Raza On 3 comments
In this tutorial i will show you how to add a cool Floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog.In this tutorial you have to perform just two simple steps and you will have your own Floating Facebook like widget on your blogger.


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 > 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=http://www.facebook.com/CrackModo&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>


Now the last thing is, replace CrackModo with your Facebook Page's Username.
5Save Your Template.

Don't forget to like us on Facebook
For more information stay connected and please comment us.

3 comments:

Anonymous said...

Thanks for this information.

Htun Yin said...

Thanks

Irtaza Ali said...

you are always welcome Htun Yin. please feel free to ask question regarding any matter.

Post a Comment