Add a Stylish Email Subscription Form below Blog posts

Without any readers and subscribers blogs are meaningless. In order to increase your readers and subscribers you should have an option to let people subscribe for your updates. Placing an Email Subscription form is an amazing idea to increase your subscribers. You can place a form anywhere in your blog layout and one of the most effective position is just under your blog posts.

Most of the bloggers use FeedBurner in order to send updates to readers or subscribers. Adding a stylish FeedBurner email subscription formbelow your posts can bring you a good amount of Subscribers. And you will get double benefits if you add your social profiles along with the form. This can also increase your Facebook fans, Twitter followers, Google+ circles. Check out the form below that comes with Social profiles.

Before adding this Subscription box in your blog make sure you have an FeedBurner account and other social media accounts.

How to Add Stylish Feedburner Email Form Below Blog Posts

You can do this by editing your single.php file. But that’s a difficult way to do this. Moreover you may mess up your codes and your blog will be broken.
So here is an easy way to get this done. You can use Post Layout Plugin to do this. On one of my previous posts, I wrote on how to use Post layout WordPress plugin.

Here is the code you will have to use to Insert Stylish Feedburner Form below your posts:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(http://roadtoblogging.com/adimages/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:2px 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;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
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: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
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:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#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:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px; '>Get Updates on Your Email!</p>
<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=roadtoblogging;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='roadtoblogging'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' 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='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 12px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/roadtoblogging' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://roadtoblogging.com/adimages/rss.png'/></a>

<a href='http://www.facebook.com/roadtoblogging' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://roadtoblogging.com/adimages/fb.png'/></a>

<a href='http://twitter.com/istiaak' rel='nofollow' target='_blank' title='Follow me on Twitter'><img src='http://roadtoblogging.com/adimages/twitter.png'/></a>

<a href='https://plus.google.com/104279174365203057634/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://roadtoblogging.com/adimages/g.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://roadtoblogging.com/add-a-stylish-email-subscription' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

Now follow these steps:

  • Install Post layout plugin.
  • Go to Settings > Post Layout
  • Paste the code in the box named After the Content
  • Save the settings.

Important changes in the code:

  1. http://feeds.feedburner.com/roadtoblogging – Replace this with your feedburner link.
  2. http://twitter.com/istiaak – Replace with your twitter profile link
  3. http://www.facebook.com/roadtoblogging – Your Facebook page or profile link here
  4. https://plus.google.com/104279174365203057634/ – Replace with your Google+ profile link

You are done. Now check your blog. All of your posts will have a Stylish Feedburner email subscription form along with social media profiles. Let me know if you face any difficulties implementing this code.

Sharing is Caring
Istiak Rayhan
 

Istiak Rayhan is the founder of RoadToBlogging.com, a blog that aims to make bloggers' journey easier. Istiak loves to help newbie bloggers to build a better blog. Here's more about him.

15 comments