Add simple "Email subscription box" to your blogger blog

When a new visitor find your blog is more informative and decides to get latest updates of your blogger articles then they should subscribe via Email Subscription form.
Here BlogTariff come up with another simple method of "Email subscribe box" add to Blogger blogs.
By adding "Email subscribe box" can increase maximum number of visitors to get update via this widget.
Let's begin the blogging tutorial:-

How to Add "Email subscription box" to blogger?

Sign into your blogger account
Click on "Design - Page elements"
Click on "Add a Gadget" to Select "HTML/Javascript" widget to add code
Copy the below code and paste it in that widget

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjd-KJUkmExvnuVQ_sooyG4hP_IgXNiQHvHV8B9KzhdPTW0JdCRam6y0hAxZ-yMrnKP4QHJUTZ33QcBCDHDHISYCthYOswD7Gi0HRPAZ5d6fLTT65UH5qr6QXAxArhMeDtSreIDxqAaio/s307/email.jpg) 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=blogtariff', '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="blogtariff" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Make specific changes inthe above code

Change the background image "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjd-KJUkmExvnuVQ_sooyG4hP_IgXNiQHvHV8B9KzhdPTW0JdCRam6y0hAxZ-yMrnKP4QHJUTZ33QcBCDHDHISYCthYOswD7Gi0HRPAZ5d6fLTT65UH5qr6QXAxArhMeDtSreIDxqAaio/s307/email.jpg"
with your choice image url other wise leave it default.
Change the width value if necessary other wise leave it default.
Replace "blogtariff" with you Feed burner ID highlighted in red color.
After successful changes in the above codes "Save the widget and preview your blog how it looks.

Acknowledgment

If you ejoyed this article or facing any difficulty then share your views via comments.
We always respects your views