Blog Me Pop up Email Subscribe Box Kaise Add Kare in Hindi

Maine apni pichli post Blog Me Email Subscribe Widget Kaise Add Kare me btaya tha ki blog me email subscribe widget kaise add kare. Now, Is article me mai aapko blog me Pop up Email Subscribe Box add karne ke bare me bta raha hu. Jise CSS coding and jquery ki help se banaya gaya hai.

Pop up subscribe box

Is popuup subscribe box ko aap apne WordPress, blogspot and other sabhi blog or all website par use kar sate ho or apne email marketing business ko increase kar sakte ho. Ye pop up email subscribe box sabhi sites par work karega.

Sabse achi bat ye hai ki ye fast loading or feedburner email subscription support hai. Yani ki aap isme google ki free service feedburner use akr sakte hai. Really, apne blog par email subscribers badhane ka ye ek acha tarika hai.

Blog Me Pop up Email Subscribe Box Kaise Add Kare Widget Code

Yaha mai aapko jo code bta raha hu wo sabhi blog or website me kaam karega. Bas iske liye aapko apne blog me kahi par bhi widget me is code ko paste karna hai. But agar kisi wajah se wok na kare to aap <style> to </style> code ko blog me </style> se pahle paste kare.

Option 1:

Sabse pahle aap ye code copy kare or isme apni feedburner email subscribe ID change kare.

<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 UPDATE NEWS</p></center>
 <div class='emailfield'>
 <form action='https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia' method='post' onsubmit='window.open(&apos;https://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>

Option 2:

Ab aapko ye code apne blog me add karna hai. Mai yaha aapko blogspot or WordPress dono ke step bta raha hu.

WordPress: Go to WordPress dashboard >> appearance >>widgets >> select widget >> add widget and paste above code.
Blogspot: Go to blogger dashboard >> layout >> add a gadget >> HTML/Javascript and paste this code.

Agar blogger me direct widget add karne se pop up subscribe box work na kare to aap ye step follow kare.

Step 1:

Blogger dashboard par jaye or drop down menu me template option par click kare.
Ab edit html par click arke Ctrl+F key button dabaye or </style> code search kare.
Ab </style> code se pahle (above) ye code copy karke paste kare.
Now, Save template par click kare.

#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;
}

Step 2:

Ab blogger layout me jaye or
Add a gadget par click kare
HTML/Javascript select kar ke ye code paste kare.
Finally, Save management par click are.

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

Note: Supportmeindia ki jagah apni email ID replace kar le.

Bas ab sab setting ho chuki hai. Ab aap apni site ko pen karke dekh sakte hai ki pop up subscribe box kaam kar raha hai ya nahi. Agar aapko koi problem aaye to comment section me uske bare me bta sakte ho.

I hope ye trick aapke bahut kaam aayegi or aapke blog ke email subscribers increase honge. So plz is post ko social media par share jarur kare.