How to add Floating facebook like box in blogger?

Today I share the widget of blogger.Here is Floating Fb Like box.This widget is best for web/blog because social media is most important to promote your blog.customize this widget e.g You Can Chang it's Position.This widget Make your blog more Beautiful.Maybe you Like this post.If you want to adding this widget in blogger.please follow these steps.See pic Example of  Floatind facebook like box.

How to Add Floating Facebook Like box to blog?

Follow steps and add this widget. 

• Go to Blogger > Layout > Add a Gadget > Select HTML/JavaScript Gadget
• Add an HTML/JavaScript Widget and paste below codes in Gadget 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/AVvXsEhabJLoBhF86UkcKsatrZpbgJsbMhbVYOpCKr05CNl2iJ1uVr9LPphuS678WS6drDZBseC_wZHfvNTuMp1bD9uHP7gmtOeN2EetTudylxOeNNKoIjP810Wmdp5_Vuoame-sgymfjdMaeTNe/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%2FMr.FarhanKayani&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.

After adding above code now find this tag </head> (use:Ctrl =f)  in your Template >> HTML >> Proceed and Paste the below codes just  above/before the </head> tag.

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

 Changing Mr.FarhanKayani with your Facebook's page user name and  float:right, if you want this Fb like box   appear at left side then change the property right to left in e.g float:left

Post by :Farhan Kayani