Add Static Facebook Pop Out Like Box With Smooth JQuery Hover

Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website
normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.


Step 1: Adding Static Facebook Pop Out Like Box Widget To Blogger layout.
Now let's start adding it...

Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Layout>Add a Gadget.

Step 3: After click on Add a Gadget link A pop-up box will open now

Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.

Step 4: Select 'HTML/Javascript' and add the one of code given below.

<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/AVvXsEgaC9BhUg9-oiOQp5VAnvzBduUI15hsxz-TJIU9bqYyKbz-zDFHV_OW_2Xr1b_0X_8eHTuYXQmu5JAmpD5b39W7pz45sFfR9hO86v1B36HOIfKzh_qudYiu0izHssi_rMypb8jD3qOeJm-T/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://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" title="My Blog Widgets"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Official.MyBlogWidgets&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>

Step 5: Now Click On Save 'JavaScript' You are done.

Step 6: Customize Field Replace "https://www.facebook.com/Official.MyBlogWidgets" with your own facebook page name (Not your own profile name)

Step 7: Note: If your template already have a jquery do not put again, just copy after it

Html from above a few things could be replaced.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>