Adding a Stylish Feedburner Email Form Below Blog Posts

To increase the number of your blog readers and subscribers, there’s need to include an email form somewhere in your blog layout. One of the most strategic positions that’s been proven to be effective is right under your blog posts. Including a styled feeedburner email subscription form along with social media buttons can go a long way in increasing the number of your feed subscribers. Apart from this, this widget can increase your facebook fans and twitter followers. I also included a Google+ button to make your blog readers add you to their circles easily.

Below is how the widget should look like after adding it below your posts:

how to add email subscription form below blogger posts

Before proceeding, you must have burnt your feed with feedburner and have the url ready. If you haven’t, register for feedburner with your google account and follow these steps:

1. Log in to feedburner and on the start page, burn your feed. If you’re on Blogger, your feed address should be http://your-site.com/feeds/posts/default and if you’re on WordPress, it’s http://your-site.com/feed

how to add email subscription below blog posts

2. On the next page, configure the feed, give it your desired name and note the address. Follow the next couple of steps to activate the feed.

How to Add the Email / Social Media to Blogger

To add the widget below your blog posts:

1. Log in to blogger

2. Go to Template > Edit HTML (new blogger UI) or Design > Edit HTML (old blogger UI)

3. Check the “Expand Widget Templates” box

4. Search for <data:post.body/>

If you have more than one of this in your template and confused about which one to use, search for <div class='post-footer-line post-footer-line-1'/> instead.

5. Right below this, paste this code:

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

<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(http://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
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;
}
.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: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</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=doncaprio&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='doncaprio'/>
<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: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/doncaprio' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/doncaprio' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/capriotips' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/104745456339871522709/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://geek.ng/2012/04/adding-a-stylish-feedburner-email-form-below-blog-posts.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

 
Save your template and view your blog to see the new email subscription form below your blog posts.

Things to change in the code:

http://feedburner.google.com/fb/a/mailverify?uri=doncaprio – You should replace this with your feedburner email subscription link. To get this, log in to feedburner, click on your feed. Then go to Publicize > Email Subscription. Activate and get the email subscription link under Subscription Link Code.

doncaprio – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is doncaprio as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=doncaprio

http://feeds.feedburner.com/doncaprio – Replace this with your feedburner link.

http://twitter.com/doncaprio – Replace with your twitter profile link

http://www.facebook.com/capriotips – Your facebook page or profile link here

https://plus.google.com/104745456339871522709/ – Replace with your Google+ profile link

Adding the Subscription Box to your WordPress Blog

If you can edit your single.php file, you should be able to place it below your blog posts but there’s an easier way to get this done.

– Download and install Post Layout plugin – this plugin lets you format your post pages the way you like.

– Go to Settings > Post Layout

– Paste the code in the box labelled After the Content

