How to Add Email Subscription Box in Blogger

Friday, 29 March 2013

How to Add Email Subscription Box in Blogger

This tip can help you to increase your number of regular users and also increase the number of page views. When you put useful things and information in your blog then many people want to join your site to get the daily update news and information from your blog. For this purpose you have to add the email subscription form or box into your blog so that they can easily get the updates of your blog.

Here is the procedure that how can you add this box into your own blog. For this purpose, follow these steps:

First of all go to your blogger 'Dashboard'.
Then go to 'Layout' and click on 'Add a Gadegt' option.
You'll have a pop-up window, from this window find and click on 'HTML/JavaScript' option.
Then you'll have an empty box. Don't write anything in 'title' option just under the title option write the following code:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4KVTA4Wh9M_sLfLJYynbjIFf6k1nbputAp8c09yGkx63L58uyEXLsaRRdFdFaYZALMik4A1wjGMz6ukI8IsQW2sXFuwouXcjq70gDsnSdGyzil2GX8TDAGK1JtLRryxrJ2S-GOv9EemM/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:150px;
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=bloggerzhelp', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="bhd" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Customization:

Replace the URL for your desired email icon in Pink colour portion.
Adjust the value of text area according to your own in 150 place.
Set your own Feedburner email feed link in place of Red portion.
Replace 'bhd' with your feed title. You ca get it at the end of your feed link.