How To Add Static Facebook Pop Out Like Box in Sidebar (floting) 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 Static Twitter Follow me 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.

Here  are 2 Simple Steps To Add This 

Step 1:-Go to Blogger Dashboard < Design tab > Edit Html

Search for </head> tag

Add below line of code Before </head> tag

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

Step 2:-And Then come to Blogger Dashboard < Design tab > Now click on Add a Gadget then choose HTML/JavaScript

And Now put The Following Code in It 

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});

/*]]>*/

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvy5D3_v6ERb_LT6qfTTDHQbwPjpNNE7F59LVvSnAU2g_x_WOAJ0G_euWMHpUnw2VdBY_SqhIiJy5CaoDqx7QXTT0m7Yaj4yMZISULsJMdkaIioFd82wLnGnWJWOsheX_VD9CqBQvxv71k/s150/w2b_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: 7px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: gray;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%3A%2F%2Fwww.facebook.com%2FVIKASH.BLOGS&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><a href="http://www.1vikash.blogspot.com">1vikash.blogspot</a></span>

    </div>

</div>

NOTE:-REMOVE RED LIGHTED "VIKASH.BLOGS" WITH YOUR PAGE NAME

AND THE SAVE AND ENJOY

HIT LIKE OR SUBSCRIBE IF YOU LIKE THIS POST

   

Any problem then pls comment below