How to add floating facebook likebox for blogger

Facebook like boxes are more popular among bloggers.Most of us want to  grab more likes for our Facebook pages. Like box can be added as a widget in your sidebar and we already know how to add fb like box to sidebar but I'm giving you a cool feature that fb like box may float on your pages' right side and it will pop up when users mouse hover on it.It's seen like below.

How to add floating fb like box- 4 steps

 1.Log in to blogger,go to template layout,click add gadget 

2.Open html/javascript link in popup window. 

3.Copy following code and paste it inside the html/javascript box then save it. 

Remember: Replace your facebook page user name with the yellow highlighted text.

<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/AVvXsEjS4MKY212ASU8nv_9xLypfHExKitcyWnU4_RmU2UnrvX8Hk5wIAdbbBNYuGEqi8VzGEZtf1TpJu2W1hJoQmtwtAurJpvg4EUEodPt1omLGD5jgAgTtpBDnh_Qbpt50HB8Qp27fKpYZN2al/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%2Ftechgozip&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.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

 Remember:You can change position,height,width by editing float: right;height: 270px;padding: 0 5px 0 46px;width: 245px values

4.One more step,go to template and click edit html you will see tag on the top since floating box need jquery script to run so we need to add following piece of code just below head tag in your template.

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

Get this cool floating fb box now and share this post with your friends.

Having problem?  Ask a question me any time!