How to Add Floating Facebook Like Box in Blogspot

Today Facebook like box is a great way to promote blog or web. It increases visitors in a great deal and helps a lot to inform/advertise the new published posts to the visitors. In a word, it works just a strong advertisement. In my resent post, I discussed on how to create Facebook like page. I also published a post how to add Facebook like page in blogger. But, my today's post is something different from that post. That post was for static like box. But today's post is about floating like box. The main feature of it is it will remain hidden on the right side of the screen and it will show only the Facebook icon. When a visitors place the cursor on the icon, the full box will come on the screen. In a word, it is amazing, wonderful and attractive ones. To create it is very easy. Just two minutes will needed. Just follow a simple tutorial:

► At first log in to your blogger account.
► Then go to Layout.
► Click on add a gadget.
► Then click on HTML/JavaScript.
► Then copy and paste the following code.
► At last, click on save button.

<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("http://techteachingbd.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/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> <iframesrc="http://www.facebook.com/plugins/likebox.phphref=http%3A%2F%2Ffacebook.com%2FIT Training&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>Widget by :<a href="http://www.techteachingbd.blogspot.com"> it training</a></span> </div> </div>­­­­­­­­­­­­­­­

Note: You have to do a simple work! Just replace IT Training with your face book like page URL. If you haven't yet created Facebook like page, create it now just within 2 minutes!

Related Links:

1. 5 Benefits of Putting Link in Blogger Comments.
2. Sharing Your Blog Post on Google Plus.
3. 3 Benefits of sharing Blogger Posts in Google+.
4. How to Use Labels in Blogger Posts.
5. Finding And Redirecting Broken Link.
6. How to Use Jump Break in Blogger.
7. How to Add Categories Section Using Labels.
8. How to add Google+followers in blogger.
9. How to make Google+badge in blogger.

10. How to create a Google+account.
11. How to Add Facebook Like Box in Blogspot.
12. Creating a Facebook Fan page for blog.