Facebook Popup is a great tricks for increase fan in Facebook page. When more visitor is like your Facebook fan page your blog traffic increase. Here may be some steps for nice and light weight popup.
code in Edit HTML page by type CTRL+F
First Step - Log in into Blogger Dashboard
Second Step - Go to Template than click on edit HTML button. Follow the image.
Third Step - Find
</body>
code in Edit HTML page by type CTRL+F
Fourth Step - Copy and paste below code before
</body>
<style type='text/css'> #onlinecgblogFBpop { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:16px; background:#FEFEFE;font:normal Dosis, Georgia, Serif; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #onlinecgblogFBpop a.onlinecgblogclose { position:absolute; top:-10px; right:-10px; background:#fff; font:bold 16px Arial, Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#000000; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:25px; cursor:pointer; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(window).bind("load", function() { // Animate Top $('#onlinecgblogFBpop').animate({top:"150px"}, 1000); // Widget by www.onlinecg.in $('a.onlinecgblogclose').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='onlinecgblogFBpop'> <center> <b>Don't Forget To Join US Our Community</b></center> <center> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fonlinecgblog&width=300&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/> </center> <a class='onlinecgblogclose' href='#'>×</a> <center style='float:right; margin-right:10px;'> <span style='font-size:xx-small; color:#000; text-decoration:none;'></span> <a href="http://www.onlinecg.in" rel="dofollow" target="_blank" title="blogger tips"></center> </div>