Create Awesome Floating Facebook Like Box For Blogger

 Floating Facebook Like Box Widget is important for every blog. Here's guide for you to Create Awesome Floating Facebook Like Box For Blogger Blog.

As we know Facebook is the biggest social media for sharing latest updates on various purpose. Beside if you've made a blog ,but struggling to get more Facebook likes ? Then for sure it is necessary to use Facebook like box on your blog so that peoples can join your Facebook fan page to get latest updates easily . Today I'm going to show you how to add a floating Facebook like box widget which is very attractive & also helpful to get more likes, The widget 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 comes out .

Steps To Add Floating Facebook Like Box

• Go To Blogger Dashboard - - Click Layout
• Click on Add a Gadget
• Choose HTML/JavaScript 
• Now copy the following code & paste it in the gadget box

<!--BM Floating Facebook Widget START-->
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".BMlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.BMlikebox{background: url("http://2.bp.blogspot.com/-Ux_CnrAfuLQ/U9pS7i25SyI/AAAAAAAAC1U/Mca-gSNbEFQ/s1600/BloggerMates_facebook_widget.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 200px;padding: 0 5px 0 35px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.BMlikebox div{border:none;position:relative;display:block;}
.BMlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.BMlikebox span a{color: #808080;text-decoration:none;}
.BMlikebox span a:hover{text-decoration:underline;}
</style><div class="BMlikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBloggerMates&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.bloggermates.com/" ><img  border="0" src='http://1.bp.blogspot.com/-tyMi1BbHEPY/U9pS7evNDiI/AAAAAAAAC1Q/6BXHzKxl2OA/s1600/BloggerMates.gif' alt="BM Widgets" title="BM Widgets"/></a></span>
</div>
</div>
<!--BM Floating Facebook Widget END-->

After pasting the above code replace BloggerMates  with your own Facebook page username.

Next Step of this Widget

• Go To Blogger - - Template
• Click on Edit HTML
• Now search for the following code

</head>

Now paste the following script just above the </head> section

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

Now save your Template and refresh your Blog , You will see your attractive floating Facebook like box.

If you are still facing problem to do this properly then leave your comment below . I will be happy to assist you .