Add 'Email Newsletter' Widget Under Every Blogger Blog Post

With E-mail Newsletter using Feedburner or any other newsletter subscription service is a great idea to engage with your blog readers through email. Visitors can subscribe to your blog via E-mail newsletter and they will get updates from your blog regularly directly in their E-mail inbox.

If they submit their email address in subscription form and then verify it by going to their email and click a small link and that’s it he/she becomes your subscriber but now thing comes is how to get visitors subscribe to your email updates. You need to add a stylish newsletter boxes to your blog. This subscribe box will be rendered under blog posts, so that after reading article the visitors can easily subscribe to your blog. But before we start you need an feedburner account.

Our Previous Subscription Widgets

1. Add A Beautiful Subscription Box To Your Blogger Blog
2. Add Beautiful Email Subscription Box V2 In Blogger Blog
3. Blogs Daddy's Social Subscription Widget For Blogger & WordPress

Live Demo

How to Add 'Email Newsletter' Widget Under Every Blogger Blog Post

1. Go to Blogger Dashboard > Template > Edit HTML > Proceed > Expand Widgets Template

2. Now Press Ctrl + F and Search For ]]></b:skin> Tag and Paste Below Code Above it.

<!-- Email Newsletter Widget by BlogsDaddy.com -->

.box_newsletter {width:647px;font-size:18px !important;background:#F7F7F7 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmC2N5BtwFcq_tjqu772QkRlJg4Zxlm-BGaora2SX-0avWpgDaoElw1iB35cApkm06EYQNCJPwEP-FbfhuzWb_2XrqXiNJtQct9B_YO4j_BC7b-OcaIS4cdE-K99Y4zb9CHR2IUop59yV/s1600/blogsdaddy-newsletter.png") no-repeat;border:1px solid #e2e2e2 !important;clear:both;

margin:10px auto !important;padding:50px 10px 15px;}

.box_newsletter h3 {color:#444;font-size:0.915em !important;font-weight:inherit;}

.box_newsletter h3 {font-size:16px !important;font-weight:700;margin:12px 0;}

.box_newsletter li {list-style:none;margin:1em 0 0 !important;}

.box_newsletter a {color:#A80000;margin:0 !important;}

.box_newsletter strong {font-size:16px !important;color:#2780c7;}

.box_newsletter input {font-size:14px;color:#333;height:18px;margin-top:10px;width:490px;padding:5px;margin: 10px -6px 0 0;}

.box_2 {width:550px;background:#F9F4F5;border:1px solid #e2e2e2;}

.comentarios-form .botao,.box_newsletter .botao,.botao {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioCSusycyjQRPF7Es1gT35k1ydfcm4a_tGV0-mMHaJDBl6b1oUrzkNmKSXzN5dADK8XfvxWBSl9I11EFDreJgzdVMCMjSUXQI6Wx99kkorhxT-VY5ufblnyHbQR0XH18WPpK_7kGpbUw/s1600/blogsdaddy-button.png") 0 0;border: 1px solid #2780c7;color: #fff;cursor: pointer; font-family: PT Sans Narrow !important;font-size: 14px; font-weight: 800;padding: 5px; text-decoration: none;width:140px;height:32px;}

.box_newsletter .botao:hover,.botao:hover {background-position:0 -31px;text-decoration:none;}

<!-- Email Newsletter Widget by BlogsDaddy.com -->

3. You have successful pasted the CSS code. Now follow given steps to add this gadget under every posts to get more readers.

4. Search For This Line In Your Blogger Template <div class='post-footer'> and Paste The Given HTML Code Just Above <div class='post-footer'>

<div class='box_newsletter'>

<h3>Receive News From The Blog In Your E-mail</h3>

<p>Sign up and receive directly in your email. <strong>Its free!!</strong> Enter your email address and then confirm to begin receiving exclusive news from <strong>Blog!</strong></p>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=#&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>

<input id='form_email_newsletter' name='email' onclick='this.value=&#39;&#39;;' type='text' value='Enter your email address here...'/><input class='botao' type='submit' value='Register'/><input name='uri' type='hidden' value='BlogsDaddy'/><input name='title' type='hidden' value='BlogsDaddy'/>

<input name='loc' type='hidden' value='en_US'/></form></div>

<div style='border-bottom:1px dotted #F2F2F2; margin-bottom:8px; padding:0px 0px 4px 0px; clear:both;'></div>

Remember Notes - Replace "BlogsDaddy" with your own Feedburner username.

5. Now, Save you template and it's all done.!! If you want to add this widget in HTML/JavaScript Widget then follow below steps:

• Go to Dashboard > Design > Page Elements
• Click On Layout Tab -> Add a Gadget -> HTML/JavaScript Widget
• Copy Given Code and Paste In This Widget

<div class='box_newsletter'>
<h3>Receive News From The Blog In Your E-mail</h3>
<p>Sign up and receive directly in your email. <strong>Its free!!</strong> Enter your email address and then confirm to begin receiving exclusive news from <strong>Blog!</strong></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=#&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input id='form_email_newsletter' name='email' onclick='this.value=&#39;&#39;;' type='text' value='Enter your email address here...'/><input class='botao' type='submit' value='Register'/><input name='uri' type='hidden' value='BlogsDaddy'/><input name='title' type='hidden' value='BlogsDaddy'/>
<input name='loc' type='hidden' value='en_US'/></form></div>
<div style='border-bottom:1px dotted #F2F2F2; margin-bottom:8px; padding:0px 0px 4px 0px; clear:both;'></div>

Remember Notes - Replace "BlogsDaddy" with your own Feedburner username.

• Save Widget and It's Done

You May Like To Read:

1. Create Email Subscription Form With Social Buttons
2. Elegant Email Subscription/Signup Widget For Blogger Blog

I am sure this widget will help you to increase your blog subscribers. Any questions or suggestions are welcome via comments. Stay Blessed and Keep Blogging..!! See you soon with more widgets and interesting tutorials.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.