Email Subscription Box For Blogger

Email Subscription Box For BloggerEmail 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.
Setup feedburner for blogger
Hit the "Next" button and you are done.

Now go to Publicize > Email Subscriptions and hit the “Active”  button.
setup-email-subscription in feedburner
setup-email-subscription in feedburner
setup-email-subscription in feedburner



Login to your Blogger account and navigate to, Layout > Add a Gadget > Javascript/HTML

Blogger Multi-Tabbed Widget
Multi-Tabbed Widget For Blogger
Blogger HTML/JavaScript

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.