How to add E-mail subscription in blog ?

How To Add Stylish Feedburner Email Subscription Widget To Blogger?

     

1. Go To Blogger Dashboard -> Add Gadget -> HTML/JavaScript

2. Paste the following code into the box [It's better to add this widget in footer area]

<div id='footer-newsletter-wrap'> <div id='footer-newsletter'> <h2 class='title'>Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2> <span>(Get fresh updates in your inbox. Unsubscribe at anytime)</span> <div class='newsletter-inner'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=Your name", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'> <input class='newsletter-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td> <input class='newsletter-submit' type='submit' value='Subscribe'/> </td> </tr> </table> <input name='uri' type='hidden' value=Yourname'/> <input name='loc' type='hidden' value='en_US'/> </form> </div> </div> </div> <style> .newsletter-inner { margin-top:15px; } .newsletter-inner .newsletter-address{ color:#fff !important; width:100%; font-size:16px; border:0; background-color:#2B4052; padding:20px 0px 20px 25px; border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .newsletter-inner .newsletter-submit{ width:100%; margin:0px 0px 0px 29px; border:0; background:#a3d14f !important; color:#1E2D3A; font-size:16px; z-index:0 border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-weight:bold; padding:20px 20px 20px 20px; } .newsletter-inner .newsletter-submit:hover{ background:#93bc47 !important; } .grid a, .grid a:visited {color:#eeeeee} .grid a:visited {text-decoration:underline} .grid a:hover {color:#cccccc} #footer-newsletter-wrap { background:#1E2D3A; margin: 0 0 0 0; padding: 50px 0 60px 0; } #footer-newsletter-wrap a { color:#66665f; } #footer-newsletter { color:#5b5b5e; width: 520px; margin: 0 auto; } #footer-newsletter h2 { margin: 0px 0 10px 0; padding: 0; border-bottom: none; font-weight: bold; text-transform: none; color: #fff; font-size: 26px; text-shadow:2px 2px #151f28; } #footer-newsletter ::-webkit-input-placeholder { color: #fff; } </style>

3. Replace Your name with your feedburner Id

4. Save it

      Widget Installed!

How To Add Beautiful Email Subscription Widget Below Every Posts In Blogger?

The same email subscription widget can be added below every posts in blog which will give you an opportunity to gain more subscribers to your blog.

1. Go To Blogger Dashboard -> Template -> Edit HTML

2. Search for ]]></b:skin> and paste the following code before it

.newsletter-inner {
margin-top:15px;
}
.newsletter-inner .newsletter-address{
color:#fff !important;
width:100%;
font-size:16px;
border:0;
background-color:#2B4052;
padding:20px 0px 20px 25px;
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.newsletter-inner .newsletter-submit{
width:100%;
margin:0px 0px 0px 29px;
border:0;
background:#a3d14f !important;
color:#1E2D3A;
font-size:16px;
z-index:0
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font-weight:bold;
padding:20px 20px 20px 20px;
}
.newsletter-inner .newsletter-submit:hover{
background:#93bc47 !important;
}
.grid a, .grid a:visited {color:#eeeeee}
.grid a:visited {text-decoration:underline}
.grid a:hover {color:#cccccc}
#footer-newsletter-wrap {
background:#1E2D3A;
margin: 0 0 0 0;
padding: 50px 0 60px 0;
}
#footer-newsletter-wrap a {
color:#66665f;
}
#footer-newsletter {
color:#5b5b5e;
width: 520px;
margin: 0 auto;
}
#footer-newsletter h2 {
margin: 0px 0 10px 0;
padding: 0;
border-bottom: none;
font-weight: bold;
text-transform: none;
color: #fff;
font-size: 26px;
text-shadow:2px 2px #151f28;
}
#footer-newsletter ::-webkit-input-placeholder {
color: #fff;
}

3. Again search for <div class='post-footer-line post-footer-line-3'> and paste the following code after that line

<div id='footer-newsletter-wrap'>
<div id='footer-newsletter'>
<h2 class='title'>Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2>
<span>(Get fresh updates in your inbox. Unsubscribe at anytime)</span>
<div class='newsletter-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=Your name", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<table>
<tr>
<td width='100%'>
<input class='newsletter-address' name='email' placeholder='Your Email Address' type='text'/>
</td>
<td>
<input class='newsletter-submit' type='submit' value='Subscribe'/>
</td>
</tr>
</table>
<input name='uri' type='hidden' value='Your name'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</div>

       

4. Again replace Your name with your Feedburner Id

5. Save it

How to add YouTube subscription in blog ?

Click here for SEO tools
Click here for more Tips
Click for blogger templates
Click here for blogger tools

Links to this post

Create a Link - Click here