Add Static Facebook Pop Out Like Box With Smooth Jquery Hover Effect

Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect for blogger, this is another cool widget just like a fb like Badge, but here i added like box with simple Jquery hover Effect. You See a static facebook badge at right of your Page and when mouse over the badge with like box is visible by Sliding to Left.

Caution : Please backup your template (Download Full Template) Before making any changes.

Stap 1:

i. Log into your blogger account and go to dashboard > design > edit HTML

ii. And find the following code </head>

iii. Copy this code and past it before </head>

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

like,









iv. Save Template



Stap 2:

i. Go to dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy this code and past in HTML/javascript

<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/AVvXsEgnUx7alO3akMTWwUuJtNiONm2Im7fUJ0gxYeuFZeOIBMd73_EYWBNpAU6exMKFkCMEkeUSlfnXCVsaLOcYv78xDkpm_gGZPxEHTiPZq0cKkAnX36koBgFwo0BMuyFwAm-j1Y9pjUZvbDf4/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=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://music2radio.blogspot.com/2011/11/add-static-facebook-pop-out-like-box.html">Tutorial Here</a></span></div></div>

Nota: Just change "URL PAGE ANDA"


iii. Save

EnjoY 

If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below. Because, it will be a great support for me.