Adding a popup Email subscription widget in your blog, is one of the best step taken to improve your blogs audience. This widget is proven to increase the email subscription by more than 200% than using a usual subscription box in the sidebar. It doesn't matters, whats your niche is, this widget will always helps you to build your email subscription list.
In this tutorial, I will show you how to add a popup email subscription widget in your blog. Just follow these simple steps.
In this tutorial, I will show you how to add a popup email subscription widget in your blog. Just follow these simple steps.
Add a Popup Email Subscription Widget in your Blog
Step 1 : Open your blogger dashboard. Now go to "Template" and then click on "Edit HTML".
Step 2 : Click anywhere inside the code. Now using the keys Control+F, open the search box.Write </head> in that box and hit enter to find it.
Step 3 : Now copy and paste the following line, just above it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Step 4 : Save the template and then go to "Layout" tab. Then click on "Add a Gadget" and then select "HTML/Javascript" from the list shown to you.
Step 5 : Now copy and paste the code given below inside that box.
<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent; background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
#popupContactClose{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUsrj1kt7oUzNnv66wm9yrdvoc1b_ANbAIqYOch-Jt1dj8VrUlxMmaRkhc53fQKkj7zBp6cFY8VuKpCx6dmLIgeSyBbXOsRAXt2Mi8KEQhiaq8Kql4LTzsi2iP0OsK8MFiOi1UFcdw5Nz/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm img { border:none; }
#btntfollowForm p { margin: 0 0 10px;}
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { color:#222; text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUsrj1kt7oUzNnv66wm9yrdvoc1b_ANbAIqYOch-Jt1dj8VrUlxMmaRkhc53fQKkj7zBp6cFY8VuKpCx6dmLIgeSyBbXOsRAXt2Mi8KEQhiaq8Kql4LTzsi2iP0OsK8MFiOi1UFcdw5Nz/s1600/close.PNG',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<div id="backgroundPopup">
<div id="popupContact">
<a href="" id="popupContactClose">x</a>
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDVJ5opO9up3tSOssU7M-nQ0eY2fYMnWloxxjeKikbaPYkOPuPJejNBiLOi1IQT9wMf4CRV3-jYuvIxr5sKrvguCwZ6cv2RKbNavwwU6w4Uaz5i4xKafDYasO2aFpSwk21O7vPDWTSu94/s1600/Subscribe+Via+Email.PNG" />
<div id="description">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1NqyemduIICL8ELxjGCOIWW1J7vTSxfsSUcd9t46ZoIu66hHqRBa5gKB578pTchWmOUtzqNnFAdMRuNxelLg1JENRAMOfXVSnZYmpuPzW-zyQO7III7ZMEtzTaeaB0tvwp4fQmvy54LW8/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smartbloggingguide', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="smartbloggingguide" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.smartbloggingguide.blogspot.com/" rel="dofollow" target="_blank">Smart Blogging Guide</a></div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
Customization
Change the text in red color with your blogs feedburner username
Step 6 : Save the widget and you are done with it. You successfully added popup email subscription box in your blog.
