Add Beautiful Email Subscription Box Below The Post In Blogger

Live Demo

A Subscription box below the post works like a magnet. This is simple and flat horizontal subscription box which occupies little space on your post footer. This widget would appear in post footer so that your readers can subscribe right after reading your blog post which is the right time for call to action. So without any delay, we should move forward to the installation steps. Our widgets contain no crap backlinks. Just what you need.

Installation Process of Horizontal Subscription Box Widget:

Login to your Blogger Dashboard.

Go to Template –> Edit HTML.

Find the below code on your blogger template:

]]></b:skin>

Add this CSS before the searched code ]]></b:skin>

/* Subscribe Box */

#subscribe-box{background-color:#000d1a;margin:20px 0;padding:20px;overflow:hidden;border:1px solid #e5e5e5;

-moz-box-shadow: 0px 0px 5px #BBB; 

-webkit-box-shadow: 0px 0px 5px #BBB; 

box-shadow: 0px 0px 5px #BBB; }

#subscribe-box h4{color:#FFF;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}

#subscribe-box .emailfield{margin:auto;text-align:center;}

#subscribe-box .emailfield form {margin:0;}

#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px;transition:all .6s}

#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}

#subscribe-box .emailfield .submitbutton{background-color:#E73138;color:#fff;margin:0;font-family:'Roboto Condensed',Arial,sans-serif;font-size:13px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;margin-left:-6px;padding:13.5px;vertical-align:top;transition:all .3s}

#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#b7151b;color:#fff;}

Now we have completed adding styles of the Gadget. Now we need to add the position of this widget according to your need. You can add this Email Subscription widget any where but here we will be adding at the bottom of your blog posts because readers after reading your posts they might subscribe for your future posts also.

Find the below code using Ctrl + F.

<div class='post-footer-line post-footer-line-1'>

Immediately after the code add the below code:

<div id="subscribe-box">

<h4>

Subscribe to Our Newsletter</h4>

<div class="emailfield">

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

<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email Address..&quot;;}" onfocus="if (this.value == &quot;Email Address..&quot;) {this.value = &quot;&quot;;}" type="text" value="Email Address.." />

<input name="uri" type="hidden" value="smartpik" />

<input name="loc" type="hidden" value="en_US" />

<input class="submitbutton" type="submit" value="Subscribe" />

</form>

</div>

</div>

The text in Red colour ( Smartpik ) should be replaced by your Feedburner Name.

There is also an another way. If you don't know coding, I think this is the better way to add this widget on your blogger.

As usual Go to Layout > Add a Gadget > HTML/JavaScript and copy and paste the below code and replace the text in Red colour ( Smartpik ) by your Feedburner Name. Also move the widget to bottom of blog posts.

<style>/* Subscribe Box */#subscribe-box{background-color:#000d1a;margin:20px 0;padding:20px;overflow:hidden;border:1px solid #e5e5e5;-moz-box-shadow: 0px 0px 5px #BBB; -webkit-box-shadow: 0px 0px 5px #BBB; box-shadow: 0px 0px 5px #BBB; }#subscribe-box h4{color:#FFF;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}#subscribe-box .emailfield{margin:auto;text-align:center;}#subscribe-box .emailfield form {margin:0;}#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px;transition:all .6s}#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}#subscribe-box .emailfield .submitbutton{background-color:#E73138;color:#fff;margin:0;font-family:'Roboto Condensed',Arial,sans-serif;font-size:13px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;margin-left:-6px;padding:13.5px;vertical-align:top;transition:all .3s}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#b7151b;color:#fff;} </style>

<div id="subscribe-box"><h4>Subscribe to Our Newsletter</h4><div class="emailfield"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smartpik', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email Address..&quot;;}" onfocus="if (this.value == &quot;Email Address..&quot;) {this.value = &quot;&quot;;}" type="text" value="Email Address.." /><input name="uri" type="hidden" value="smartpik" /><input name="loc" type="hidden" value="en_US" /><input class="submitbutton" type="submit" value="Subscribe" /></form></div></div>

Finally visit any post on your blog and see the results. If any time anything goes wrong or you need to adjust its width, height or background image just ask in comments and I will help you with its complete installation. Thank You!