How To Add Floating Facebook Like Box on Blogger

This tutorial will show you how to add a very beautiful and customized floating facebook like box to your blogger blog. The steps are easy to understand, carefully follow them to add this feature to your blog.

* Login to your blogger dashboard
* Click Template/Theme -> Edit Html
* Search for </head> tag and place the below code immediately above it

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

* Save Template

* Now back on your blogger dashboard, click Layout
* Go to where you want to place this widget and clcik Add a Gadget -> Html/Javascipt
* Place the below code in the box

  <script type="text/javascript"> /*<![CDATA[*/ jQuery
(document).ready(function() {jQuery
(".abtlikebox").hover(function() {jQuery(this).stop
().animate({right: "0"}, "medium");}, function() {jQuery
(this).stop().animate({right: "-250"}, "medium");},
500);}); /*]]>*/ </script> <style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-
mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/
LDamrUnMJJc/s320/fb1-right.png") 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%;} .abtlikebox
div{ padding: 0; margin-right:-8px; border:4px solid
 #3b5998; background:#fafafa;} .abtlikebox span
{bottom: 4px;font: 8px "lucida
grande",tahoma,verdana,arial,sans-serif;position:
absolute;right: 6px;text-align: right;z-index:
99999;} .abtlikebox span a{color: gray;text-
decoration:none;} .abtlikebox span a:hover{text-
decoration:underline;} } </style> <div class="abtlikebox"
style="">     <div>     <iframe src="http://
www.facebook.com/plugins/likebox.php?href=http%3A
%2F%2Ffacebook.com
%2F bbloggertutorials&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;bor
der_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270"
scrolling="no" frameborder="0" scrolling="no"
style="border: white; overflow: hidden; height: 270px;
width: 245px;background:#fafafa;"></
iframe><span>Widget by :<a href="http://
www.bestutorialz.blogspot.com">
Bestutorialz</a></span>     </div> </div>

* Replace “Bestutorialz” with your facebook page address
* Click Save


Now you have successfully added a beautifully customized floating facebook like box to your blogger blog. Please come back for more useful tutorials.