Home » Blogger Tutorials, Tricks and Hacks » Adding One Time Popup Email Subscription

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding One Time Popup Email Subscription

Adding One Time Popup Email Subscription

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,350 views

Here’s a nice feature which you can add to your Blogger site. Chandeep of Blog Tips n Tricks shows you how to add a one time popup email subscription.

  1. Add the code below before the </head> tag.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

Note: If you already have the jQuery plugin in your Blogger, skip this step.

2. Go to Blogger Dashboard > Layout > Add A Gadget > HTML/JavaScript

3. Copy and paste the code below:

<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(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.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='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.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="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id="description">
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.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=chandeepsblogtips', '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="chandeepsblogtips" /><input name="loc" type="hidden" value="en_US" />
<div>
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div>
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</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>

4. Replace the highlighted code with your own feedburner username.

Note: Your username for your feed can be found at the end of your feed URL.

5. Save.

Reminder: Before doing any changes of your template, save a backup first.

View the demo.

Source: http://www.blogtipsntricks.com/2012/06/how-to-add-one-time-popup-email.html

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Aponpost says:

    Very nice and helpful post. Thanks for sharing.

  2. Thank you so much for the valuable code as I need to display a promotional product on my blog where it should be displayed only once where users can subscribe.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here