E-mail Subscription Box Widget For Blogger

Subscription box is one of the most common widget you can find in every blog.

Introduction

It lets us get more traffic and increase our blog readers. Subscription box also lets your subscriber know when your blog has been updated. The best place to add Subscription box is just below every blog post. I prepared 2 types of subscription box for you to choose from, one for your sidebar and the other for your blog post.

HTML

Style I - Sidebar

Go to Blogger » Layout » Add a Gadget » and Choose HTML/Javascript
 then copy the following code and paste it inside the HTML widget

<div class='newsletter-sm'>
<h3>Subscribe to Newsletter</h3>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XpW62uo7hX07-ilAXwPFAFN0VVS5VSd2CMyLMYYbxR6y7r3kgG009pasLSsn-oRG8I4gh_ewsN4SO2Wiw0uylaxIMLG5QZjKWCYXZcbF2mD2OJjgW_BEJkiDe7BWCiKLDwQoR_lYWVc/s90/mail.png'/>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='mbabutton mbabuttonblue newsletter-button-sm' type='submit'>Subscribe</button>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form>
</div>

Style II - Below every post

Go to Blogger » Template » Backup your Template » and Edit HTML
Search and look for <div class='post-footer'> and just below it, paste the following code
*you might find 2 <div class='post-footer'> in your template, the first one is for mobile version of your blog and the second is for web version. Make sure to paste this code inside the second one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='newsletter'>
<h3>Subscribe to Newsletter</h3>
<img alt='' class='pull-left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XpW62uo7hX07-ilAXwPFAFN0VVS5VSd2CMyLMYYbxR6y7r3kgG009pasLSsn-oRG8I4gh_ewsN4SO2Wiw0uylaxIMLG5QZjKWCYXZcbF2mD2OJjgW_BEJkiDe7BWCiKLDwQoR_lYWVc/s100/mail.png'/>
<div class='pull-left'>
<p style='text-align:left'>Subscribe to email newsletter for news and updates.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='newsletter-input' name='email' placeholder='Enter Your Email' type='text'/>
<button class='mbabutton mbabuttonblue newsletter-button' type='submit'>Subscribe</button>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form></div></div></b:if>

 Replace MyBloggerAide with your feedburner url.
 And Save.

CSS

Style I - Sidebar

Go to Blogger » Template » Backup your Template » and Edit HTML
Just before ]]></b:skin> add the following code

.newsletter-sm{background:#2b2b2b;width:100%;margin:0;padding:10px;height:180px}.newsletter-sm h3{color:#fff;font-family:'Maven Pro',sans-serif;font-size:24px;font-weight:700;text-align:center;margin-bottom:10px}.newsletter-sm p{font-size:14px;color:#eee;line-height:20px;font-family:'Maven Pro',sans-serif}.newsletter-sm img{margin:4px 10px 0 0;float:left}.newsletter-sm .newsletter-input-sm{font-family:'Maven Pro',sans-serif;float:left;width:200px;border:2px solid #2b2b2b;padding:8px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;display:inline-block;margin-left:-1px}.newsletter-sm .newsletter-input-sm:focus{border:2px solid #00aa9f}.newsletter-sm .newsletter-button-sm{font-family:'Maven Pro',sans-serif;float:left;width:70px;height:32px;display:inline-block;margin:2px 5px;font-size:12px}.mbabuttons{width:140px;height:48px}.mbabutton{position:relative;font-size:17px;color:#fff;text-align:center;text-shadow:1px 1px 1px #00544f}.mbabuttonblue{border:0;background:#00aa9f;border-bottom:1px solid #008d84;border-radius:3px;cursor:pointer;-webkit-box-shadow:inset 0 -1px #008d84;-moz-box-shadow:inset 0 -1px #008d84;box-shadow:inset 0 -1px #008d84}.mbabuttonblue:hover{background:#008d84;-webkit-box-shadow:inset 0 -1px #00544f;-moz-box-shadow:inset 0 -1px #00544f;box-shadow:inset 0 -1px #00544f;border-bottom:1px solid #00544f}.mbabutton:active{padding-top:2px;-webkit-box-shadow:inset 0 0 #008d84;-moz-box-shadow:inset 0 0 #008d84;box-shadow:inset 0 0 #008d84;border-bottom:0}

Style II - Below every post

Go to Blogger » Template » Backup your Template » and Edit HTML
Just before ]]></b:skin> add the following code

.newsletter{background:#2b2b2b;height:180px;width:100%;padding:20px 0}.newsletter h3,.newsletter p{font-family:'Maven Pro',sans-serif}.newsletter h3{font-weight:700;text-align:center;padding:0;margin:0;color:#fff;font-size:36px;line-height:50px}.newsletter p{color:#eee;font-size:14px;line-height:30px}.newsletter img{margin-left:30px;margin-right:20px}.newsletter .newsletter-input{font-family:'Maven Pro',sans-serif;float:left;width:350px;border:2px solid #2b2b2b;padding:8px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;display:inline-block;margin-left:-1px}.newsletter .newsletter-input:focus{border:2px solid #00aa9f}.newsletter .newsletter-button{font-family:'Maven Pr',sans-serif;width:100px;height:32px;margin:2px 5px}.newsletter .newsletter-button,.pull-left{display:inline-block;float:left}.mbabuttons{width:140px;height:48px}.mbabutton{position:relative;font-size:17px;color:#fff;text-align:center;text-shadow:1px 1px 1px #00544f}.mbabuttonblue{border:0;background:#00aa9f;border-bottom:1px solid #008d84;border-radius:3px;cursor:pointer;-webkit-box-shadow:inset 0 -1px #008d84;-moz-box-shadow:inset 0 -1px #008d84;box-shadow:inset 0 -1px #008d84}.mbabuttonblue:hover{background:#008d84;-webkit-box-shadow:inset 0 -1px #00544f;-moz-box-shadow:inset 0 -1px #00544f;box-shadow:inset 0 -1px #00544f;border-bottom:1px solid #00544f}.mbabutton:active{padding-top:2px;-webkit-box-shadow:inset 0 0 #008d84;-moz-box-shadow:inset 0 0 #008d84;box-shadow:inset 0 0 #008d84;border-bottom:0}

 Replace MyBloggerAide with your feedburner url.
 And finally, Save your template.

Final Words

 Style I is perfect for sidebar with the width of 400px or more.
 Style II fits perfectly for blog post with more than 700px in width.

Subscribe to our NEWSLETTER to get more updates! Let me know if you're facing any problems installing this widget. Have a great sunday!