How to Add Stylish Feedburner Email Form Below the every Blog Post ~ Blogger Tips| Tricks| Widgets

How to add Stylish Feedburner form below the every post I recommend to put this widget under your blog posts. Before adding this Subscription box to your blog/ website, make sure you have a Feedburner account and other social media accounts.

Get the above widget.

Steps.

Login to your Blogger Dashboard.
Click the drop-down menu and select Template.
Backup your Template before making any changes.
Click Edit HTML ---> Proceed ---> Expand Widget Templates.
Click Ctrl+F and find the code below.

<data:post.body/>
Just below/after the <data:post.body/> paste the below code.


<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.JayRyanstyle{
padding:7px 15px 7px 5px;
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;
}
.JayRyan-email{
background:url(http://2.bp.blogspot.com/-oHGqJ1etW_M/UDRi0T2OkXI/AAAAAAAAAyw/voPqdzqf-F4/s1600/MBT+Stay+Connected+Email.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-family: "Trebuchet MS",sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.JayRyansubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
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: 5px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
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:auto;
margin:10px 0;
}
#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:#333; font-weight: bold; font-size: 22px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '>Stay Connected To Get Free Updates!</p>
<div class='JayRyan-email'>Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=askblogexpert', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='askblogexpert'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='JayRyanstyle' 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='JayRyansubmit' title='' type='submit' value='Submit'/>
</form></div>
</td>
<td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 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/askblogexpert' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-oEZz_GqHL2M/UDRi3CHsScI/AAAAAAAAAzE/qWreXE68iYI/s1600/MBT+Stay+Connected+RSS.png'/></a>
<a href='http://twitter.com/askblogexpert' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://3.bp.blogspot.com/-cL30fvGY-dA/UDRi34t3MBI/AAAAAAAAAzM/zLP4j1qEN-k/s1600/MBT+Stay+Connected+TWITTER.png'/></a>
<a href='http://www.facebook.com/askblogexpert' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-l3b6Kgx6Hgg/UDRi1LUyXEI/AAAAAAAAAy0/0q-yrdGS_HA/s1600/MBT+Stay+Connected+FACEBOOK.png'/></a>
<a href='https://plus.google.com//b/103854525530233209575/103854525530233209575' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://1.bp.blogspot.com/-aLsfVd69V_w/UDRi2Zsu5aI/AAAAAAAAAzA/KQVwQ-GBcVE/s1600/MBT+Stay+Connected+GOOGLE.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.moreblogtools.com' style='text-decoration: none;' target='_blank'><font color='#848484' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

Things to change in the above code:

http://feedburner.google.com/fb/a/mailverify?uri=askblogexpert – 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.
askblogexpert– Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is askblogexpert as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=askblogexpert
http://feeds.feedburner.com/askblogexpert – Replace this with your feedburner link.
http://twitter.com/askblogexpert – Replace with your twitter profile link.
http://www.facebook.com/askblogexpert – Your facebook page or profile link here.
https://plus.google.com/b/103854525530233209575/103854525530233209575 – Replace with your Google+ profile link.

I hope you find lot of thing with this tutorial ,Make sure "Subscribe by Email" and share with your friends for more posts and get more tutorials in your mail box.

Posted in: Blogger Widgets

Blogger Tips| Tricks| Widgets

Find us on Facebook: