Popup email subscription box widget for blogger

Recently I shared a Facebook Popup Like box widget for blogger blog. I hope It was useful for you. Today I am going to give you email subscription box widget for blogger. An email subscription box widget is a stylish widget. The user will see this box when he/she will visit your blog for the first time.
It is created with Jquery and CSS3. To know how to add an email subscription box widget on your blogger blog. Just follow our below steps.

 Email subscription box widget for blogger blog.

1. Go to the blogger.com and log into your account.
2. Select your blog where you are going to add the Email subscription box widget.
3. From your blog dashboard, click on the layout option.
4. Now from the sidebar, click on the add gadget link.
5. It will open a new window. From this window, select the HTML/Javascript widget.
6. On the next page leave the title empty. And paste the following code into the text box.
7. Press the save button. And done.

Note: if your template already has a query javascript. Then remove the Jquery script from the code. I marked the jquery script with red color.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css">
#box-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#box-close{width:100%;height:100%;}#box-display{background:#fff;border:2px solid #eee;width:400px;height:300px;position:absolute;top:32%;left:25%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#box-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#box-button:before{content:"X";padding:5px 8px;background:#000;color:#fff;font-weight:700;font-size:10px;font-family:Tahoma}#box-link,#box-link a.visited,#box-link a,#box-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
.hob-title{text-align:center;}
.hob-email{text-align:center;}
.hob-email input[type='text']{height:
35px;width:290px}
.hob-email input[type='Submit']{height:40px;background:#000;color:#fff}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_box') != 'yes'){
$('#box-background').delay(5000).fadeIn('medium');
$('#box-button, #box-close').click(function(){
$('#box-background').stop().fadeOut('medium');
});
}
$.cookie('popup_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='box-background'>
<div id='box-close'>
</div>
<div id='box-display'>
<div id='box-button'>
</div>
<h4 class='-hob-title'>Subscribe to our newsletter</h4>
<div class='hob-email'>
<p>Receive the latest tutorials to your inbox by submitting your email address</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=Your blog feedburner address", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<input gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Enter your email address...";}' onfocus='if (this.value == "Enter your email address...") {this.value = "";}' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='Your blog feedburner address'/><input name='loc' type='hidden' value='en_US'/>
<input type='Submit' value='Subscribe'/>
</form>
</div></div></div>

In order to make it work. In the above Code, You have to make some changes. Don't worry, I am not going to say about doing some kind of coding. You just need to replace your blog Feedburner address with your blog Feedburner address. To make it easy for you I marked the replacing area with the red color. That's it the Popup email subscription box widget is added to your blogger blog. To see how is it working visit your blog. With the CSS knowledge, you can make it more stylish. If you get any error you can ask me by dropping your comment below.