facebook like button

Step 1: Adding Static Facebook Pop Out Like Box Widget To Blogger layout.

Now let's start adding it...

Step 2. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; } 
#on { visibility: visible; } 
#off { visibility: hidden; } 
#facebook_div { width: 196px; 
height: 340px; 
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"> 
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); }); 
});
</script> <br /> <div id="on"> <div id="facebook_right" style="top: 10%;"> 
<div id="facebook_div"> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYHYsGh8TlhBv4djai46rgt-AwcuExXq_t1q8dtSl265BV-AQk5Txyp4gAKmbnRsWCZG2VGm6n9q-OVWv4_8X6G2cqOz_ckZ9xq8NsoUN7vQKZ4gAkq3ksBP6uJraRl6UUv6aJ4JPaJ4l0/s1600/NBTfacebook_right.png" /> 
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/onlinemakingphoto&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none; 
height: 346px; 
overflow: hidden; 
width: 200px;">
</iframe> 
</div> 
</div></div>