Add Static Facebook Pop Out LIKE Box with Smooth Jquery Hover Effect

Today I will tell you how to add facebook pop out LIKE BOX with slide effect for blogger. It's very simple and easy if you follow my steps. This pop out box slides on the right side of your blog. You can see demo in this blog itself.

How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website.

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)


a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag ( using ctrl+f)
c. Add below line of code Before </head> tag

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

And now click Save Template 

Step 2: Adding Widget Code ( Html code )
it's Simple

a.Layout or page elements –>> Add a gadget->> Html/javascript.

b.Add a below code in the Html/javascipt box.

Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )

<a href="http://surfgetdownload.blogspot.in" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEgxv_BsHFBmEqfKfBRqtERxwhsMiRL3XEQToNAdjejEk4pPxKuG4mzmfxniPoAmN9wjcYg7KmGoELPpr8rfp_YpcvBBFj9MN2E2QLLcx15Jdy_vJP5Sb0vfrmQHm3uva3czkQLHNhJA5P7M/s1600/facebookbadge.png") 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://www.facebook.com/pages/Download-dot-Com/361631490617092&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>By <a href="http://surfgetdownload.blogspot.in/">TechnoClouds</a> / <a href="http://surfgetdownload.blogspot.com/2013/03/today-i-will-tell-how-to-add-facebook.html">+Get This!</a></span></div></div>

And now click Save  

Note:-Don’t forget to change Red colour keywords.