Filed Under: Blogger, Wordpress




Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. says

    FeedBurner is an awesome Google service! I hope it will help me a lot to build a continues flow of traffic back to my website. Don Caprio thank you for this wonderful tutorial.

  2. says

    Thanks Don. I’ve implemented it and its very nice. I’m having a problem and that’s how to burn feed. dont know how to get to the Feed burner site. Used the one you provided but it didn’t take me anywhere.

  3. Amiya says

    Pls don,how do i make an image to align to the center automatically when some one click on the post to read.when i visit ur site,i will see the caption image on the home page,but when i click to read the post,the image will be on the center after some words.pls how do i do that on blogspot.reply pls.

    • says

      I’m using WordPress, Amiya. And even on blogger, there’s no way to automatically center image in posts if you didn’t choose the image layout right from the moment you write the post. The images are centered due to the post layout I use here. But if you need to make the posts arrange as shown on the homepage, you can check this post – How To Add Automatic Post Summary For Blogger

  4. says

    Thanks Don.. Its cool.. Its there anyway i can put a line breaker to seperate it from my posts It kinda looks horrible connected 2 my post

  5. says

    Bro.. Kindly check out my post on “How To Add Stylish Feedburner Email Form Below Blog Posts”. It is not same as your post and not the same with style. I changed it now. :-) http://www.lifebeyondlimits.info/2012/05/how-to-add-stylish-feedburner-email.html JayRyan’sBlog was inviting you to be a Guest Post Author.. Thank you so much. -jayryan09-

  6. says

    Hi found your site and really like and have tried several times to do it but it’s not working. I have checked and checked to make sure I’ve typed things identically but still not working? Any advice? Thanks Kate

  7. says

    thanks for this wondaful stylish widget.nut pls i recently implemented it on my blog and i would like to reduce the width to fit my blog.any tip on that pls?

  8. says

    Hello Don, I love the styling you used. I decided to move from Mailchimp RSS to feedburner and have been looking for a quick tip like this. But it doesn’t work on my WordPress site. Any idea why? The images and all don’t show. Its not up now though, had to remove it.

  9. says

    Hey don can you tell me why i am not seeing the comment box in every post. See the recent post about facebook account delete i could not comment there. Please tell me the answer as i always try to read most of your post.

  10. says

    Hi Don, I’m browsing through this blog and your old Blogspot blog and I’m finding very useful information. But I’m wondering how to add a MailChimp form? Actually I’m writing an eBook which I wish to give away for free in exchange of people’s emails. So I want to add an email opt-in form at the end of every post along with a picture of the cover page of the book. Possible?

      • says

        Actually I tried what you said and it worked. Thanks! But I still have a problem. Adding the code this way is showing the form even when the post is displayed in the “shrinked” form on the home page. I mean I use “Click here to read more” links in my posts and I want the form to appear only when the complete page of a blog post is opened, not when all the posts are displayed on the home page. I mean I want the form to appear as it appears on YOUR Blogger blog.

        • says

          Actually I got it. It’s from the “if-condition” tag. Thanks anyways. It’s working fine now. Though I’ll use it only after giving some tweaks to the form. Really helpful blog. Keep up the good work.

          • says

            Hi Don, It worked fine a few days back when I posted the above comment. Then I removed the code as I thought I’ll use it after a few days. But now when I’m trying to do that, it isn’t working. When I hit the “Preview” button after adding the code it says: “Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Attribute name “novalidate” associated with an element type “form” must be followed by the ‘ = ‘ character. Error 500″ Though the same code is working when I place it in my side bar. The form appears there. But not when I place it after in my template. What went wrong? I must add it’s not just a HTML code, but it also has some JAVA and CSS.

          • says

            Something is definitely wrong with the placement of the code or something. I really can’t tell but you should check it along with those you already have there before.

  11. says

    Your widget is very nice, but when the form is used from within the body of the template, like below each post, the feed burner form doesn’t load. Instead the page just refreshes. Is there any way to get the feed burner form to correctly load ? Please see http://lastingrose.blogspot.co… I have the same trouble with many others I tried including the one I have there now which works fine as a widget at the top. Can you suggest what may be wrong. There are of course a few other stuff on the page like FB comments etc but I find no reason . Many thanks.

      • says

        Hello Don, Many thanks for looking up. The code I have there is exactly same as yours which also did not load the pop up when embedded in the body of the template. It works from a seperate widget though like te one at the top of the page. Here is the code

          • says

            Yes Don Of course, the top one is a widget and it works. A new widget on the right border of the page I added today also works. But the one embedded at the bottom of post only (not on home page) doesn’t work.

  12. says

    Very useful tutorial, Don. However, Can I use the same code for my WordPress blog or I need to modify it? Because, I see some XML tags in it.

  13. says

    email subscription widget is necessary for the loyal traffic , it is also important from the perspective of search engine optimization.your widget is auxiliary and behaving correctly at work.as we know a blog is known by the number of its subscribers and loyal traffic.well you got one more subscriber and it is me.nice work keep it up.

  14. says

    It really makes sense to use on any type of blog. The reason why I even like it is that it shows up on mobile version of sites if you use post layout to display it. Makes sense.

  15. says

    Bro, I want to make the email Subsciption box to be little wider, it looks ugly as my post area is has more width than this widget. By the way I liked your Subscription box that you have used in your blog, Can you give me code?

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)