Add Dynamic Email Subscription Box in BlogSpot Posts

In my previous article, I told you how you can add custom fonts to your blog and how to add stylish keyboard buttons with pure CSS. I am sure you enjoyed both of my previous posts. Today I am going to tell you about adding the powerful email subscription box at the end of your blog posts. This is so simple and handy to use, you can modify it even if you have little knowledge about HTML and CSS.

The Power of Email Subscription Box

I am sure you are thinking that why we must put it below every post? Even why do we need to add it in our blog? Let me tell you the benefits of this widget.

User might like your current post and he might would like to read more from you, so he can subscribe instantly.
It will help you to boost your traffic via Email
It will help your readers to access your blog directly from their email.

Before You Go

You must have a feedburner id before you implement it on your blog. Feedburner is free service provided by blogger, if your create a blog your feedburner will be automatically generated according to your blog title. You can change it by visiting Feedburner. On Feedburner dashboard you will be able to find you total number of subscribers. You can get the list of contacts from that. You can block any email and stop it from getting updates. Well Feedburner has a lot of features, it will take me to write another post about it.

Adding The Form

First of all log in to your blog which you want to use in this project, then go to Template > Edit HTML to edit HTML text of your template. You can use any free software I mentioned in my previous post. Now search for this line, because we will add our code just after this line.

<div class='post-footer-line post-footer-line-3'>

If you found this code, paste this code after it.

<b:if cond='data:blog.pageType == "item"'>
<style>
.subbox {
padding: 30px;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
width: 100%;
}
.subicons {
float: center;
padding: 20px;
}
</style>
<div class='subbox'>
<h1>Get Free Updates in your Inbox</h1>
<div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerTrick','popupwindow','scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='BloggerTrick'/>
<input name='loc' type='hidden' value='en_US'/>
<input name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' style='width:70%; padding: 6px; height: 35px; border: 1px solid #e3e3e3' type='text' value='Enter your email...'/>
<input style='width:20%; padding: 6px; height: 35px; background: #359bed;' type='submit' value='Subscribe'/>
</form>
</div>
<div class='subicons'>
<a href='http://www.facebook.com/USERNAME' title='Join us on Facebook'><img alt='facebook' src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png'/></a>
<a href='http://twitter.com/USERNAME'
' rel='nofollow' title='Follow us on Twitter'><img alt='twitter' src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png'/></a>
<a href='https://plus.google.com/USERNAME ' rel='nofollow' title='Follow us on Google+'><img alt='gplus' src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png'/></a>
<a href='http://pinterest.com/USERNAME ' rel='nofollow' title='Follow us on Pinterest'><img alt='pinterest' src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/USERNAME ' rel='nofollow' title='Subscribe to RSS'><img alt='rss' src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/s32/rss.png'/></a>
</div>
</div>
</b:if>

After you add this code, click on Save template and you are good to go.

Modifying the Code

Let me tell you how you can modify this whole html code easily. Every color indicates its relation with above colors. Make sure you know how to backup your blogger templates.

Don't change this, this code will help your email box to show just below the posts instead of everywhere in your blog.
These are the CSS style or classes, you can add your own tags and modify them in more convenient way.
This is you Feedburner Email Subscription Username or ID.
This is the text which will be titled on this email box, you can change it and add according to your Blog Slogan.
Replace it with your social Username or link
These are the image icon links, you can use your own icons if you don't like mine.