Fresh Flat E-mail Subscription Box For Blogger

Attract your visitors with this new, fresh and flat e-mail subscription box widget for blogger!

Introduction

Subscription box can be found commonly in the sidebar and below every post, but for today we'll install it in the sidebar instead of below every posts, but if you want to install it below your posts anyway, just follow the steps instructed here.

A subscription box widget helps blog owners to grow their mailing list and blog readers. However most subscription box doesn't look attractive to catch your readers' attentions. So I designed a simple yet powerful Subscription box that you can easily customize to adapt your blog's design. The more the subscriber means the easier you promote your blog contents to a huge variety of audience. Instant traffics, pageviews, shares, and comments. This is how important it is to have a subscription box, get one now in just few clicks.

External Scripts

FontAwesome (?)

HTML

Go to Blogger » Layout » Add a Gadget » and HTML/Javascript
Paste the following code inside the Gadget.

<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'></i>
<h3>Subscribe to Newsletter</h3>
<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'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button>
  </div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form>
</div>

And Save it.

CSS

Now got to Blogger » Template » Backup your Template » and Edit HTML. Search for ]]></b:skin> and paste the following code before it.

.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block;line-height:50px;text-align:center;font-size:24px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;padding:0 10px;width:60%;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9o7GrhYOgjxQr_dYRCfCwOLqMUVhJirr7o6iOdWyhXfzMGgwr4Z1XIj1sBfImjlTZk-kO3JWCwtSP_EnLZSYdUZ_6vlC4MpyTxs0NiV-AWKwHXIbsS7A493pi2N61OnR-wT0ZvKfdKU/s1600/bg.png) no-repeat;padding:20px;margin:0 -20px -20px;height:40px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;width:30%}

Save your Template.

Final Words

Replace MyBloggerAide with your own feedburner url.
Change font-family: "Maven Pro", sans-serif with your preferred font style.
Replace #00aa9f with your preferred background color.

Do some adjustments about the width if needed.
Enjoy an attractive email subscription box in your blog! Share your ideas and thoughts by leaving a comment below! Enjoy Blogging!