Add Pop up Email Subscription Widget for Blogger

Add Pop up Email Subscription Widget for Blogger
In my past post, i showed you How to Add a Beautiful Email Subscription Form with Feedburner to Blogger  but this subscription form has been created with css3 and jquery. In this tutorial i share how to add pop up email subscription widget in blogger.

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 widget will help you to increase blog readers. Now lets start the tutorial.

Adding Email Subscription Widget in Blogger

  • Go to blogger Dashboard >Template >Edit HTML 
  • Click anywhere inside the template editor
  • Press Ctrl + F and locate the ]]></b:skin> tag
  • Copy the the following codes and past them just before the ]]></b:skin> tag
#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;}
  • Finally click Save Template
  • Now go to Layout  > Add a gadget  > HTML/Javascript  and past the following 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: Replace the blue text YOUR-USER-NAME with your feedburner user name.
Congratulations! you have installed this widget successfully.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind