Email Subscription Box For Blogger

Email Subscription box let your blog readers to get your latest post updates directly to their mailbox. All of us like to have a good template with matching design and widgets but Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

For those who don't have a feed burner account first you need to setup your blog feed in Feedburner so, for that log in to http://feedburner.google.com/ with your Google Account.

Copy your blog feed URL and paste that url at feedburner.com
Setup feedburner for blogger

Now hit the "Next" button & it will take you to a page where you have to assign a "Title" & " Feed Address"(the Feed Address will be your FEEDBURNER-ID) to your feed.

Hit the "Next" button and you are done.

Now go to Publicize > Email Subscriptions and hit the “Active” button.

Now copy and paste the code below:

<style> 

.wb-email{ 

background:url(http://www.webaholic.co.in/other/subscribe.png) no-repeat 0px 12px ; 

width:300px; 

padding:10px 0 0 55px; 

float:left; 

font-size:1.4em; 

font-weight:bold; 

margin:0 0 10px 0; 

color:#686B6C; 

}

.wb-emailsubmit{ 

background:#9B9895; 

cursor:pointer; 

color:#fff; 

border:none; 

padding:3px; 

text-shadow:0 -1px 1px rgba(0,0,0,0.25); 

-moz-border-radius:6px; 

-webkit-border-radius:6px; 

border-radius:6px; 

font:12px sans-serif; 

} 

.wb-emailsubmit:hover{ 

background:#E98313; 

} 

.textarea{ 

padding:2px; 

margin:6px 2px 6px 2px; 

background:#f9f9f9; 

border:1px solid #ccc; 

resize:none; 

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 

font-size:13px; 

width:170px; 

color:#666;}

</style>

<div class="wb-email"> 

Subscribe via Email 

<form 

action="http://feedburner.google.com/fb/a/mailverify" 

method="post" target="popupwindow" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes, width=550, height=520');return true"> 

<input gtbfieldid="3" class="textarea" name="email" value="Enter email address here" onfocus="this.value='';" onblur="if(this.value==''){this.value='Enter email address here';}"  type="text" /> 

<input type="hidden" value="Blog Title" name="uri"/>

<input type="hidden" name="loc" value="en_US"/>

<input class="wb-emailsubmit" value="Submit" type="submit" /> 

</form> 

</div>

Note:

Replace YOUR-FEEDBURNER-ID with your feedburner ID.
Replace Blog Title with your blog title.
And hit the "Save" button.