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.
<data:post.body/>
Just below/after the
<data:post.body/> paste the below code
.
<!-- /Start Stylish Feedburner Email Form Below Blog Posts by:http://askblogexpert.blogspot.com -->
<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>
<!-- /End Stylish Feedburner Email Form Below Blog Posts by: http://
askblogexpert.blogspot.com -->
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.
Posts
