How to add a Floating Facebook Like box in Blogger?

How to add a Floating Facebook Like box in Blogger?

There are many tutorial for  How to add a Floating Facebook Like box in Blogger i am also post this tutorial with easy steps . Lets try it .

Live Demo

• Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget
• Add an HTML/JavaScript Widget and paste below inside that

<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/AVvXsEhDD5VP-fq4MFSsbnd4cqXluOPSMhtYTb6rQyyAwPbZdhGCUZ1YVWhTJOTUFwT8wCyC94KL5YyUUpPmsVMyTLjjNg-pDHmtkWooss2c-gP8Q6oxnr5ybpESRAy9fi739iowAqzKwpnrxyEb/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%2Fmahicracks&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div> </div>

Save Gadget and and Now Follow Next Step  .
After adding above code now find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code:

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

Now save It ...

Customization

Replace mahicracks  with your page .
For Float  Change Float Right and Float Left.

You must go here for better knowledge on   latest Facebook Tips Trick, also Rajasthan Tourism India  Great Collection of MSG IN HINDI,  and more about Mahi Crack and Tips