So today i have write a tutorial on how to add popup like box with timer on blogger blog. You can set it for how long the widget/Plugin must display before disappearing automatically. It also includes a close option, we just trying to add some more features into code and update it as soon as possible. its a beta version please post your review below in the comment section. if you see any bug let us know we will try to fix that as soon as possible.
The plugin depends on jQuery, so be sure to include the library. Any recent jQuery version will do. We include plug-in file very similar to jQuery library file in the <head> of the document.
1. Go to your blogger dashboard>> Template>> Edit Template
2. and add the following jquery link before closing </head> or after opening <head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
Okay, we've completed adding JQuery now but we'll add a couple of styles to our Facebook Popup box.
3. again find the following code in your template.
]]></b:skin>
4. and paste the below code before/above closing b:skin tag.
/*css for fbpopup*/
#fbpopupdata {
background-color: none;
position:absolute;
z-index: 9999;
display: none;
padding: 0;
border: 10px solid #446c95;
-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: 420px;
height: 300;
overflow: auto;
left:50% !important;
margin-left:-220px;
margin-top:auto;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
}#fbpopupdata span {
font-size: 12px !important;
font-weight: normal !important;
}#fbpopupdata h1 {
background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6kExHL_oBVyV40K9Xi8gHQXuT5dwtNc7tEymqIcMTwea9EsFmJC704Cp8-o03RMTRn2Dv7_8qktVzxLQtvjGIZ3dMFly2GlbV0QHJnU0e6vJ9olt4UhkMG3zCtARvlAaDL9qU-WqDMc/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
border: 0px solid #3b5998 !important;
color: #FFF !important;
font-size: 20px !important;
font-weight: 700 !important;
padding: 5px !important;
margin: 0 0 10px 0 !important;
font-family: arial !important;
overflow: hidden !important;
}.fbpopupdatadata {
font-size: 12px !important;
font-weight: normal !important;
height: 275px !important;
padding: 1px !important;
background: #fff !important;
border-bottom: 0px solid #ddd;
overflow: show !important;
}#fbpopupdatafooter {
text-align: right;
font-size:12px;
background: #F2F2F2 !important;
height: auto !important;
padding: 10px !important;
overflow: hidden !important;
}#fbpopupdatafooter p {
text-align: right;
font-size:12px;
}#fbpopupdataclose {
float: right;
background-color: #446c95 !important;
border: 0px solid #ccc !important;
color: #fff !important;
font-weight: normal !important;
padding: 5px 35px !important;
text-decoration: none !important;
display: inline-block !important;
font-family: arial !important;
outline: none !important;
font-size: 12px !important;
margin: 0px !important;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}
5. and last and final step, just paste the below before closing your </body> tag.
<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type='text/javascript'>
jQuery(document).ready(function() {
function fbpopupdatafunc() {
var sec = 60
var timer = setInterval(function() {
$("#fbpopupdatafooter span").text(sec--);
if (sec == 0) {
$("#fbpopupdata").fadeOut("slow");
clearInterval(timer);
}
},1000);
var fbpopupdatawindow = jQuery(window).height();
var fbpopupdatadiv = jQuery("#fbpopupdata").height();
var fbpopupdatatop = jQuery(window).scrollTop()+50;
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});}
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc)
//alert(jQuery.cookie('sreqshown'));
//var fbpopupdataww = jQuery(window).width();
//var fbpopupdatawww = jQuery("#fbpopupdata").width();
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2;
var fbpopupdataleft = 500;
//var fbpopupdatawindow = jQuery(window).height();
//var fbpopupdatadiv = jQuery("#fbpopupdata").height();
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2;
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left: fbpopupdataleft}, 0).show();
jQuery("#fbpopupdataclose").click(function() {
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});</script>
<div id="fbpopupdata">
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="www.myblogger-tricks.com" rel="nofollow"
>Get Widget</a></h1>
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/mybloggerstricks&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End –>
Note:- Please change highlighted mybloggerstricks in yellow with your own facebook username..
Okay we've done it! Hope you enjoyed the tutorial and was helpful. The above code can be modified and enhanced as per your requirements.
If the content on this website somehow helped you to learn something new, please let others know about it by sharing it on your twitter page or on your Facebook page with your friends.
