Pop up Email Subscription box to Blog

pop“Pop up Email Subscription”

Email subscription tool is the best tool for spreading news about your new published content. Whenever you publish new article post, Email sends newsletter to your subscriber with your website link. Normally blogger sets Email subscription box at side bar of the website, or at the footer of the website. But if anybody won’t to highlight Email subscription box to visitors than they can go for Pop Up Email subscription Setup. Let’s learn how add this useful Email subscription Pop up.

Process of adding Pop up Email Subscription

Note- when you Implant below codes, don’t forget to replace the mail subscription ID with your ID. You need to paste below code to any widget of your blog in order to set pop up email subscription box.

Step-1

WordPress-

If you are using WordPress Then go to dashboard of it, now open Appearance tab. and then select a widget. And add a widget. After adding widget to your theme, you have to expand / open the widget and paste the following code in it. And save the changes.

***CODE***

<style>

#sub-box {

display : none;

background : rgba(0, 0, 0, 0.8);

width : 100%;

height : 100%;

position : fixed;

top : 0;

left : 0;

z-index : 99999;

}

#boxclose {

width : 100%;

height : 100%;

}

#boxview {

background : #fff;

width : 600px;

height : 230px;

position : absolute;

top : 35%;

left: 27%;

}

#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 : 230px;

background-color : #4bb1ff;

}

#subscribe-box p {

font-family:&#39;Open Sans&#39;

;font-size:18px;

color:#fff;

line-height:20px;

padding:20px 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 : #ea141f;

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;

}

.i {

margin-top: 15px; float: right;

}

#subscribe-box .emailfield .submitbutton:active {

outline : none;

border : none;

background : #fff;

color : #ea141f;

}

#subscribe-box .emailfield .submitbutton:hover {

background : #18c90c;

color : #fff;

}

</style>

<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 AND GET LATEST UPDARE NEWS</p></center>

<div class=’emailfield’>

<form action=’http://feedburner.google.com/fb/a/mailverify?uri=supportmeindia’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=supportmeindia, &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><a href=” http://supportmeindia.com/add-popup-email-subscribe-box-on-your-blog/” target=”blank” class=”i”>get this widget</a></div></div></div>

***END CODE*** Pop up Email Subscription

Step-2 (Pop up Email Subscription setup)

Now add this below code to your wordpress widget and save the changes.

 

Pop up Email Subscription

***CODE****

#sub-box {

display : none;

background : rgba(0, 0, 0, 0.8);

width : 100%;

height : 100%;

position : fixed;

top : 0;

left : 0;

z-index : 99999;

}

#boxclose {

width : 100%;

height : 100%;

}

#boxview {

background : #fff;

width : 600px;

height : 230px;

position : absolute;

top : 35%;

left: 27%;

}

#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 : 230px;

background-color : #4bb1ff;

}

#subscribe-box p {

font-family:&#39;Open Sans&#39;

;font-size:18px;

color:#fff;

line-height:20px;

padding:20px 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 : #ea141f;

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;

}

.i {

margin-top: 15px; float: right;

}

#subscribe-box .emailfield .submitbutton:active {

outline : none;

border : none;

background : #fff;

color : #ea141f;

}

#subscribe-box .emailfield .submitbutton:hover {

background : #18c90c;

color : #fff;

}

*** CODE END**** Pop up Email Subscription

 

Now save the changes. (Don’t forget to change mail Id – put yours) (Pop up Email Subscription)

 

 If you are using BlogSpot blogger platform than follow this steps

Blogger

First of all you need to open your blogger dashboard, then you have to open “layout” tab from left side menu bar. Now you need to “add a gadget”. You can add gadget by clicking on blue linked text which are situated all over your theme. When you click on “add a gadget” new gadget list dialog screen will appear in front of you. You just need to choose “HTML/Java script” gadget from the list. Now you can pest the code which I mention above.        

Note- if you are using a blogger platform and by chance unfortunately adding a code to widget not work then you can add above code in side </style> section of your blogger theme HTML area. To perform this you need to go to Blogger and then Dashboard -> Template -> Edit Html.

When you open “edit Html” you will see bunch of codes on your screen. Now to make a change I current codes you need to put a cursor in that codes and press the key “Control + F” from keyboard. You will see that small search box appeared at right hand side of your screen.

You just need to type in </style> in that box and press enter. When you find </style> section, you have to paste below mentioned code inside / before </style>. Then you can save the changes.

 

Pop up Email Subscription

***CODE***

#sub-box {

display : none;

background : rgba(0, 0, 0, 0.8);

width : 100%;

height : 100%;

position : fixed;

top : 0;

left : 0;

z-index : 99999;

}

#boxclose {

width : 100%;

height : 100%;

}

#boxview {

background : #fff;

width : 600px;

height : 230px;

position : absolute;

top : 35%;

left: 27%;

}

#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 : 230px;

background-color : #4bb1ff;

}

#subscribe-box p {

font-family:&#39;Open Sans&#39;

;font-size:18px;

color:#fff;

line-height:20px;

padding:20px 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 : #ea141f;

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;

}

.i {

margin-top: 15px; float: right;

}

#subscribe-box .emailfield .submitbutton:active {

outline : none;

border : none;

background : #fff;

color : #ea141f;

}

#subscribe-box .emailfield .submitbutton:hover {

background : #18c90c;

color : #fff;

}

*** CODE END**** Pop up Email Subscription

Step-2 (Pop up Email Subscription setup)

Now you need to save all the changes. Then go to your blogger dashboard and “add a Widget” and select HTML / Java script gadget. You need to paste below codes inside that HTML / Java script gadget.

 

Pop up Email Subscription

***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 AND GET LATEST UPDARE NEWS</p></center>

<div class=’emailfield’>

<form action=’http://feedburner.google.com/fb/a/mailverify?uri=supportmeindia’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=supportmeindia, &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><a href=” http://pmbfox.com/add-popup-email-subscribe-box-on-your-blog/” target=”blank” class=”i”>get this widget</a></div></div></div>

****END CODE***  Pop up Email Subscription

 Conclusion

You can add Pop Up subscription box very easily. But make sure you save and back up your theme so if anything goes wrong with your current theme, then you can recover from it. Whenever you set these codes to your themes you must change name and mail address of from this codes. So your visitors can subscribe to your Blog.     “Thanks For Reading Full Post”

 

READ ALSO-

How to Add Custom Social Sharing Icons to Your Website

How To Add Feacherd  Image to Your Blog Post Area

 

Leave a Reply

Your email address will not be published. Required fields are marked *