Add Floating Sliding Facebook LikeBox Widget in Blogger

Pin It
Facebook LikeBox Widget
Blogging has become a trend now a days online. Every blogger want there blog attractive and stylish so they always add new and more beautiful widgets in there blogs.Today I am going to share a very easy and simple way to put a sliding Facebook like box which is called Sliding Facebook Like Box or Floating Facebook Like Box.The widget works as a fb image remains in a fixed position on the right hand side of your site.  When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.
Simple when you take your mouse on facebook image , like box will then appear.

Add Facebook Floating Like Box Widget in your blogger websites
The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save
<!--Floating Facebook Widget by START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogtipsuk").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogtipsuk{background: url("") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .blogtipsuk div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .blogtipsuk span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogtipsuk span a{color: gray;text-decoration:none;} .blogtipsuk span a:hover{text-decoration:underline;} } </style><!--Brought to you by><div class="blogtipsuk" style="">
<!--> <iframe src=" URL of Facebook Page&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by></iframe><!--Brought to you by><span><!--Brought to you by><b:if cond='data:blog.url == data:blog.homepageUrl'><center>
<a style="color:#a8a8a8;font-size:8px;" href="">New Blogger Tips</a> - <a style="color:#a8a8a8;font-size:8px;" href="">Floating Facebook LikeBox in website</a></center></b:if>
<!--Floating Facebook Widget by END-->
6. Save Arrangement 


1. The floating is set to right side of your blog, if you want set it for left side of your blog then simply change the bolded float:right property to float:left
2. Change Write URL of Facebook Page with your own facebook page URL.

If the floating facebook like box widget is not working properly after step 1, then you need to add jquery to your site. 
Follow the instructions below. 
1. Go to Design>Edit HTML
2. Search for <head> and just below it paste the following JQuery code. 
<script src='' type='text/javascript'/>


If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.


  1. I appreciate your Great post and Thanks for sharing this awesone information, so now I wanted share something new instant approved and do follow article site

  2. Your article is too much effective specially for me. I was searching about it. Now my problem is solved. Thanks for sharing your valuable experience.

  3. I was really starting to feel hopeless when I found your post. Thank you so much for helping me resolve my issue.

  4. very nice article. thanks for sharing such kinds if article.

  5. I was looking for something like that. Thanks for sharing such a helpful article. Now I will try to apply this idea in my blog.

Emoticons Smileys for Blogger Comments
Show Emoticons >>


If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.