Saturday 23 March 2013

Blogger Widget: Onetime Popup Feedburner Subscription Widget for Blogger

// siddhu vydyabhushana // Leave a Comment

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QaADx-E97YoxEYMI9fvh9Ddr4KPhYmI5-vTuAso9JbOSxh3B3MzNDh5AFJB-Nk2mCc7wKR-5PaVTwnnbn7oXY2sihlZhGZtI8yKU326RJFgrDbgyY6cElUW9VFPgzj1-vXEkycoOp4s/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QaADx-E97YoxEYMI9fvh9Ddr4KPhYmI5-vTuAso9JbOSxh3B3MzNDh5AFJB-Nk2mCc7wKR-5PaVTwnnbn7oXY2sihlZhGZtI8yKU326RJFgrDbgyY6cElUW9VFPgzj1-vXEkycoOp4s/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTsv9Crk9CZSos7bIUj0tZGEYfk9k60WbtoerKtab_JP5vUKoTcMD-OMU9qsj3Nygkq2-ZuAwVxwh3kCn0-LwihSFaUMhWTDcN3_PuXmYODDEz-UPxLaCeN5SUXVP3qpuy_bCF26mwt8/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT63sse8t8521FJNQRMa6YZufeGn6Cq0zXB71DK_tSMStQ7c9fKFkcfzHvvXvH5BtzIL9yYp5fJvwQnMdObd8vkLnge4KBYo6RYKfHqmPOfKvvNN52J55dGOM3ZunbDaUco9mty8mUHizI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/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=aitamE-learning', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" 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 class="email" 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 class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="aitamE-learning" /><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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSsqjinAEDbs-cKbEyJQH8BAAClDOX5PaHrAcAFe5KgJXrTXw62mscVrtgCTZ4X1dh64WLzdorCHbONOciZW6cpa8rMiZ2mKwTL2qSxxVL5HvFTC3zaOoehXYz9RWIFxtVL-UgG8GTQz_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqlZUa9ssQIH95bbzzo0LweflPtLSfyX9ikgCF3KYx_5smdGgU36r1nPyqDKkYDTtawAPpx0J3gMcnFyUFN696E2OODboboEKW0ABgwNXMh8rkWYkGZP65hBu5D4o9LLDK54e_3EkIexW/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUMCx6PljT0bHzF88PdJi3RkxcHwFjSW6Bka7Rrn-jxurTN98m463SCXdIVjDYOLGne49emMvRp-h0pJrdDaRqqfNilOqbonGhe3Vkeo9ai9a0jpM3coGSwjBJgvdovXo98IoEPyEh6jP/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.

0 comments:

Post a Comment