Add Cool Email Subscription Form To Your Blog

As a Blogger it is necessary to provide valuable information and also keep connected with your existing visitors for your blog.When an Email Subscription Form is available, the visitors will get latest updates every time you post new issues in your blog.By this they will get connected.

Lets Start on Adding the  Email Subscription Form.

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/AVvXsEj1eJAWz4F24P1NOk1LTCvcd3AqGFt7LugoYP6sWwJsYVKGEuY6C9Ah-F697hogItyFUUa8c0W8Uiw9Ax-G1lhu9JEj8jQ-8TvU-Izsj80mX1-tjxU01xFZiDZSEHLSrFXw9ASBSvd77L0/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=maximusdot', '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="maximusdot" 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=maximusdot 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 maximusdot 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=maximusdot

Save your widget and check your blog.