Add Stylish Floating Facebook Like Box Widget in Blogger - IT Roshni

Today i will show you, How to add Floating Facebook like box widget in blogger with a beautiful view, wonderful and attractive format, where the Facebook like box is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog, follow my simple steps:

FOLLOW THESE STEPS:-

1. Go to Blogger Dashboard --> Template

2. Please! download a backup of your template

3. Now click on Edit HTML

4. Use Ctrl+F to find </head>

5. Then copy and paste just before it, this code:

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

6. Save your template.

7. Now go to Layout--> click on "Add a gadget".

8. Select "html/java script" and add the code given below and click save.

<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/AVvXsEg2VMEUkNDg0b4lP7nzpOmOog9cdn9XKz16aBwnt9tDwx6uBwILttMX5yuBuUkjIxdw2thKkwjc1mwfXksGcLazr4c1DFy4vbrmRfiXY3RtZYDllVvjxjmzW0kIxQqjTGlVoIfTpxbF_lY/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 275px;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%2Fitroshniblog&amp;width=245&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;
connections=12&amp;stream=false&amp;header=false&amp;height=275" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow:
hidden; height: 275px;
width: 245px;
background:#fafafa;"></iframe><span>Widget by :
<a href="http://www.itroshni.blogspot.com"> IT Roshni </a></span> </div> </div>

Note: 

Replace itroshniblog with your Facebook page user name. Just copy and paste user name,
Do not copy & paste complete url of facebook page.

Example: https://www.facebook.com/itroshniblog

Now you can see the result and be happy.