Add A Stylish Email Subscription Box With Social Media Buttons Below Every Posts

Now a days, having an email subscription widgets has become common as the visitors who will subscribe to our newsletter will get the notification of our new posts via email and which will contribute a huge amount of traffic. So in order to increase your subscribers and visitors you should place a email subscription widget somewhere in your blog.

Adding an email subscription widget below every posts of your blog is an awesome technique to get more followers. Along with email subscription form, adding your social profiles will help you getting more Facebook fans, Twitter followers & Google+ circles.

Before moving into the tutorial please make sure that you have read my tutorial on How To Set Up Feedburner For Blogger Blog.

Live Demo

Here is the email subscription widget in full working order; don't be afraid to click them and follow us.

Stay Connected With Free Updates! Subscribe via Email

Follow us!

How To Add A Stylish Email Subscription Box With Social Media Buttons Below Blog Posts

1) At first backup your template, so that you can revert your template back if something goes wrong

2) In Your Blogger Dashboard Click > Template > Edit HTML > Proceed > Expand Widget Template:

3)  Use Ctrl-F to find the code below:

<data:post.body/>

4) Now paste the code below immediately after the code above:

<!-- /Start Stylish Feedburner Email Form Below Blog Posts by: www.moreblogtools.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.tweaks123-email-style{
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;
}
.tweaks123-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: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.tweaks123-submit-button{
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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>Stay Connected With Free Updates!</p>
<div class='tweaks123-email'>Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Tweaks123'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tweaks123-email-style' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='tweaks123-submit-button' 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/Tweaks123' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TfhgacbgScVwUR7S_hUilVZroR2GFOK-PQZ1E9fzaVNyyq_C4KGca7Bd5eAeeEBnkMwrnvu46uDXathbl1qZKHkqIt5gGD4pmK1rAXz0s5mgUHtMBocz6o8cgLhNj966BQ45lMOfPzc/s1600/rss.png'/></a>

<a href='http://twitter.com/Tweaks123' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44F_zbPiMKCb72-G65xWXaqBghK7c84xa0LfqJ7ql3Q-LnYGIN9I6pPdyXRFDpA_Diyd-KWH-bNzLk1WxM8AWzonoP-G3aNYzHft-zWf2OkL5qpyK_TwwIbiOl9andjTwraoYM4jCopQ/s1600/twitter.png'/></a>

<a href='http://www.facebook.com/Tweaks123' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5M_fFBZL-geggRuLQkp6UZe8nv36F2mbBx7X47EHNeGZmf_jfVODZEnDVL_MDFittXVXrGpmgtssFkyRdboEAYKuMB6JvLyr0wACvAK0NROaO_Q4Hvv8PL8tP3_UlQ-ShBk1SvhchBg/s1600/facebook.png'/></a>

<a href='https://plus.google.com/117395947435425050465/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnl2JG64fCmf1W8iutmon39Gyxol4POya24CmpitjCQuimW23FGKDxoJ-KBrtg5NjaKQzGWqaD7HWQQZDblPEyb1sDt22Byg7aJlGX2zaerDnQl8mizY8Lv8UJ3ft4Xx3O91RkW44CJsQ/s1600/google+.png'/></a>

</td>
</tr>
</tbody></table>

</div></div>
</center>
</b:if>


<!-- /End Stylish Feedburner Email Form Below Blog Posts by: www.tweaks123.blogspot.com -->

5) Replace the colored sections with your social profiles and feed URLs.

That's it you have a very cool email subscribe section below you blog posts.

Drop Your Comments And Questions Below.