How to Add Floating Facebook Like Box to Add a Blog

 Hi Friends! To day we know how to add floating Facebook like box to add blog. I know this already seen others blogs but here i share again for beginners. This widget normally continues squeezed to the right edge of the blog. although when one hovers or flits around it, it seems prominent and that’s why it is called floating Facebook Like carton. Its place can be altered to the left edge of the blog’s body. You may hold it as you deem it suitable to your blog’s sheet appearance. It can be more precious for you if you've a good number of Facebook likes for your blog.

Read :  Add Facebook like button in every Blogger Post

This widget is shared with you with the purpose of conveying it to more users for benefiting as a blogger. This widget is built within JavaScript, CSS, HTML and J Query. Now Start How to Add Floating Facebook Like Box to Add a Blog.

Read :  How to Add Your Blog at Facebook

Follow these simple steps below and add this widget.

Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget

Add an HTML/JavaScript Widget and paste below inside that

 <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/AVvXsEgjenuOoxe62etjGHuTkSjDvKALHw-w9v3YYbMinpmejC2z4TuzTCnhZsrR_qvcaEldOzFqjeh8pnXGzBWQGSu2kQ6L4Z0AZOHP0KlzOa4_6khjl8gBn9VzCCQCEVGdAs1lH6ZD0U-tLkiK/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%2Fmakemoney&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></div></div>
Save the widget and now the initial part has done.

After adding above code you will find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code:

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

Save the template and you are done. Now you'll find a new Facebook like box shrinking on the right side of your blog.

Customization:

There are two options to customize this widget; the first one is changing makemoney with your Facebook page user name

The second is float:right. However, if you want this widget to appear at left side then change the property right to left in float:right;.