How to Add Popup Facebook Like Box in Blogger

how to add facebook popup fan box

adding facebook fan box is very 
important part it help visitor to 
like your fan page so that visitor 
get up to dates of your blog.

step1:First login to your blogger accountand then go to layout and add a gadget of html and javascript.now copy and paste given code there

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style> #fbox-background { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; } #fbox-close { width: 100%; height: 100%; } #fbox-display { background: #eaeaea; border: 5px solid #828282; width: 340px; height: 230px; position: absolute; top: 32%; left: 37%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #fbox-button { float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; } #fbox-button:before { content: "CLOSE"; padding: 5px 8px; background: #828282; color: #eaeaea; font-weight: bold; font-size: 10px; font-family: Tahoma; } #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover { color: #aaaaaa; font-size: 9px; text-decoration: none; text-align: center; padding: 5px; } </style> <script type="text/javascript"> // </script> <script type="text/javascript"> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(5000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id="fbox-background"> <div id="fbox-close"> </div><div id="fbox-display"> <div id="fbox-button"> </div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php? href=YOUR FACEBOOK PAGE URL&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false" style="border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;"></iframe> <div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div></div></div>
Step2: Replace "YOUR FACEBOOK PAGE URL" with your blogger blog facebook fans page URL. Now Save the Gadget and you got it.

NOTE:  If you want to force this popup window only on Home page.

Go to Template >> Edit HTML. Now paste the following piece of code just above the "</body>" tag and Save Template and
you had done it Enjoy.....!