Add Static Facebook Pop Out Like Box with JQuery New

Here I am providing tutorial about How to Add Static Facebook Pop Out Like Box with JQuery widget for blogger website. This static facebook pop out like box widget for your free space on left or right side of your website. This widget show your facebook fan page on the box to get more likes on facebook page. Here I give you simple jquery code with hover effect. When anyone move their mouse on the facebook plate than your facebook fan page visible by sliding to the left.

Static Facebook Pop Out Like Box with JQuery

Follow below steps to add Static Facebook Pop Out Like Box with JQuery:

Step 1

Login into your blogger account. Go to your Blogger Dashboard and click on layout button from left panel. Click on Add a gadget Link as shown in below picture.

Step 2

When you click on Add a Gadget link a popup box will open with all gadgets list, Choose HTML/JavaScript from gadgets. Like below picture.

Step 3

Now copy and paste below code into HTML/JavaScript box.

Style 1

Style 2

JQuery Code :- 

Paste this code in your website

-------------------------------------------------------------------------------------------------------------

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<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/AVvXsEggg1SyWKPUFeEmiKRTw_ZEOcwC5jvs0CFoE0tE-nWrzFCgln2rscwmjYN4ZfP4MAlAZe2SsI3BNklDfXyFAhmboLwAsycqAin10H6Er6oI09JDZXg_GwVaio3eQJ0U2z8iT18Cdq0L9G_-/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><a href="http://www-------.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/haakblog" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.------------com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/haakblog" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.------------.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/haakblog" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Awesomechoice&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></div></div>

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Note :- Write your website name for red placeChange The page name and your website page name