Facebook Pop Out Like Box For Blogger

 Facebook Pop Out Like Box For Blogger 

Facebook pop out like box is very cool widget with hover effect.When mouse over the badge with like box is visible by Sliding to Left.

Demo

To make Facebook pop out like box for blogger Follow some quick steps.

• Go to Blogger Dashboard < Design tab > Edit Html
• Search for </head> tag
• Add below code Before </head> tag

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

After Adding the above code Save Template.

Now We Have To Add Widget Code

• Go to Blogger Dashboard < Design tab >Add a gadget.
• Now Add Html/Javascript.
• And Paste Following Code There And Save 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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%2Ffacebook.com%2FFacebook Page Username&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://lordhtml.blogspot.com">by Lord HTML</a></span>
    </div>
</div>

If You Liked It! Then + One Us.
FAQ

Q-1How To Find Facebook Page Username?
Ans.

• Go To Facebook Page.
• Now See the link it should look like this-

www.facebook.com/yourblog

Here, www.facebook.com/Facebook Page Username

Its Means S2freeblog Is Username Of This Page.