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.Add Email Subscription Widget to Blogger

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!

Check Out :  Step by Step guide to start a free blog in Blogger

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.

Add Email Subscription Widget to Blogger

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

Add Email Subscription Widget to Blogger

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

Add Email Subscription Widget to Blogger

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!

Add Email Subscription Widget to Blogger

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.

Add Email Subscription Widget to Blogger

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

Add Email Subscription Widget to Blogger

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

Add Email Subscription Widget to Blogger

Part 3: Adding Customized Email Newsletter Widget

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

Add Email Subscription Widget to Blogger
Image Source: HowBloggerz

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("https://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.

66% of online consumers have made a #purchase as a result of an email.

Check Out :  Setup Bigrock custom Domain in Blogger : A Beginner's Guide
Click To Tweet

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!

1 thought on “Add Email Subscription Widget to Blogger: The Easy Way to do it!”

  1. Thank you! Your instructions were easy to follow and having images helped me understand what to do. Visitors can now subscribe to my blog – I am very grateful to you!

Leave a Comment

Your email address will not be published. Required fields are marked *