Add a Stylish Feedburner Email Form Below Blog Posts – Blogger - iReporter News Network | No #1 News Network in the world.

Post Top Ad

Add a Stylish Feedburner Email Form Below Blog Posts – Blogger

Add a Stylish Feedburner Email Form Below Blog Posts – Blogger

Share This
One of the traits of successful bloggers is their ability to turn visitors to subscribers. As a blogger, you need to build your subscribers list so that they will always get to know whenever you post new stuffs on your blog in their inbox even when they are not online. Using this method will help you keep your blog visitors as readers and also increase your blog traffic. The best and proven way to do this is to add a styled feedburner email subscription form right under your blog posts

styled-feedburner-email-subscription-form
A styled feedbuner widget has been designed for blogger/blogspot blogs along with social media buttons. With the presence of the social media buttons, you will be building your Facebook fans, Twitter followers and Google+ circle alongside your feed subscribers.

As a blogger, before you can add the styled feedburner widget to your blog, you must have burnt your feed with feedburner and have a URL ready. If you’re new and haven’t burn your feed with feedburner, it’s easy, you can register for a feedburner using your Google account by following the steps outlined below:

1. Go to feedburner.google.com, login and on the start page, burn your feed and your feed address should look like this – http://your-site.com/feeds/posts/default
email-subscription-form-with-social-media
2. On the next page, you need to configure the feed, enter your desire name and note the unique address. Follow the next steps that follow to activate the feed.

How to Add the Styled Feedburner to Blogger

1. Login to your blog dashboard
2. Go to Template.
3. Then search for <data:post.body/> but if you’re seeing more than one <data:post.body/> in your template, then search for <div class='post-footer-line post-footer-line-1'/> or <div class='post-footer-line post-footer-line-3'>. Make use of Ctrl + F to search for it.
4. Immediately after the code, paste the code below:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6n7dQIlYawn8SgDrU-PGAea42edH6cyTZKeqTXp4C87cS4FxGIvzKd5FgFSumjN-GGT5GL5CWnByJvUr0LUkkI_E8BeYqmA7CpmIC4KraFwdLgGccXeb1uAztNxzbHCLYfd2sKNzLzQ-/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=iReporterng&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='iReporterng'/>
<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/iReporterng' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PJNm1DskhqTrhYPX0XvdNpvAoLK08DUwcd20GKIbDF_kxv_gMOTp3s1W_Vvz2WBpDSf8ollehqUyhMc8FRcIjFWUL4l-BxrE6pprcoCyM4vMyy8HBX-328l5Ep0mL05FX8-QtmQlKIw/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/xxxxxx' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8YnPcVxONepeMcvrI5HPIYU9id275h7qePYwoBjAoVc-he8aXZ1XK0V-71q1gycgM0yHeFxOGdfm1Ly3BwfTPfFdBbQV9fkpTNm3eObPpNOwqXvHcwyMt6SoxEgMTEFUPBEgIv-9aVqE/s1600/twitter-30×43.png'/></a>
<a href='http://www.facebook.com/xxxxxx' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LLpIpTLmACEnPnJvX6PxyphTqeXXS3EN__l1lKghwqbi082wlW8ipi5Kuo2s5lDa4eeHtyMYjOyhKWpkV7SrFJobUuhjmyUnudtJIz7O4ayhM7slJpAUlKcwUfCMIvpfRGam_tw2epA/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/1***************/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBZC6h3iAtYqtqeBX14l_IQIF7QNPl9C3SmX_jy0o4Mzq0c3X3a27EFhVqiklgmn0vXu6dnjbt65DOJFmiTEiNbbnUqXhGXToU_yUAOqnn4wj8UTHx7dNFX0XhxNXESCzleNeh27HrTE/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.ireporterng.com/2012/05/add-stylish-feedburner-email-form-below.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>
5. Now save your template and view your blog to see the new feedburner email subscription form below your blog posts.

What you Need to Change in The Code

http://feedburner.google.com/fb/a/mailverify?uri=iReporterng – this should be replaced with your own feedburner email subscription link. .
JustNaira – this should be replaced with your feed title. You can get your feed title at the end of your subscription link url.
http://feeds.feedburner.com/iReporterng – this should be replaced with your feedburner link.
http://twitter.com/xxxxxx – this should be replaced with your twitter profile link.
http://www.facebook.com/xxxxxxx– this should be replaced with your Facebook profile or pae link.
https://plus.google.com/1***************/ – this should be replaced with your Google+ profile link.


     Advertisement - Call: 08084469599
To Feature Here (Call: 08099554484) - Artist of the week

All rights reserved. This material and any other material on this platform may not be reproduced, published, broadcast, written or distributed in full or in part, without written permission from IREPORTER NEWS NETWORK.

Do you want to write for us? If "YES", CLICK HERE TO REGISTER. To have an article/iWitness content published on our platform, email: ireporterng@gmail.com

input.email { box-shadow: none; border-color: #eaeaea; height: 55px; font-size: 19px; }
Socialize With Us On:

Twitter: @iReporterNG
Facebook: @iReporterNG
Vimeo: @iReporterNG
Dribbble: @iReporterNG
Youtube: @iReporterNG
Google Plus: +iReporterNG
BBM Channel Pin: C00224051

No comments:

Post a Comment

Subscribe to our publication. Do not miss out on any information.

Join us on Facebook:
https://facebook.com/ireporterinternational

Follow us on Twitter:
https://twitter.com/ireporterng

Post Bottom Ad