Facebook Pop-Out Like Box for Blogger

How to Add A Static Pop Out Like Box with smooth J query hover effect in Blogger?

1-Go to Blogger Dashboard < Design tab > Edit Html
2- Search for tag.
3- Add the below code Before tag

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

4-Now Save Template
Now,
Go to blogger Dashboard and click on layout
then Add a Gadget > Html/java script.

Add below code in the Html/java scipt box.

<a href="www.lilipool.com" target="_blank" title="Blogger Widgets"><img src="" 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/AVvXsEgO3f2RfqIUgKIprujnHFFui-oCC_Zt0UFSYc5wQ5KI-jMSSAaYxo8pU5l-ysrXfYHmk49_KJoJ4w8htq99AeRGCzzYK_-s27-ZVu7WZOvCenWzAsKBhH2RCMejGAzeZRmYDJZyC_3q9-YK/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=https://www.facebook.com/pages/Lilipoolcom/432836580077874&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://tricksplanet.lilipool.com ">TricksPlanet</a> / <a href="http://tricksplanet.lilipool.com/2012/07/how-to-add-static-pop-out-like-box-with.html ">+Get This!</a></span></div></div>


</div>

Change my facebook page link in red with your facebook page link.
Now click on save and thats all..If you need any asistance then comment in the comment box.

Posted in: Blog Tricks,Facebook,Internet Tricks