How To Add Smooth JQuery Facebook Like Box to Blogger

How To Add Smooth Jquery Facebook Like Box to Blogger

This is a Facebook like box with j query smooth
hover effect. This will help you to make your
blog attractive. Follow below steps to
add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates”

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

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

<script type='text/javascript'>

jQuery(document).ready (

function(){jQuery(&quot;#facebook_right&quot;).hover(function(){
 jQuery(this).stop(true,false).animate({right: 0}, 500); },

function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -249}, 500); }); 

});

</script>

5. Now save the template.

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below code.

<style>
img, a { border: 0; }#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:245px;height: 310px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 290px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: 70px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
</style><div id="on"><div id="facebook_right" style="top: 30%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfHS_7GY8gPujtLAtkzEQ84c1SNVyLfyMPCUBGGRuYsqZLdcWeyDWFxB8vczATDevRQGFEqjroDjcG_eYu64YGKJNv_pCyw_ggkYcNa5_nm0aUzQOBokiXV_3A02vDaMG36RnnRUPHd1yl/s1600/FB.png" />

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Trix%2F110888928990749&amp;
width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true">
</iframe>

<a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://www.bloggertrix.com/2012/05/how-to-add-smooth-jquery-facebook-like.html"> Get This Gadget</a></div></div></div>

Now you have to replace red color code with your facebook like box code.
To make your own Facebook like box code to click here

You will get box like below.
you have to change your fan page URL with like below i mentioned.

After you can click create code button, you will get popup will like below.

You have to select iFrame and copy that code and replace with red color code that i given.
Now you can save the 'HTML/Javascript'.
You are done. if you have any problem, comment below.