How to add “Email Subscription Form” to your blogger blog

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

One of the most important thing for a blogger is to keep connect your existing visitors with your blog. If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog , so that interested visitors can easily get latest updates from your blog.

and it’s very easy to add email or feed Subscription Form to your blogger blog (blogspot).
So let’s do it,

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<style>
.rt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEoPKPWI3ccWSbBJz6SraJqjhForMZAu5YAUDRuDG0j5t6sye-2oDP96i8UhZuUPyEjAuQETuX67CiW4tLgG3uMBfZNDiTw9KMOqt9s6_jIL8u5gF9WcAMa3huuxEbsPHNi3kV_RezJA/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;
}
.rt-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;
}
.rt-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="rt-email">
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=RoyalTutor', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;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="RoyalTutor" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now replace http://feedburner.google.com/fb/a/mailverify?uri=RoyalTutor 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 RoyalTutor with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=RoyalTutor

Save your widget and check your blog.