How To Add Together “Email Subscription Form” To Blogger Blogspot

When you are providing useful data inward your blog, together with thus many times around readers volition withdraw to larn the latest updates from your blog. For that purpose, you lot withdraw an Email Subscription Form inward your blog, thus that the interested visitors tin hand the sack easily larn the latest updates.

Related: How to Burn Blogger RSS Feeds at Feedburner

To add together e-mail or Feed Subscription Form to your blogger spider web log (blogspot) is real easy.
Just follow the adjacent steps:

1. Log inward to Blogger, together with thus become to Layout > click on "Add a Gadget" link:

 2. From the pop-up window, scroll downward together with click on the "HTML/JavaScript" gadget:

 3. Paste the next code within the empty box:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9W04ApSmX-b5rKx-UBHhervKwMAtWGg3iId96r-_ZOU_uljpdJ36mOftg_JMLTJR9NF1dYgm3azWHhFYvXDzeGB5jI7kuM_X-yjFAeGSllE5Or3VEjp35BXQ0sDYT3XyG6Wm90KPN2Y/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 enterprise #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=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 = &quot;Enter e-mail address here&quot;;}" onfocus="if (this.value == &quot;Enter e-mail address here&quot;) {this.value = &quot;&quot;;}" value="Enter e-mail address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings 
- Replace the url address inward greenish to alter the e-mail icon
- To alter the width or the text area, increase/decrease the 130px value inward ruddy
- supersede http://feedburner.google.com/fb/a/mailverify?uri=helplogger alongside your Feedburner Email Feed link. You tin hand the sack larn it past times visiting your feedburner concern human relationship together with thus navigate to "Publicize" together with and thus to "Email Subscriptions".
- Replace helplogger alongside your feed title. It appears at the terminate of your feed link. In my illustration it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Now Save your widget together with banking concern gibe your blog. Enjoy!

Share this post