Floating Facebook Like Box Widget for Blogger!

If your are blogger or website owner then you know the importance of having Facebook page for your site. Actually Facebook can be a great source of traffics for your site. So, you should have a Facebook fan page for your site. But having Facebook page is not enough, the page also has to have good numbers of likes. There are several way you can collect likes. But the easiest way is to place the Facebook Like box on your site. And in this post I'm gonna share an beautiful Floating Facebook Like Box, which will help you to collect likes for your Facebook Page.

Earlier I had shared several style of Facebook Like Box for blogger, two of them is presented in the above list. Beside that you can also use fixed Facebook Like box on your site, but one of the disadvantage of this style is, it consume the valuable space. In such case Floating Facebook Like Box can be best option to choose. Because it require very small apace and you can add this widget in your site by using a simple code.Only the Facebook logo will be shown on your site, the full like box will open when you place the cursor on it. Let's have a look at the like box.

If you are blogging on blogger platform then you need to add a Jquery code inside the head section of your blog. If you blog is already included Jquery code then skip this step, if your blog don't have Jquery code included then add it by following the steps below.

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

First Sign into your Blogger Account and go to Dashboard.
Then click on Template and then click on Edit HTML button. You will land on the HTML page.

Here in the HTML page find <head> tag and Paste the following Jquery code just Below it

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

Finally click on Save Template button.

Adding Floating Facebook Like Box to Blogger:

Now click on the Layout option.
Then click on any Add a Gadget link.
Then from the Gadgets list choose HTML/JavaScript.
Now Paste the following code inside the HTM/JavaScript content box.

 <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/AVvXsEi3-tmXsKDfzVXbXhQNR4zyB0SPwH8pWAoQUjotNYPmskBHIu3DpnrTdrpzAlmyk56gwddlB7yfaHQxfehQwbPa0Oc3DAv6a3sCI-R8eDMr73LqoViBRiwGBDafo3VFeObDz2mdxuKOh-SS/s150/w2b_facebookbadge.pn") 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: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}  
 .w2bslikebox span a{color: #808080;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%3A%2F%2Ffacebook.com%2Fittimesbd&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.ittimesbd.com/2013/12/floating-facebook-like-box-widget-for-blog.html">iTTimesbd.com</a></span></div></div>