How To Add Email Subscription Form' To Your Blog

                                                                         

email-subscription-form-for-blogger

When your blog is being viewed daily by a lot of people, it's better to add a 'Email Subscription Form' to enable the viewers to get the latest updates of your blog. By doing this not only the viewers come back to your blog again but also the daily number of views rises. 

Adding email or Feed Subscription Form is easy and can be done by following a few simple steps described below :-


1) Log in to Blogger Dashboard > click on layout > then Add a Gadget link :-

                           

email-subscription-blog

                    

2) Click on 'HTML Java Script' in the pop-up window :-

                      

blog-email-subscription

                       

3) Paste the below code in the empty box that opens         

________________________________________________________________

 <style>

.hl-email{
background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T37Fuelsg8I/AAAAAAAATBY/tOWbHsgTDKc/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 class="hl-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=earningwizard', '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="earningwizard" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>

</div>

________________________________________________________________  

CUSTOMIZE :

1) Replace the url in green to change the email icon

2) To change Width or Text area change 130px in red

3) Now,

replace 'http://feedburner.google.com/fb/a/mailverify?uri=earningwizard' with your FeedBurner Email Feed Link

4) You can get your Feedburner Link by visiting your Feedburner Account then navigate to Publicize and next to 'Email           Subscription' 

5) Now, replace 'earningwizard' with your feed title

6) Click 'Save' it's done. Email subscription form is added to your blog.