Ad 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:
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:
<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7cEX4x4jwbLCz5WLSKX9OLFKV-nOUU5hCOSog-nZ-074bXQTBZ1owa8UX9rwJ_W1U9qbXpeqQGTF_-sGNpRf_nnI8ZTrsB4jKshbezIRIBcQtebfBSZgpUJROPhafQDvKL_jj4sg2TR5/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpCdrxj0z5QGjiKljsBt387FW8WMePGOyQTno2uUsgoV_kaUwoQRC9nmKr7w9BB_I1cs798fSP-ahjWYQfWRPRqWn1vyFr-nPtZ1MUopzVlL8VGI2lF4qZT2yzM2qNx3nB9KhDYMPrwf0/s1600/rss-30×43.png'/></a>
<a
href='http://twitter.com/doncaprio' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGEYs4zKOhsnuv4_nntk1qpVyktMA46GLwQOVDg-2pphnlhgRo0SuFO0auOliVPAxKm-ZZPIs-5LnNrCF2sajtywZzwwYZeI6Jtyv_llop605CXKi1Vbw1NqJ1ZjJMI1hBCljjsT1cLU/s1600/twitter-30×43.png'/></a>
<a
href='http://www.facebook.com/capriotips' rel='nofollow'
target='_blank' title='Follow us on Facebook'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUoQO3-REPhmLqN05unCZlYYXOSbxni_hEznfmjMrtV47Dd_efdFME3H1L1BbCtqLjHX3vtqEDOGOqlAkooDNnRjSXuShyphenhyphencEKIwKpfPo196Mz4RenXVRhnK66TJB0LoT-WC5W2PDe-3IY/s1600/facebook-30×43.png'/></a>
<a
href='https://plus.google.com/104745456339871522709/' rel='nofollow'
target='_blank' title='Follow us on Google+'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizM7fKCx_ebFn9j62QKz2dh46pis1IFtfOtRNDGo6E6uvsZZjYL5A_ghUbaoZPcupoYD0_HLXg77ZPxQiz8eyBg1rb7ZCnUyj5Cai7cIgs_vMV8rAngIWCqmQ_RFTH-DwUliYVOy7-J_M/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
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