Add Floating Facebook Like Box On Blogger


Blogger Tutorials : Add Floating Facebook Like Box On Blogger. Today i will show you how to add a nice Facebook like box which float once the mouse hover the Facebook Logo.

Floating Facebook Like Box

First of All :

1. Go to Blogger Dashboard => Template

2. Please! download a copy of your template

3. Now click on Edit HTML

4. Use Ctrl+F to find head>

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

<script src='' type='text/javascript'/>

6. Save your template.

Step 2 :

1. Now go to Layout–> click on “Add a gadget”.
2. 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("") 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=";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=""> BBlogger Tutorials</a></span>     </div> </div>

Note: Replace Blueseodesign with your facebook page URL or user name.


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.