Feedburner Popup Email Subscribe Box Widget for Blogger Blog

Simple CSS Blogger Newsletter Popup Subscription Box

Feedburner email Subscription is the most important part for any successful website or blog. feedburner email Subscription box may help very much to increase your subscriber or readers. You can find many designs of feedburner popup subscription box but here on this page I am sharing a simple, lightweight, one time, time interval and cute CSS feedburner popup subscribe box.

Installing CSS feedburner Email Subscription Box:

1. Goto Edit HTML and paste to following code just before </style> tag.

/* Popup Subscribe Box by asif mirza */
#sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:1px solid #fff;width:305px;height:225px;position:absolute;top:33%;left:38%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-17px;}
#closebox:before {content:"Close";padding:2px 5px;background:none;color:#48cb7a;font-weight:normal;font-size:10px;font-family:Open sans;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:305px;height:225px;background-color:#02BA74;}
#subscribe-box p {font-family:'Open Sans';font-size:14px;color:#fff;line-height:18px;padding:10px 0 0 0;margin:0;}
#subscribe-box .emailfield {padding:0px 10px 0 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:92.5%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}

2. To make it responsive, add below code just above  ]]></b:skin> tag.

@media only screen and (max-width: 800px) {
#boxview {position:absolute;top:33%;left:25% !important;}
}
@media only screen and (max-width: 700px) {
#boxview {position:absolute;top:33%;left:15% !important;}
}
@media only screen and (max-width: 500px) {
#boxview {position:absolute;top:33%;left:7% !important;}
}
@media only screen and (max-width: 450px) {
#boxview {position:absolute;top:33%;left:5% !important;}
}
@media only screen and (max-width: 300px) {
#sub-box, #boxview {display:none!important;}
}

3. Save template. Goto Layouts and add a Widget> HTML/Java Script and paste to following code.

<div id="sub-box">
<div id="boxclose">
</div>
<div id="boxview">
<div id="closebox">
</div>
<div id="subscribe-box">
<center>
Dont' miss Latest Movies, Article, Jobs..Subscribe us via Email</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Pakfunz-DesiEntertainmentChannel" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Pakfunz-DesiEntertainmentChannel, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="Pakfunz-DesiEntertainmentChannel" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now!" />
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){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():'',options.path?'; path='+ options.path:'',options.domain?'; domain='+ options.domain:'',options.secure?'; secure':''].join(''));}
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;};
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 1){
$('#sub-box').delay(6000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
$.cookie('popup_facebook_box', '1', { expires: 3 });
});
}
});
</script>

Change Values for feedburner popupbox Customization:
1. Replace Yellow Color contents with your feedburner name:
2. Replace Green color contents to change time of popup 6000=6 Second
All Done ! Save Changes and you have a simple feedburner Email subscription box for your website. If any issue please let me know in comments.