Popup Domination Style Subscription Form for Blogger

Popup domination is mostly available for wordpress site owners. It helps in increasing the number of e-mail subscribers. The premium plugin for wordpress comes with a price of $80 or something like that. What I'm going to share is how you can add a customised popup feedburner subscription form for blogger blog.

While looking for some plugins to increase my e-mail subscribers, I found out an interesting code by Muhammad Hassan of exeideas.com. It was to my surprise, code for popup domination like subscription meant for blogger and other sites who cannot afford the premium plugin.

There were quite a few different forms in their post with 3 versions. The first two versions are of jquery and the 3rd one is using only css and html. I'm just going to share the 2nd and 3rd version. They look like same but they have different features.


Version 2 :

It is a jquery version with timing settings. You can adjust the time like how many days after the popup will again open once a visitor closes it. The timing range can be adjusted from one day to 30 days if the user doesn't clear his/her browser cookies.

Just copy the code and paste it in a HTML / Javascript gadget.

Here is the code for it.

<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-uAof05Ee4AtlwCoqgL_38NtZtcIGGDuIYNBhScjZVFqKeEVGs-er3ISB_zrDpKKtD0vs2ZTnlgtZXG9lqTuKOZ3EHyL0CK2UbKxnlc4qw4xvyYQmr6rBGsOkdt8byh28rKep_Zb8Ho/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB55Tf5VgZ6Q6p9Uq__ov2Gfxm9tnvSlKO_jRXzTCVAgVIXZBTFTknL93TYf0iSLkv70B3UUn6JnCiiMhDB5SKuCLWFvPfC5ikL52r-Q_cdXo9EQOAF9-v39KyebHcwuU-dLio0t7qoVs/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:318px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNx8hzb3O39DOE7gddHeigL5j49IEHWuJT3b11zxMJ_D66nL7NLpN9VNykpXu1wQbVYx11rN4zCgKOmC_z1CG3knph5GEDmgPyNRGL9Q7HaSXrtCVRSWp8B_0nGnhisHeE0kRhuvd6xg/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFPhJYFfLm5qv1Vd7r1Tw_b0COscG9kd9JmAnaDSugMNx-6-pPxx7gWBBMi15neAN_WEEFyuHtC8V5K13q7h5TyI3lN-M2xBk3YGxPE0J7XOZ4M11FGSyNDyQtbyG2ca071O6ZUtg1A/s770/EXEIdeasBlog.png) ; background-repeat: no-repeat; height: 334px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.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:"785px", inline:true, href:"#exestylepopups"});
}
});
</script>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="EXEIdeas" name="uri"/>
<input type="text" id="exefield" name="email" value="" placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->

Now find these lines :

var fifteendays = 1000*60*60*24*30
The number 30 controls the cookie settings. 30 means the popup window will open again after 30 days if the user doesn't clear browser cookies.

if (document.cookie.indexOf('visited=true') == -1) 
If you make it false then popup window will appear during each window refresh regardless of the timing settings.

Version 3 :

Version 3 has been created using pure css and html. It's main disadvantage is the lack of timing settings and the visitor may be annoyed with the popup window appearing again and again.

Like the previous version, just copy the code and paste it in a HTML / Javascript gadget in blogger.

Here is the code for it.

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">

/***********************************************
* CSS POP-UP With Light Box Effect- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9Uv3mEWbJoEdH9gtV1xaHO19Psz0hhlSNvlJRnNSkyDAAhansZWKCfz20tvPfhzIkXDUrrcWGSxPMlTejbs0M8fLHJf6ZVEqeVgdGLhe7bx0B6iqhuxA0w3uUXMVUkotxoV4m9PbiQ/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFPhJYFfLm5qv1Vd7r1Tw_b0COscG9kd9JmAnaDSugMNx-6-pPxx7gWBBMi15neAN_WEEFyuHtC8V5K13q7h5TyI3lN-M2xBk3YGxPE0J7XOZ4M11FGSyNDyQtbyG2ca071O6ZUtg1A/s770/EXEIdeasBlog.png); background-repeat:no-repeat; overflow:none;}
.exestylepopup {width:770px; height:334px; position:fixed; top:50%; left:50%; margin-top:-167px; margin-left:-396.5px;}
form#exestylepopup {display:block; margin:0;}
form#exestylepopup #exefield {padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton {position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-LPBzxvNTrMHLmlIuPxPaHUDXaT5WRtWaudYRwXBXDmHuxhWgO8w0QpainLbOfJOq3HAlTqbVYRuMfzqQgPtmDl1tJsYUipRwK2p1BxHdUhzPUS-6PFDsvYSQHbjUBDsqDmu6Od02w/s40/exeideasclose.png"/>
</center>
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="EXEIdeas" name="uri"/>
<input type="text" id="exefield" name="email" value="Enter Your E-Mail Here..." placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzj77qcX9DYvPkCI4c888hdp6u8AW_IBFFbk0Tjhb6VurTykbaDAOWPnbfhUqRIfuMaLSSp6qZISvpiZRDG25MFpxS8lfxhPMeSt1uJE4QJ25WWGn88gzyV-XJ18rhpqeWX0KFXBS4w/s128/exeideasblank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Also make sure to change the default feedburner username to yours in both the forms.

You can use any one of the version but I would suggest that you use the version 2 since it has the timing settings.


Which one you are going to use ? You can shoot the comment section to share your views regarding this widget.

Top