» » How To Add Smooth JQuery Facebook Like Box to Blogger

A+ A-

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/AVvXsEhh5cXvhFpSogT5ajBZqJPNMTKp87Gi1Pn-ulYiFmdn9Q-cZf1ZhfS_xjJT0qHTTF_TO9Ge-bnEOXGVCKVagndh5ZyeB97avi6ACPzGE58dEzT0_4XMMNAwlMYOq-jZsIsp2YP9qe2UB_EH/s1600/FB.png" />

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkhmer3pop.kh&amp;width&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></iframe>

<a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://www.khmer3pop.blogspot.com/2013/11/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.
Labels:

Share to:

 
Top