Add Email Subscription Box Below Each Post In Blogger ~ The Next Generation Blog

Home » blogger_tricks » Add Email Subscription Box Below Each Post In Blogger

Add Email Subscription Box Below Each Post In Blogger

Hi friends, email subscriptions are the best way to keep your readers always in touch. If any reader subscribes to your posts via email, he gets the latest blog updates in his mailbox. So, I am going to tell you the way to add a stylish email subscription box below each blog post. So, let's start:
> Login to your blogger account.
> Go to Template > Edit HTML > Proceed > Expand Widget Templates
> Now search for <data:post.body/> in your template.
> Just below <data:post.body/>, add this code:

<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.Ashutoshstyle{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.Ashutosh-email{
background:url(http://2.bp.blogspot.com/-oHGqJ1etW_M/UDRi0T2OkXI/AAAAAAAAAyw/voPqdzqf-F4/s1600/MBT+Stay+Connected+Email.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-family: "Trebuchet MS",sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.Ashutoshsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 5px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:auto;
margin:10px 0;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#333; font-weight: bold; font-size: 22px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '>Stay Connected To Get Free Updates!</p>
<div class='Ashutosh-email'>Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=THENEXTGENERATION', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='THENEXTGENERATION'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='Ashutoshstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='Ashutoshsubmit' title='' type='submit' value='Submit'/>
</form></div>
</td>
<td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/THENEXTGENERATION' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-oEZz_GqHL2M/UDRi3CHsScI/AAAAAAAAAzE/qWreXE68iYI/s1600/MBT+Stay+Connected+RSS.png'/></a>
<a href='http://twitter.com/ashutoshhacker' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://3.bp.blogspot.com/-cL30fvGY-dA/UDRi34t3MBI/AAAAAAAAAzM/zLP4j1qEN-k/s1600/MBT+Stay+Connected+TWITTER.png'/></a>
<a href='http://www.facebook.com/thenextgenerationrocks' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-l3b6Kgx6Hgg/UDRi1LUyXEI/AAAAAAAAAy0/0q-yrdGS_HA/s1600/MBT+Stay+Connected+FACEBOOK.png'/></a>
<a href='https://plus.google.com/111111111111111111111' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://1.bp.blogspot.com/-aLsfVd69V_w/UDRi2Zsu5aI/AAAAAAAAAzA/KQVwQ-GBcVE/s1600/MBT+Stay+Connected+GOOGLE.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://ashutoshthehacker.blogspot.com' style='text-decoration: none;' target='_blank'><font color='#848484' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

> Replace the highlighted text with your own profile links.
> Now, click SAVE TEMPLATE.
Keep visiting for more tips and tricks. Subscribe to my updates using the subscription box below.