Add Stylish POPUP With Timer And Cookies On Your WebPage

There are many POPUP available over internet that are awesome and have different features that some are useful and some are not useful. SO you have to select the best features with the best design and also have to keep your SEO in mind.

Now if you are displaying your POPUP just after entering then that is bad because user even didn’t know that where he landed so you have to give some time to user to read your blog then give him a chance to subscribe your feed using email on this POPUP. So now have a look on DEMO then garb the code. This POPUP can be control using your user Cookies also.

Features:

1.) JQuery File Added.
2.) JavaScript Codes Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Mobile Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

Header:

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

JQuery/JavaScript:

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

CSS:

<style>
/*----- Email Subscription Popup Box -----*/
#blogger-subbox {
display: none;
background: rgba(0,0,0,0.5);
width: 100%;
height:100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:99999999;
}
#blogger-subbox .popup-box {
padding: 0;
margin: 0 auto;
max-width: 600px;
border-radius: 1px;
border: 2px solid #F5F500;
background: #3A3939 url('https://3.bp.blogspot.com/-7TLWGdsIYRg/VSYZtpMVpgI/AAAAAAAAA7A/eTPibGVJ4Mg/s1600/64.png');
background-repeat: no-repeat;
background-position: 100% 45%;
position:relative;
top:25%;
z-index:0;
}
#blogger-subbox .popup-box .exit-button-subbox {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
margin-top: 2px;
margin-right: -2px;
}
#blogger-subbox .popup-box .exit-button-subbox:before {
content: "X";
padding: 5px 8px;
background: #FFFFFF;
color: #000000;
font-weight: normal;
font-size: 12px;
text-shadow: 0px -1px #000;
font-family: sans-serif;
border: 4px solid #F5F500;
border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.twistblogger.com--*/
#blogger-subbox .popup-box .tagline {
padding: 0;
line-height: 2em;
font-size: 26px;
height: 50px;
font-weight: normal;
font-family: "Oswald",sans-serif;
text-shadow: 0px -1px 0px #F5F500;
color: #3A3939;
text-align: center;
background: #FFFF00;
border-right: 7px solid #F5F500;
border-left: 7px solid #F5F500;
border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - www.twistblogger.com--*/
#blogger-subbox .popup-box p {
font-family: "Oswald",sans-serif;
font-size: 15px;
color: #EFEFEF;
text-shadow: 1px -1px 0px #000;
line-height: 35px;
padding: 10px 110px 0px 20px;
text-align: left;
letter-spacing: 0.5px;
margin: 0;
}
#blogger-subbox .popup-box .rssform {
padding: 15px 20px;
margin: 15px 0px 0px 0px;
}
/*-- Button Style - www.twistblogger.com --*/
#blogger-subbox .popup-box .rssform .button {
cursor: pointer;
margin: 0px 0px 0px 5px;
border: none;
overflow: hidden;
width: 35%;
height: 37px;
background-color: #FF0;
font-size: 14px;
font-weight: normal;
color: #121212;
letter-spacing: 0.5px;
text-transform: uppercase!important;
font-family: "Oswald";
float: right;
}
#blogger-subbox .popup-box .rssform .button:hover {
background: #FFE800;
padding: 7px;
border: 1px solid #fff;
}
#blogger-subbox .popup-box .rssform .email-bg {
background: #FFE url('https://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/s1600/1envelope.png') no-repeat 5px 8px !important;
padding-left: 30px;
}
#blogger-subbox .popup-box .rssform input {
padding: 8px;
font-size: 13px;
font-family: Oswald;
font-weight: normal;
display: inline-block;
width: 60%;
height: 37px;
text-transform: uppercase;
outline: none !important;
border: none;
border-radius: 1px;
box-sizing: border-box !important;
}
</style>

HTML:

<div id='blogger-subbox'>
<div class='popup-box'>
<div class='exit-button-subbox'></div>
<div class='tagline'>
Wait! Leech off my best
</div>
<p>Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!</p>
<div class='rssform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' class='email-bg' name='email' placeholder='Enter your email address... :)' />
<input type="hidden" value="TwistBlogger" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Add Me" class="button" type="submit" />
</form>
</div>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#blogger-subbox').delay(2000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>

Customization:

1.) All Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…