Add Email Subscription Widget to Blogger: The Easy Way to do it!

Wanna get free targeted traffic to your blog? Here in this post, I’ve shared a complete guide on how to add email subscription widget to blogger blog and boost targeted traffic.

Before going further, let us know some of the benefits of adding an email subscription widget to your blog.

Benefits of adding Email Subscription Widget to Blogger

According to Aweber, 66% of online consumers have made a purchase as a result of an email. This single quote is enough for explaining the benefits of email marketing.

These are some of the top benefits of adding an email subscription widget to your blog:

• Adding an email subscription widget can help you drive targeted traffic to your blog.
• It helps in keeping your readers updated.
• It helps you boost the conversion rate.
• You can sell affiliate products to your email subscribers.

After all, email subscription can help you drive massive traffic to your blog & hence more revenue. So there is no reason to not using it.

How to add Email Subscription widget to Blogger?

Adding an email subscription widget to your Blogspot blog is a lot easier than you think!

You have to choose an email delivery service. You can either use a free service like Feedburner or a paid one (like Aweber/Constant Contact).

Here I’ve shared a complete guide on how to add Feedburner email subscription widget to your blog.

Part 1: Creating a Feedburner Account

1. Visit feedburner.google.com and login to Feedburner with your Gmail account.

2. In step 2, fill your blog address on the field saying “Burn a Feed right this Instant” and hit Next button.

3. Then, choose the Feed address and title of your choice and again hit the Next button.

4. Finally, you will get a Congrats message saying Your feed is now live.

Part 2: Adding Feedburner Widget to Blogger

1. Visit the Publicize tab in your Feedburner account.

2. Under the Publicize tab, click on Email Subscriptions (Offer feed updates via email) & hit Activate!

3. After you hit Activate, you will get an HTML code. All you have to do is to paste this code as a widget in your blog sidebar.

4. Add the HTML code in the Layout Section as shown below:

5. This is how your email subscription widget looks on your blog sidebar.

Part 3: Adding Customized Email Newsletter Widget

Apart from the default email subscription widget, you can also add a customized widget as shown below.

I’ve found this beautiful email newsletter widget on HowBloggerz. To add this email subscription widget into your Blogger sidebar, just copy the below code & paste it into the widget area.

<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
    width: 240px;
    margin: 10px auto;
}

#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}

.hbzsignup-form {
    margin-top: 15px;
}

.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998; 
}

.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced; 
}

.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39; 
}

.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027; 
}

.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12; 
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>

• Here Change [Your Blog URI] with Your Feedburner URI
• Change [fb URL] with your Facebook Url. Do same with other left URL’s.

Pros & Cons of Using Feedburner:

Everything comes with some pros and cons & especially when it is free…Lol! Here are some of the top pros of using Feedburner:

• It is completely free.
• Easy to set up.
• Automatically send an email newsletter to your subscribers whenever you publish new posts.

And the top cons are:

• Poor user management.
• No custom templates.
• Not good for sending promotional emails.

What else you can use Instead of Feedburner?

Most of the free tools come with some limitations. However, you can use Aweber, Constant Contact or MailChimp for better email marketing.

Final Words!

In this complete guide, I’ve shared a step-by-step guide on how to add email subscription widget to Blogger.

If you like this post, let me know your views in the comment section!