How to Add Floating Like Box in Blogger

Dear friends,
As you know many tutorials on Google gives you how to add floating Facebook like button. But here we are introducing new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.
Instructions:

1: Adding Jquery Plugin:

Sign in to Blogger.
Go to your Dashboard. Then Dashboard > Template > Edit HTML > Proceed.
Add this code written below the closing </head> tag in your HTML Editor.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>                                                                         

Ignore thies step if you have added Jyquery plugin to your blog.

Adding Widget Code:

- Go to Design>Add a Gadget>HTML/JavaScript.

- Add This code to HTML/JavaScript Widget.

<script type="text/javascript">

//<!--$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});//-->

</script><style type="text/css">

.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5_bbMoieEAQGy92xVLaXkYSbTjEXVzlicQ_YIPpf7WCoylrJXvmhO-3ua0v999YGPsHlmfCsfdgmSFf78A1UT9zmF2Q_s0sFgztZT0hi9pzeBES2lcyu8nyltSCYXQQ2ZvjyiWFJcLQ/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class ="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBook.IEEE&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://ieee-books.blogspot.com/2012/04/how-to-add-floating-like-box-in-blogger.html" target="_blank">+Get Your Widget!</a></span></div></div>

Replace Some Code:

http%3A%2F%2Fwww.facebook.com%2FBooks.IEEE, -->with your Facebook Fanpage URL

Posted in: