How Add Premium Email Subscription Box Below Blogger's Post

When you visit some websites, you might have noticed how the author is requesting you to subscribe via email address either by the mechanism of popping up or through sidebar widget or even below posts widget.

Ever wonder, why they are adding the same widget again and again? A simple answer: To increase their email subscription count. In this new era, email marketing is a good way to promote your content to keen readers. Let's take everything step by step.

So, what is an email subscription box widget?

An email subscription box widget is a plugin that allows readers to subscribe to a website for latest contents via their email addresses. If that website publishes new content, the subscribed readers receive a notification about it along with the full detailed article (in most cases, of course)

Blogger and WordPress have their default email service. Moreover, you can use online email service providers like MailChimp, MailGet, Constant Contact, Aweber, Convertkit and so on. We won't go through them but stick with the default email service. For this article, we will primarily focus on the blogger. 

Blogger.com provides a service named "FeedBurner" that delivers content to all subscribed readers of a blogger blog. Of course, you need to enable email subscription option from its layout.

Once enabled, you can add a code that displays an email subscription box on the sidebar or below posts. However, the available email box is obsolete and does not match with most of the blogger designs.

The solution to this is simple: We will re-customize the email a subscription box with pure CSS and give it a premium look.

Excited? I'm too!

Let me guide you through how the will article will flow: First of all, I'll guide on how to enable feed burner email subscription option, and then explain why to use email subscription box and later highlight some features of our premium email subscription box and conclude with process to be followed for adding it to your blogger blog.

How to activate Feedburner Email Subscription Feature?

• Navigate to this link.
• Select the feed where you want to enable an email subscription option.
• Go to Publicize tabgt; Seek for Email Subscription.
• Click on Activate option present at the end of the page. 
• Done.

Why to add an email subscription box in the blogger blog?

The primary purpose of adding an email subscription box to a website is to allow readers to subscribe to content.

Readers, who love reading your contents, are always keen to know more about your blog and allowing them to use their email address for receiving daily fresh contents can play a great role in developing audiences.

Moreover, it adds value to your design. Having an email subscription box in a blog can make the layout clean and professional, and also it drives positive feelings to readers, as they feel the blog is caring for them. Having a sweet message such as "We don't spam, Promise!" can add extra support. A piece of good news, we have attempted to add every minute detail to our premium subscription plugin.

Features of Email Subscription Box for blogger

There are a lot of features on this widget. I have highlighted some of them.

• Cool Design.
• Descriptive box.
• Simple Yet attractive design.
• Pure CSS.
• Fits perfectly with your blogger template.
• Retina ready design.
• Sweet Messages Added.

Live Demo of Email Subscription Box for blogger

Let's check the live demo of our plugin.

How to add responsive Email subscription Box Below blogger's posts?

Follow this simple step to add our email subscription box to your blogger posts. Don't forget to back up your blogger blog before proceeding to stay on the safe side.

Step 1: Adding the CSS Code To Blogger

CSS code adds a clean design to the email box. Without this code, who knows how the design would have looked. Anyways, follow these steps: Go to Blogger.com > Theme > Edit HTML and search for ]]></b:skin> and paste the below code just above ]]></b:skin> code.

You don't have permission to re-distribute this code. Play smart, Stay safe!

 /*** Email Box Distributed By wonderkrish.com ***/  
 /**** Developed by TwistBlogg.com ****/  
 /***** Keep the credits intact *****/  
 #subscribe-box-sbm {  
  background-color: #3F3F3F;  
  color: #fff;  
  margin: 0 auto;  
 }  
 .subscribe-box-sbm-wrap {  
  overflow: hidden;  
  padding: 4%;  
  text-align: center;  
 }  
 .subscribe-box-sbm-wrap h4 {  
  font-family: 'Tahoma'!important;  
  text-align: center;  
  font-size: 23px!important;  
  text-transform: uppercase;  
  color: #ccc!important;  
  margin: 0!important;  
  font-weight: bold!important;  
 }  
 .subscribe-box-sbm-wrap p {  
  margin: 1% 15%;  
  text-align: center;  
  text-transform: uppercase;  
  font-size: 12px;  
  font-family: 'Tahoma'!important;  
  font-weight: bold;  
  color: #7c8c8c;  
  line-height: 15px;  
 }  
 .subscribe-box-sbm-wrap input[type="email"] {  
  font-family: 'Tahoma';  
  letter-spacing: -0.6px;  
  background: #fff!important;  
  color: #999;  
  width: 70%;  
  margin: 1%;  
  height: 42px;  
  padding: 1%;  
  font-size: 16px;  
 }  
 .subscribe-box-sbm-wrap input[type="submit"] {  
  font-family: 'Tahoma';  
  font-size: 17px;  
  margin: 1%;  
  padding: 18px;  
  color: #fff;  
  background: #3b5998;  
  border-bottom: 3px solid #324b81;  
  border: 0;  
  text-transform: uppercase;  
  font-weight: bold;  
 }  
 .subscribe-box-sbm-wrap input[type="submit"]:hover {  
  box-shadow: inset 0 3px 10px rgba(0,0,0,.5)!important;  
 }  

Step 2: Adding HTML Code To Blogger

Now, we will add the HTML code. Search for <data:post.body/> and paste the following code below it. OR Search for <div class='post-footer'>  and paste the code above it.

 <div id='subscribe-box-sbm'>  
 <div class='white-border'>  
 <div class='subscribe-box-sbm-wrap'>  
 <h4>Get The Latest Post Delivered Free to Your Inbox</h4>  
 <p> Join over 1500+ people who get FREE and fresh content from this Blog. We Respect Privacy, You are Safe! No Spam!</p>  
 <form action='https://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( 'https://feedburner.google.com/fb/a/mailverify?uri=twistblogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' rel='noopener noreferrer' target='popupwindow'>  
 <input id='subbox' name='email' onblur='if ( this.value == '' ) { this.value = 'Enter your email address...' } ' onfocus=' if ( this.value == 'Enter your email address...') { this.value = '' }' type='email' value='Enter your email address...'/><input class='subbutton' type='submit' value='Subscribe'/>  
 <input name='uri' type='hidden' value='twistblogg'/>  
 <input name='loc' type='hidden' value='en_US'/>  
 <div class='clear'/>  
 <p style='font-size:10px;'>CHECK YOUR INBOX AND COMPLETE YOUR SUBSCRIPTION!</p>  
 </form>  
 </div>  
 </div>  
 </div>  

Change twistblogg with your Feedburner ID

Extra information: Adding rel="noopener noreferrer" prevents your website bandwidth from getting used by others. Also, it disallows to open any portal with your address.

Done. Quite simple, right? You have successfully added a premium email subscription box below the blogger's posts. In case, the widget is not working or not fitting properly, leave a comment and I'll endeavor to assist you. Happy Blogging.

This plugin is a part of our "Premium Blogger Plugins Series".

Guest Author

Aman Bhattarai

I am Aman Bhattarai, admin of (TwistBlogger) helping users of Blogger Platform by developing Widgets, Plugins, Template Customization Tricks and much more for free !! y