Add Stylish Facebook Pop Up Like Box With Timer To Blogger


  1. Go to blogger dashboard -> Layout -> Add Gadget -> HTML/JavaScript
  2. Paste the following code into the box
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<br />

<!--NBL Facebook POPUP LikeBox With Timer Code Start -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<style type="text/css">
#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbmoSZp_BxSy_7qJl5iHhZogCnGYecwVXLwfK5nFsMwOb4NEajjONEc9L1N1v4BZidDfoFicLI5OC1_iuMdLVAMnU7Z5YsqqGMwZq8AfML_1U7OQiwbPQZrog-k0QS58CQeC_Prpz0R8o/s1600/NBL.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>
<script type="text/javascript">
jQuery(document).ready(function() {
function exepopupfunc() {
var sec = 10
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup">
<h1>
Join Us On Facebook</h1>
<div class="exepopupdata">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://facebook.com/plugins/likebox.php?href=https://www.facebook.com/
it tricks collection?ref=hl&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp; border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250"  style="border: none; height: 250px; overflow: hidden; width: 400px;"></iframe></div>
<div id="exepopupfooter">
Please Wait <span>10</span> Seconds...!!!<a href="http://www.blogger.com/blogger.g?blogID=907945876007909603#" id="exepopupclose" onclick="return false;">Skip</a></div>
</div>
<!--NBL Facebook POPUP LikeBox With Timer Code End -->
<span><span></span></span> 
     3. Replace it tricks collection with your facebook page username
     4. You can change the timer of this widget. Find 10 and replace it as you want!
     5. Save your widget
          Widget Installed 

Final Words

This widget can be controlled by the visitor of your site by pressing skip button.This helps you to get more likes on your facebook fan page. Be with us for more blogger widgets. 

No comments:

Post a Comment

Ads Inside Post