How to add Facebook Floating Badge on Blog

Recently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For Blogger ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This will help you to increase facebook likes. You just need to put small code to your blogger blog.  

Currently this widget is Only for Bloggeer/Blogspot blogs. We will soon share about WordPress in our next post. Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget For Blogger?

Live Demo

Add Floating Facebook Like Box Widget To Blogger !

1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select the HTML/Javascript .
4. Paste the following code inside it,

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4s7-Vdw2mmzajVmG7qDTfG-4zuNW801YS3rNMensI-heCCA3wAAo82GMQ2foAV71nLWpLHQ4nC62fawGeRzGKqjlEkfkhGMSWNHZUPIp6grQVy4gLQEKbijSvHuLJuEwSwFJPZzElSBY/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%2FiSainiDK&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_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></span>
     </div>
 </div>

5. Click on Save button and done !

Note:-

Replace iSainiDK With Your Facebook Page URL or User name.

What’s Next !

Visit  your Blog to see it floating facebook like box at the right side of your webpage. I hope this widget surely helps you in increasing number of your Facebook Likes. The widget code is customized and improved by OfficialDeepakSaini.