5 Jan 2013

Add Facebook Folating Like Box



Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
 

  • Go to Blogger Dashboard < Design tab > Edit Html 
  • Search for </head> tag ( using Ctrl+f)
  • Add below line of code Before </head> tag

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Layout or page elements –>> Add a gadget->> Html/java script
Add a below code in the Html/java scipt box.
Replace my facebook pageURL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )


 <style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9z4o4glkyRs2vn2xwO9eqne7Nt6FESkBriuXBS3-JcSXuBXT4v8qUQp2DwD8HyeBSqN4mOjiDwJBXu9o8FdbnDbktPEkHhMn0F4-zj7uc4SWWj6wZSZevwH2RZDU0_K4NQ_hxvKvFRwI/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhuzaifakz2012&amp;&amp;width=200&amp;height=348&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe><span>By <a href="http://huzaifakz.blogspot.com/2013/01/add-facebook-folating-like-box.html">Blogspot tutorial</a> / <a href="http://huzaifakz.blogspot.com/2013/01/add-facebook-folating-like-box.html">+Get This!</a></span></div></div>

</div>


 Remove the huzaifakz2012 and replace your Facebook page user name.


 And now click Save


NOTE: IF U BLOGGERUSER SO USE THIS