How to add facebook widget to blogger

As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:







Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)

1. Go to Design / Templates  >>  Edit Templates  >>  Tick the expand widget templates box
2. Find the tag </head>  (Press Ctrl + F to find it)
3. Place this code right above the tag </head>

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

4. SAVE the templates

Step 2: Add Facebook widget code to blogger

1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
2. Place the code below into the content box

<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/AVvXsEhCbZhol5YlIBvjhG6iKUCLcALHN6P1F5I8cOv5M2MKbnu3WMMJ2g84VDt9cgda_Ngpld3gmbHIODQQdi77jv313YN9oE4je-FKFDRCocf7Egi-_DgBrakxhmixq8jlaj-V_SOMIcp4CO02/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%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&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.blogonblogspot.com/">+Gadget</a></span></div></div>

3. SAVE