How to create a subscribe popup in blogger

What is subscribe?

subscribe serves to help your visitors subscribe to your latest articles, when you publish a new article,

Maybe you find a lot of blogg using popup subscribe, and you want to make it on your blog?

this time I will share the way and it is very easy once you stay following his way below

• Log in to your blogger
• Edit template
• And find the code </ style>
• Then paste the CSS below before the code </ 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: 'Open Sans'; 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; font-family: 'Open Sans'; 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;}

• Then save the template

After that go back to blogger then there to the layout

• Layout
• add gadget
• select the HTML / javascript mode
• And paste the code below

<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> 

And save

NUTE : YOUR-USER-NAME replace with your username feedburner

and reload your blog then you will see its results, good luck