How To put Scrolling/Floating Facebook Like Button Widget For A Blog/Blogspot In A Easy Way

Floating Facebook Like Button Widget 

Hi guys today i"ll show you how to put floating widget for your blog.
It is great widget for getting more  viewer attraction toward your blog and get your fans up to dates on facebook .It is a step by step easy guide.
So follow all step carefully.

Step 1:

Go to Your Blogger ->Layout ->Gadget ->Html/javaScript

Step 2:

Now Copy The Below Script and Paste it into a Gadget

-------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNn55fTc_pVgHklkN7GD6Uq_J4gRyHu8ZhRlmC1u3_DmGc11GPFQstsLiRs8moAh4Mn8j2uh9Eh4yE6xqd6bEmHAoAsvxqeDTz942oNXn0teECjVdRxR0mNKyGACVZBSpA6F-6lZvARmA/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F20four7updates&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://20four7updates.blogspot.com/2013/07/how-to-put-scrollingfloating-facebook.html" target="_blank">Get This!</a></span></div></div>

---------------------------------------------------------------------------------------------------------------------

Step 3:

Now change the username in a code to show your facebook page

Scroll down the code in html/javascript and find 20four7updates and replace it with your facebook username.If you don't know how to change username or find username so see step 5.

step 4:

Now go to template Backup/Restore your template(if you want in case of any error)
then click on edit HTML and find </head> (for that click ctrl+f to find it).And copy the below code and past before/above </head>

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

Note:If you have already this code then leave Step

Step 5:(optional)

If you dont know how to find username of your facebook page,then go to facebook open your      facebook page and in url copy your username as shown in a below picture.

Please give us your feedback.

Now its your turn!