Stylish Facebook like box pop up with timer

Providing updates from facebook is always a great way to engage the visitors on your blog/ website . So it's important to get the attention of your visitors towards your like box. 

 Well guys, Checkout this awesome facebook like box widget with timer which you and your readers will like and get attracted. If you want to add this widget to your blog just follow this simple steps.


1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.

<!-- Facebook POPUP LikeBox With Timer Code Start -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></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/AVvXsEiC11sKIfvgjIl_0Wo4fxSaRyncIsuVVfJvwOCxaSIOMCY92jT19B6HKYQFbgbC_6jmxbWJbGjZHZdpaDtGOeS528wBFmJz8Tmwjcf2nKWTkQSq5DRZTisjkbOk4ZgWA6dgBEFkHzX14IM/s1600/aktechz-fb-lock.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 src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fzgamercity&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>

<div id="exepopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;"></a></div></div>

<!-- Facebook POPUP LikeBox With Timer Code End -->

Customisations

Change red text with your desired time, green text with your slogan and zgameritywith your facebook page  username.

5. Now click on save button.

Have any problem, please comment.

Read More