Modal/Popup Subscribe Box for Blogger

Hello friends..  Here's an awesome Popup Subscribe Box that was made by Bloggermint in 2011, & since then there had been questions on how to add it to blogger. Here's a very simple tutorial to help you add this subscribe box to your blogger website.

View Demo

Here's how to do it :

1. Add the below code above </head> :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<link href='https://googledrive.com/host/0By3f8KUOuRCNMkVZRDY2WmFFSXc' media='screen' rel='stylesheet'/>
<link href='https://googledrive.com/host/0By3f8KUOuRCNUG9USFFPM0N3MTA' media='screen' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'/>
<script src='https://googledrive.com/host/0By3f8KUOuRCNa01XVmZOOWpzYkE'/>

2. Then Add the HTML/Javascript gadget in your sidebar & leave it's title field blank. Then copy the below code into the content part :

<script type="text/javascript"> 
  jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
    $.colorbox({width:"480px", inline:true, href:"#subscribe"});
        }
});
</script>
<div style='display:none'>
  <div id='subscribe' style='padding:10px; background:#fff;'>
  <h2 class="box-title">Never Miss Any Update From Us!</h2>
  <h3 class="box-tagline">Get notified about our updates.</h3>
   <!-- BEGIN #subs-container -->
   <div id="subs-container" class="clearfix">
   <!-- BEGIN .box-side -->
   <div class="box-side left">
   <div class="box-icon"><a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMO-9hiKSF2GVQWQIMJAv5lDj0qcaCAJv1hCPbSSet8vUkXYEtAFCTulAT8EeQdcpfnl4DQ5S-TOoA75f2VPPcULR_DWNVrgNA_2H1MhQKpudfdHne_F27wtz48Kj8O5xq7t6xQODRe9z/s1600/email.png"/></a></div>
   <h4><a href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID">Subscribe by Email</a></h4>
   <h5>Get alerts directly into your inbox after each post and stay updated!</h5>
   <a class="sub" href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<div id="box-or">OR</div>
<!-- BEGIN .box-right -->
<div class="box-side right">
<div class="box-icon"><a class="rss" href="http://feeds.feedburner.com/YOUR FEEDBURNER ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaR46Npsjbzwr-XdP2lITb9FWmTM0cvyzCFrh1rAkwKZIoGWxWJTP6XHYqPlwE4iW2ePJ7W2VlBvOOVHaJmGIAjYgX14TXzajQGHYNgiahh2pFKMoW2Mwg8LdlSIOJiVVLzBxX22PYkQdc/s1600/rss.png"/></a></div>
<h4><a href="http://feeds.feedburner.com/YOUR FEEDBURNER ID">Subscribe by RSS</a></h4>
<h5>Add our RSS to your feedreader to get regular updates from us.</h5>
<a class="sub" href="http://feeds.feedburner.com/YOUR FEEDBURNER ID" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<!-- END #subs-container -->
</div>
</div>
</div>

3. REMEMBER to replace "YOUR FEEDBURNER ID" with your Feedburner ID at all the 4 places. If you don't have a Feedburner ID, you can get one from here.

Customise
Before this subscribe box loads, it checks for the cookie stored.  In the script by default it is assigned to fifteen days of cookies storage, so if you want, you can change those values anytime. Here's how you can do it :

Replace 1000*60*60*24*15 with your desired value. Here are some examples :

Unit Of Time	Milliseconds	Code
Table Source : Bloggermint
1 second	1000
1 minute	second * 60	1000 * 60
1 hour	minute * 60	1000 * 60 * 60
1 day	hour * 24	1000 * 60 * 60 * 24
1 week	day * 7	1000 * 60 * 60 * 24 * 7

That's it. If you have any doubts or need customisation help, feel free to ask me via comments. :)