Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

One Time Popup Email Subscription Box Widget for Blogger

5 min read

Your Blogger blog needs an email subscription widget on it to perform well because your regular visitors, who love your content, would never want to miss your latest posts and you can make their task easy by allowing them to subscribe your blog through email subscription. By doing this, you make it sure that your visitors can visit you constantly.

Feedburner is a great service by Google which delivers your content to your subscribers effectively. Onetime Popup Feedburner Email Subscription Widget will make your dream true to add a stylish and effective popup email subscription box to your Blogger blog. As the popup is onetime, so it guarantees that your visitors will never experience it irritating. It will appear once and never popup again for the same visitor from the same computer. Onetime Popup Email Subscription widget sets a cookie in the targeted visitor and once it has appeared for the visitor, later on it recognizes the visit and don’t bother to popup again. So your subscribers number will effectively increase and as a result, your traffic will keep growing day by day. Additionally, your regular visitors will stay in touch with your blog whenever you will post something new.

How to Add Onetime Popup Email Subscription Box to Blogger

1. Login to your Blogger dashboard, choose your blog and go to its layout

2. Add a new HTML/JavaScript gadget with the below code

<style>

 

/*

ColorBox Core Style:

The following CSS is consistent between example themes and should not be altered.

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:80%; height:80%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:80%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:80%; height:80%; display:block; border:0;}

/*

 

 

User Style:

Change the following styles to modify the appearance of ColorBox. They are

ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

box-shadow:0 0 15px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

}

#cboxTopLeft{width:14px; height:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/–FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/–FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-jMjssBv0t1Q/UQejbimsNeI/AAAAAAAACG4/jAGaEw2fzMs/h120/loading-background.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(https://lh4.googleusercontent.com/-bpGBUwdDCxY/UQej05KBhOI/AAAAAAAACHQ/iBcR1hU4K3E/h120/loading.gif) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:80%; font-weight:bold; color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.pngno-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*———————————————————————————–*/

/* Facebook Likebox popup For Blogger

/*———————————————————————————–*/

#subscribe {

font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe a:visited {

text-decoration:none;

}

.box-title {

color: #3B5998;

font-size: 20px !important;

font-weight: bold;

margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:10px;

line-height:25px; font-family:arial !important;

}

.box-tagline {

color: #999;

margin: 0;

text-align: center;

}

#subs-container {

padding: 35px 0 30px 0;

position: relative;

}

a:link, a:visited {

border:none;

}

.demo {

display:none;

}

</style>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>

<script src=”http://supportivehandsjs.googlecode.com/files/jquery.colorbox-min.js”></script>

<script type=”text/javascript”>

jQuery(document).ready(function(){

if (document.cookie.indexOf(‘visited=true’) == -1) {

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = “visited=true;expires=” + expires.toUTCString();

$.colorbox({width:”400px”, inline:true, href:”#subscribe”});

}

});

</script>

<!– This contains the hidden content for inline calls –>

 

<div style=’display:none’>

<div id=’subscribe’ style=’padding:10px; background:#fff;’>

<center>

<div id=”ig-subscription-optin” style=”border: 0x solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#55AAEE’, endColorstr=’#003366′,GradientType=0 ); width: 310px;”>

<h3 id=”truebloggertricks-title-text” style=”color: white; font-size: 20px;”>

GET FREE EMAIL UPDATES</h3>

<div id=”truebloggertricks-sub-title-txt” style=”color: white; font-size: 14px;”>

Join us for free and get valuable content delivered right in your inbox.</div>

<br />

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=supportivehands‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”>

<input id=”truebloggertricks_Subscriber_name” name=”name” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” type=”text” value=”Enter First Name” /><br />

<input id=”truebloggertricks_Subscriber_email” name=”from” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” style=”width: 130px;” type=”text” value=”Enter Email Address” /><br />

<div style=”clear: both; text-align: center;”>

</div>

<input name=”uri” type=”hidden” value=”supportivehands” /><input name=”loc” type=”hidden” value=”en_US” /> <input id=”truebloggertricks_Submit_Text” style=”height: auto; padding: 5px 0;” type=”submit” value=”Get Access Today!” /></form>

</div>

</center></div>

 

<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;

background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;

text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif !important;margin: 10px;margin: 0px;padding: 10px;

margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;

padding: 5px;border: none;}#ig-subscription-optin input.name {

background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}

#ig-subscription-optin input[type=”text”] {border: 1px solid #111 !important;

font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}

#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {

font-family: Georgia, Times, “Times New Roman”, serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;

font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;

text-transform: none;text-decoration: none;

text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif;

border: none;padding: 0px !important;float: none;}input:hover[type=”submit”] {

background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type=”submit”] {background-color: #00A7ED;border: 1px solid #0094D2;

color: white;cursor: pointer;font-family: ‘Droid Sans’, sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {

color: #333;font-family: ‘Droid Sans’, sans-serif;}#ig-subscription-optin input[type=”submit”] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;

padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}

#ig-subscription-optin input[type=”submit”]:hover {color: #FFA5A5;}</style>

 

</div>

2. Replace blue highlighted value with your Feedburner ID and save the gadget. You are all done!!!

If the Email Subscription Box doesn’t popup, then it might be possible that you have Ajax JQuery script in your template already. To fix it, remove the red highlighted line from above code.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

How to Add “Contact Me” Form and Sticky Button…

Google’s Blogger is though providing a brilliant free blog hosting, but some limitations are also there on Blogger. One of these limitations is, Blogger...
Rehmat Alam
2 min read

Attractive Floating Social Media Buttons Widget for Blogger

Are you searching for a social media profiles widget for your blogspot blog? If yes, then my recommended social media widget will surely make...
Rehmat Alam
2 min read

7 Replies to “One Time Popup Email Subscription Box Widget for Blogger”

  1. Is it possible to add image to html script background. If so please post an article about it. I have two html scripts for which I want to give different background images

    Thanks

  2. Wow, yet another cool widget, but I’ve already added the Facebook Like Popup Box, so I can’t add this right now. I’ll replace Facebook widget later with this one when I get some fans.

  3. Instead of using a new HTML gadget which appears on the sidebar, can I paste this code into the HTML of my Subscription page?

    Thanks for the help, by the way! Just what I’m looking for.

  4. Hi Rehmat ,
    The email subscription does not work on my blog .
    You have mentioned that

    If the Email Subscription Box doesn’t popup, then it might be possible that you have Ajax JQuery script in your template already. To fix it, remove the red highlighted line from above code.”

    Cannot find the red highlighted line.

  5. Okay , i found the red highlighted line . However , the pop up still doesn’t seem to work .

Leave a Reply

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