Pop up Email Subscribe box for Blogger

Pop up Email Subscribe box for Blogger

blogger pop up email subscribe box

Pop up Email Subscribe box for Blogger - is a blogger widget using jquery. This subscription form created with css3 and jquery. In this tutorial i shared how to add pop up email subscription box for your blogspot blog.

Also Read: Pop up Facebook Like box for Blogger with CSS


By adding this widget, you should easily increase your blog readers. It's a better way for increase blog readers. I hope this fresh pop up email subscribe box help you to increase blog readers. Now lets start the tutorial.

Go to blogger dashboard > Template > Edit HTML and past the below CSS Code before </style> 
 #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:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:&quot;Close&quot;;padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;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:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-family:&#39;Open Sans&#39;;font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:&#39;Open Sans&#39;;width:96.3%;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;}  


Now Save Template.
Now go to Layout > Add a gadget > HTML/Javascript and past the following below code.
 <script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan 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(''));
}
// 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>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#sub-box').delay(3000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
});
}

});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
                 <center><p>Subscribe for Latest Update</p></center>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' 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;;}' value='Your Name'/>
               <input type='text' 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;;}' value='Your Email'/>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div></div> 
</div>
</div> 

Note: YOUR-USER-NAME replace with your feedburner user name.

That's it. Now refresh your page and see result. If you found any problem then inform me comment section and if you think our post is helpful then do not forget to share with others. Thanks...

Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

21 comments:

  1. I installed this and it is not working...

    ReplyDelete
    Replies
    1. Hello Lauren E.

      Please add those codes properly.

      Thanks for your comment

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. how do you change the size of the green inside box

    ReplyDelete
  4. Thanks for the widget !
    Why the pop up still appear even for subscribers ?

    ReplyDelete
  5. Thanks Dear But Can You Please Help me?? i want a Popup same like Subscriber Popup but just with some changes.. I want some updates to my Visitors so i Need a Popup with Cute Style where i can Add my Latest News and Updates to my Users.. my website is www.chat4enjoy.com

    ReplyDelete
  6. this popup is showing on every page

    ReplyDelete
  7. Nice job. Please make it responsive.

    ReplyDelete
  8. I tried i but it is not popping up

    ReplyDelete
  9. Tanks,but can we make it show only once

    ReplyDelete
  10. I cant find the Style html code on my template. Please hellp

    ReplyDelete
  11. Can i change its time of pop up ?

    ReplyDelete
  12. I still don't understand at YOUR-USER-NAME. I know that mean, but I don't know where my username. google username or ??? Please reply me.

    ReplyDelete