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:
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
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:
<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='#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: 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('http://feedburner.google.com/fb/a/mailverify?uri=doncaprio', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' 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://www.doncaprio.com/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
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.
Alex Geeks recently posted..Blog Commenting
I am so excited about this Feedburner tool I will make an experiment today very interested to see the results.
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.
You only need to register through this link – http://feedburner.google.com/ – and follow the guide in the first part of the guide.
Don Caprio recently posted..Dolphin Browser HD v8.0.0 Final – Best Android Browser
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.
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
Twitter: edi4all
says:
This is so Cool bro, been looking for a master piece like this
Checked your blog now and saw it sitting below your blog posts. Looks cute
Don Caprio recently posted..Stop CISPA – A Nightmare Worse than SOPA and PIPA
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
Derek recently posted..Belle TopBar For s60V5 Symbian ^1
Still No Reply
Sorry I’ve been a bit tied up lately. Search for <center> in the code and add <br/><br/> just before it.
Ok thanks Im Grateful
Derek Odum recently posted..How to Change Templates On Blogger
Hi Don Caprio, That’s awesome work. Keep it up.
Mukesh recently posted..To Bloggers, Online HTML Meta Tag Generator Tool For Google
Its a great widget brother, thank you for sharing
Manual recently posted..Windows 8 Metro New Tab Page for Chrome Browser
thanks for the post.
you are really the Don
Twitter: healthabeHQ
says:
don i did not work on my site using the page layout plugin
kingsley recently posted..Genetic Clue To Origins Of Pancreas Cancer
Twitter: xlimderek
says:
It works great for me
Derek recently posted..New Etisalat Cheat For Pc and Mobile phone.
Thanks for the tutorial, the feedburner form looks stylish indeed
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-
JayRyan’sBlog recently posted..Benefits Of Having Bathroom Shower Enclosures
Thank you so much doncaprio for this plugin.
It works great in my website
webreaker recently posted..Your Acne and the Society
Tnx bro,am trying it..
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
Hi Kate,
I checked your blog just now and saw the widget. You got it working already.
thanks for your reply. Before I saw your reply I fiddled with blog and uploaded saved template so lost everything I did. I shall try again now. I’m new to all this :0)
I’ve just done it all again and still can’t see it? I may have done it wrong this time or I’m going mad?
I checked just now and it’s gone. But you should note that it’s only going to appear on post pages… you got it right the first time cuz I did see it.
Twitter: divyanshojha
says:
oh! no… now i will have to do this too…
My site is getting heavier day by day….
Divyansh recently posted..Make Free Calls To Any Mobile Using PC Internet Connection
Twitter: xlimderek
says:
Don i seriously want to reduce the width..
what do i edit?
Thanks
Its nice thanks for sharing it………………
Thats very essential to have stylish Rss feed.
Prakash recently posted..Facebook for Android | Android apps | Facebook app for android | download Facebook app
Woow thank you so much for sharing this. You are the best, thanks to you my blog now looks much more better much more professional! Really appreciate!
God bless you
Pro Sound And Vocal Editing recently posted..Native Instruments Massive Review & Download Free Demo
Working Great .. Added to My site , thanks mate
Vinod recently posted..Power Of CTRL KEY in Microsoft Keyboard Shortcuts – Pc and Laptop Tips
You’re welcome, Vinod.
Nice one Caprio — I’ve added it, but on my header instead. See it on my site header Tutorials on Business in Nigeria
Dan recently posted..Waste Pure Water Sachet – How to Make Over 10Million Naira Annually Supplying It In Nigeria
You’re welcome, bro.
I was looking for ShoutMeLoud’s like subscription widget, but yours a better one. Thanks for it!
Sk recently posted..Get free Ncell or NTC balance by adding friends to a Facebook group!
Thanks for dropping by, SK. Glad you like it
Twitter: ebimablog
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?
ebima recently posted..HOW TO BROWSE WITH AIRTEL BIS ON PC
Twitter: prem82
says:
Thanks for the tip. I am gonna include that in my blog
Premkumar Masilamani recently posted..Building the Perfect Physique – Tip 4: Weight Loss with Mind Movies
Twitter: divyanshojha
says:
hi don i tried adding it to genesis theme using both post layout and genesis hooks plugin but didn’t work…
Divyansh recently posted..Overclock AMD Graphic Card using ATI Catalyst Control Center
Twitter: divyanshojha
says:
hey don…i just figured that it was because of the W2 total cahce, i had to clear the cache to get results.. prob is solved
divyansh recently posted..How to Effectively use Windows Task Manager
Ah.. I see
Twitter: Rlagunzad
says:
Hey don, Thanks for this one dude. I have already applied it to my blog at http://houselements.blogspot.com…cheers!
Houselements recently posted..A Two-Day Food Trip on my 26th Birthday
Twitter: ososoba
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.
Osaze recently posted..Install wordpress in a few steps with cPanel
Hi Osaze,
I’m pretty sure the widget will show up if you used Post Layout plugin. How did you add it?
Twitter: dailyschoolnews
says:
thanks DC, is there any subscription plugin for wordpress users
post utme 2013 recently posted..Hello world!
There should be but the Feedburner subscription plugin I used below posts comes with Genesis.
Twitter: nigeriaschools
says:
don, is there any other free alternative to feedburner?
thanks and waiting for your reply.
Yes, there are. You may want to take a look at this: http://voices.yahoo.com/5-alternatives-feedburner-why-consider-11812313.html?cat=15
Twitter: clixseo
says:
hello DonCaprio, i find your blog articles really interesting, please since google will soon stop feedburner adsense in feeds, is there any other options for us?
movie online recently posted..Working Free Video Editor For Symbian Mobile Phones!For s60v3 and s60v5 Edition!
Right now, I don’t think there’s is an option.
Trying this on my new blog. hope it works for me just like others. I may edit the code thou
Twitter: jimmieluthra
says:
Thanks for sharing this post, It really helped me.
Jim Luthra recently posted..BigRock .ORG Domain for Rs.299 with Free 5 Page Website
Hi Jim,
Glad you like it.
Twitter: kibria_hossain
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.
kibria recently posted..Forum posting Jobs at Microworkers.com | Microworkers blog
Perhaps it’s under the wrong data:post.body.
Can u try adding it under post-footer-line instead?
Twitter: clixseo
says:
wonderful sir, pleaseis aweber free?
make money online recently posted..Liberty Reserve As An Online Bank, Advantages & Dis-advantages| Make Money Online
I really don’t know. Never used it.
Twitter: cybernaira
says:
Thanks don,i followed your instruction and exactly ,just add the feedburner to blog.thanks.
Twitter: hybridtweakss
says:
Thanks dude you sharing this stylish subscription box. I really like your blog.
Anshul Singh recently posted..Apple phone In 2013 – Diversification Strategy And Low Cost Products At Top Of List
This post really help me. Thanks Don. http://www.luqnet.com
Luqman recently posted..20 Windows 8 keyboard shortcuts
Twitter: newsclerks
says:
great widget
I would like to ask you,how can I put an image for the background please, many blogs has one
thank you
Twitter: newsclerks
says:
I would like to ask you,how can I put an image for the background?
Sadek recently posted..Samsung Galaxy Note 10.1 Jelly Bean Update available now
You have to edit this div ID: #emailwidget-outer
and edit the background css with your image URL.
Twitter: luvnecom
says:
This is what i was looking for!
Thank u so much! (:
Twitter: thescript102
says:
doesn’t work for can you help me please because this is not the first i try and doesn’t work
anis recently posted..Make Money Clicking on Ads 3 Best and Legit Sites ( part1)
Twitter: eridesktop
says:
thanks, but is this working for wordpress..??
Twitter: acep_outsiders
says:
so cool so easy and so seo friendly for visitor.
Nice sharing my friend. I do like it if you visit my blog Acep-Computer
Acep Derby Yudha Anggara recently posted..Cara Gampang Membuat Recent Comment Dengan Avatar
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?
Yes, it’s quite possible. So far you have the code HTML code already, just put it under data:post.body and I’m sure it’ll show up.
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.
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.
Farhan recently posted..10 reasons to self-publish your book
I was about pointing that out, Farhan. Thanks for the compliment as well.
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.
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.
Twitter: tha_yunggenius
says:
worked… thanks Don
wilson recently posted..Top 3 Reasons why the samsung galaxy s3 is so special
Twitter: dailyschoolnews
says:
Thanks for the stylish feedburner for blogs, you’ve outdone yourself again Doncaprio.
i love Your blog.
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.
Shred Pillai recently posted..Is Sonia Gandhi a Real Indian Saint Accused as an Italian Carpet Bagger?
Hi,
I checked your blog now to understand the issue but the widget isn’t there.
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
Shred Pillai recently posted..Is Sonia Gandhi a Real Indian Saint Accused as an Italian Carpet Bagger?
The code won’t show up here but when I tried entering my email into the subscription box at the top, it worked just fine.
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.
Shred Pillai recently posted..Is Sonia Gandhi a Real Indian Saint Accused as an Italian Carpet Bagger?
it is really great post thaks for sharing…admin
this is good but i want a form without social buttons
WordPress Themes recently posted..Frisco for BuddyPress Download Free WordPress Theme
Thank you Don, It is all working well now on Lastingrose Posts !
Shred Pillai recently posted..Is Sonia Gandhi a Real Indian Saint Accused as an Italian Carpet Bagger?
Great, Shred. Glad you got it working at last.
Can you to tell how to add this in wordpress???
Junaid Abbas recently posted..Ayesha Khan’s Complete Profile, Biography and Images
Twitter: lizeehelene
says:
GReat post!! This is what i was waiting for
Lizee Helene recently posted..Spring Breakers
Thank you so much! I added this and changed a little to my blog in wordpress! Awesome stuff!
Sook recently posted..Chocolate Chip Cake
Twitter: dotun4luv09
says:
Though am a constant visitor of this blog but never take time to try dis on my blog if not tonight, Thanks in million
ADESANMI ADEDOTUN recently posted..How to recover formatted drive(s) data?