Sliding/Floating Facebook Like Box for Blogger and Websites

Facebook Like floating/sliding side box for blogger blogs and websites
You can add a stylish Facebook Like floating box to right of your Blogger blog. This box hides itself and only shows a button. The box appears, when a visitor hovers the mouse pointer over it. To add this box to your blog, you need to edit HTML of its template. If you can't edit, then read this article before editing the template. It will teach you, how to edit Blogger templates with extreme ease. Then edit and add the below script code just before </head> tag in HTML source of your blog's template. Remember!! If you have already added any version of the below code before, then you don't need to add this again. Skip this step, if it is already added. Skip also if you are not sure, either it is added or not. Then follow the step two and check your blog that it shows the box or not. If it doesn't show, then follow this step.

Copy and paste the below code before </head> tag:

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

Then go to Layout of your blog in Blogger Dashboard and add a new gadget. Select HTML/Java Script and add a new gadget with the below code. Don't forget to write your Facebook Page user name in the highlighted place:

<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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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=http%3A%2F%2Ffacebook.com%2FTerminusSearch&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>


Add the gadget and save the arrangement. You are all done. Visit your blog to see it either it is added or not. If you can't add this or if you face any difficulty, ask me by commenting on this post. Thank you!

Labels: ,