Add Email Subscription Form in Blogger.

Tweet

In this tutorial you will learn how to add an email subscription form to your Blogger Blogspot blog so that your visitors will have easy access to your latest updates via email. Adding an email subscription form to your blog is very easy to do and is one way to stimulate repeat visits to your blog.



Below is a step by step walk through of how to add an email subscription form to a Blogger blog. I have broken down the steps so that even beginners and newbies can easily follow the steps.

So,Let's see how to add a "Email Subscription form" like that in your blog:

1.First,Sign in to your Feedburner account.If you don't have a Feedburner account yet,you can register it at Feedburner.

2.Click on the "My Feeds" link at the top of the page and next ,click on your blog name[look at the below screenshot]

3.Next,Click on the 'Publicize' tab as shown below.

 4.Select the "Email Subscriptions" option[look at the left sidebar]

 

5.Next, you will see like this.

Click on 'Activate'

After doing all this now Sign in to your blogger dashboard>Design>add a page element>html/javascript

and paste the code below:

<style>

.mbt-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmLtyoEPyeDmyp0chTS0dKGae-NwUJkR6VUK0hy6Gy0zAg6c9HfC4z3NvOyhfjS87Nk693mrkrHOglcq6RkhOOEAXvSIIBxBX4pKjSaM9aQ8kAdwavXVGU5DyqiqdXBUzhcImGimcbCqW/s1600/email.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;

}

.mbt-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;

}

.mbt-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="mbt-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=Learningitechnology', '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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="mbt-emailsubmit" value="Submit" type="submit" />

</form></div>

Now replace Learningitechnology with your Blogfeed title provided in feedburner. 

That's it!..........too long process know? No.Very simple process to do.