How to add “Email Subscription Form” to Blogger Blogspot

Image via CrunchBase

Whe

n you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.
To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:
1. Log in to Blogger, then go to Layout
> click on “Add a Gadget” link:
2. From the pop-up window, scroll
down and click on the “HTML/
JavaScript” gadget:
3. Paste the following code inside the
empty box:
<style>
.hl-email{
background:url
( http://4.bp.blogspot.com/-
u3UaeUufpmI/T8lFuelsg8I/
AAAAAAAACQY/tOWbHsgTYKc/
s1600/mail.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;
}
.hl-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;
}
.hl-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: 130px;
color:#666;}
</style>
<div>
Subscribe via Email <form
action=”http://
feedburner.google.com/fb/a/
mailverify” id=”feedform”
method=”post”
target=”popupwindow”
onsubmit=”window.open(‘http://
feedburner.google.com/fb/a/
mailverify?uri=helplogger ‘,
‘popupwindow’,
‘scrollbars=yes,width=550,height=
520’);return true”>
<input gtbfieldid=”3″
class=”textarea” name=”email”
onblur=”if (this.value ==
&quot;&quot;) {this.value =
“Enter email address
here&quot;;}” onfocus=”if (this.value
== &quot;Enter email address
here&quot;) {this.value =
&quot;&quot;;}” value=”Enter email
address here” type=”text” />
<input type=”hidden”
value=” helplogger” name=”uri”/
><input type=”hidden” name=”loc”
value=”en_US”/>
<input
value=”Submit” type=”submit” />
</form>
</div>

Settings
Replace the url address in black

Name(required)

Email(required)

Website

Comment(required)

Submit

Δ

to change the email icon Increase/Decrease the 130 width value for a wider text area Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link.You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.Replace helplogger with your feed title. It appears at the end of your feed link.In my case it is http://feedburner.google.com/fb/a/mailverify?uri= helplogger
4. Now Save your widget and check
your blog. Enjoy!