how to add an email subscription box below blogger posts

In my last tutorial, i shared a beautiful email subscription box. In this post, i am going to tell you that how you can add a beautiful email subscription



How to add?

Follow these steps to add this beautiful widget to your blog

• Log in to your blogger dashboard.
• Go to Template ==> Edit html.
• Find the following code (use Ctrl+f)

< data:post.boady/>

• Copy the following code and place it just after the above code.

< div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zPyN1N6HhqaOFoqSLbGBTUi4uE6EhR2Hu5OoRIK0PRKexZfJAQGXtidO6fnerghvYVEqnNSWkZEWy-Yv2pMA4NW0TilxCiqxSPETFySOyn7b69-_L_SIudE3X9za4aPPm_i3YjNLWkqT/s1600/post+line.png) no-repeat scroll center top transparent;width:650px; height: 2px; overflow: auto;">
</div>
<div style="margin-left:-28x;">
<br>
<h1>
<b><center><h3>Dont Miss Another Post Connect With Us</h3></center>
<div style="font-family: Century Gothic, sans-serif;Font-Size:12px;"><center> Get informed when we publish the new post.So, you have to subscribe below</center></div>
</b></h1>
<img src="http://icons.iconarchive.com/icons/fasticon/smashing-feed/128/Newspaper-Feed-icon.png" style="padding: 10px 10px 20px 0px;margin: -50px 10px 20px 0px;" align="left">
<div class="widget-content">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=fantasysurf', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="text-align: center;" target="popupwindow">
<p><input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address&quot;;}" onfocus="if (this.value == &quot;Enter your email address&quot;) {this.value = &quot;&quot;;}" style="width: 230px; border: 1px solid rgb(204, 204, 204); padding: 5px; font-size: 10px; color: rgb(67, 67, 67); font-weight: bold;" value="Enter your email address" type="text"><input name="uri" value="fantasysurf" type="hidden"><input name="loc" value="en_US" type="hidden">
<input class="hb-buttons" value="Subscribe" type="submit"></p><p>
<a href="http://feedburner.google.com" target="_blank"></a></p></form>
<center>
<p><a href="http://feeds.feedburner.com/fantasysurf"><img alt="" src="http://feeds.feedburner.com/%7Efc/fantasysurf?bg=99CCFF&amp;fg=444444&amp;anim=0&amp;label=listeners" style="border: 0pt none;" height="26" width="88">
</a></p></center></div>
</div>
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zPyN1N6HhqaOFoqSLbGBTUi4uE6EhR2Hu5OoRIK0PRKexZfJAQGXtidO6fnerghvYVEqnNSWkZEWy-Yv2pMA4NW0TilxCiqxSPETFySOyn7b69-_L_SIudE3X9za4aPPm_i3YjNLWkqT/s1600/post+line.png) no-repeat scroll center top transparent;width:650px; height: 2px; overflow: auto;">
</div>

• Change the high lighted parts.
• Click on save.

<b:if cond='data:blog.pageType == "item"'>< b:if cond='data:blog.pageType != "static_page"'> <style> .wcmain-email {background:#dcdcdc; padding:10px; border:1px solid #dcdcdc; width:430px; margin-top:20px; } .input-widget { float:left; margin-left:30px; margin-bottom:10px; font:16px arial; height:30px; width:250px; } .submit-widget { font:18px arial;;background:#111111; color:#dcdcdc; border:none; margin-left:10px; height:30px; } .submit-widget:hover { color:#ffffff; } .widget-text { font:20px tahoma; margin-top:5px; color:#000000; }< /style>< div align="center">< form class="wcmain-email" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Techlosoft', 'popupwindow', 'scrollbars=yes,width=550,height=525');return true"><p class="widget-text">Get free tips in your inbox !</p><p><input type="text" class="input-widget" name="email" onblur='if (this.value == "") {this.value = "Enter Your Email";}' onfocus='if (this.value == "Enter Your Email") {this.value = ""}' value='Enter Your Email'/></p><input type="hidden" value="Techlosoft" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" class="submit-widget" /></form>< /div>< /b:if></b:if> - See more at: http://techlosoft.blogspot.com/2013/06/add-subscription-box-widget-below-posts.html#sthash.lonsDVde.dpuf