How To Add facebook floating button on blogspot blogger

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 code and Paste it into a Html/javaScript 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/AVvXsEhbXqctKjD8L7jTFk0Zt4CTSs1wGzZFHJYqxIYFlizW_QgBeZ_SbFsFHNYZo274FbGKjpwkAL_ygqNl7udXWFlQUk5eXPm6ET7et4LT5PbEu07jMnn-n8T-92CgHbB_z7tnEfpAXXT-UsE/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&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&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 username 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'/>

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!