Aweber Style Popup Feedburner Subscription Form

In one of my previous post , I posted an article on how to implement an aweber style customised feedburner subscription form. In this post, I will show how to implement that form in a popup manner using only CSS and HTML. Here is a demo for it.


Just like the previous version , go to your blogger account.

>> Go to layout --> Add a Gadget --> HTML / Javascript.

Paste the following code in it.

<style type="text/css">

html #aweberstylepopupdiv {position:absolute;}
#aweberstylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('#');margin:0; overflow-y:auto;}
#aweberstylepopup {background-image: url(http://blogtipscodes.googlecode.com/files/popup.png); background-repeat:no-repeat; overflow:none;}
.aweberstylepopup {width:350px; height:334px; position:fixed; top:50%; left:50%; margin-top:-167px; margin-left:-396.5px;}
form #aweberstylepopup {display:block; margin:0;}
form #aweberstylepopup #aweberfield {padding:2px; position:absolute; top:200px; left:75px; width:205px; font-size:16px; border:none; background:transparent;}
form #aweberstylepopup #aweberbutton {position:absolute; left:25px; top:233px; width:280px; height:42px; border:none; background:transparent;}
</style>
<div id="aweberstylepopupdiv">
<div id="aweberstylepopup" class="aweberstylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('aweberstylepopupdiv').style.display='none'">
<img src="http://blogtipscodes.googlecode.com/files/aweberclose.png"/>
</center>
<form id="aweberstylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtipscodes', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="blogtipscodes" name="uri"/>
<input type="text" id="aweberfield" name="email" value="" placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://blogtipscodes.googlecode.com/files/popup.gif" id="aweberbutton" />
</form>
</div>
</div>

Before saving it make sure to change the feedburner username to yours.

Having trouble ? Just shoot the comment section. You can also share your views regarding this widget in the comment section.

Top