Add Feedburner Email Subscription Widget for blogger-v2

Follow @unziptech

Hello Readers, Today in this post we will learn how to add a custom designed feedburner email subscription widget to your blogger. Feedburner is an important tool in blogging. It allows your subscriber to get updates from your blog directly in their email inbox. It helps you to increase your blog traffic as well as readership. Feedburner is the one of the most used feeds management service provider around. Feedburner provides the custom RSS feeds and enable Bloggers and podcasters to manage their Blog feeds. We all know how important RSS feeds for our Blogs. RSS feeds or Rich Site Summary is a standard XML format to showcase the latest entries in your Blogs. Feedburner also allows you to add an email subscription widget to your blog and allow people to get your updates. Later in this article we will see how to add this beautiful feedburner email subscription widget in your blog.

A few days ago, I posted a feedburner email subscription widget on my blog which I created using the default feedburner widget. This widget is an improved version of the previous one. This widget is purely coded in HTML/CSS and is fully customizable. You can play with the color schemes and CSS styles mentioned in the code below. This widget will allow users to subscribe to your feeds and see your feedburner reader’s count. I will tell you about more customizations that you can do with this widget but before let us see how we can add this widget to our blog.

Recommended Articles:

• Enable Auto-Tweet using Feedburner
• Troubleshoot Feedburner Feeds
• Add Social Sharing buttons in blog posts

How to add Feedburner email subscription widget:

• Login in to your blogger Account.
• Navigate to the Layout section.
• Add a HTML/JavaScript gadget from the list.
• Copy and Paste the following code in it.

 <style>
    #UT-Sub
    {
        background-color:#F2F2F2;
        color:#FFF;
        width:300px;
        font-weight:bold;
        text-align:center;
        box-shadow:0px 0px 1px 2px #009;
    }
    input[type='submit']
    {
        width:7em;
        height:2.8em;
        text-align:center;
        vertical-align:middle;
        background-color:#009;
        color:#FFF;
        border-radius:5px 5px 5px 5px;
        font-weight:bold;
    }
    #UT-label
    {
        margin-top:0;
        background-color:#009;
        padding-top:10px;
        padding-bottom:10px;
    }
    #UT-label2
    {
        margin-bottom:0;
        color:#009;
        font-size:12px;
        vertical-align:top;
    }
    #UT-label3
    {
        color:#009;
        padding-bottom:15px;
    }  
    #UT-label2 a
    {
        text-decoration:none;
        color:#009;
    }
    #UT-left
    {
        float:left;
        height:38px;
        width:180px;
        padding-left:5px;
    }
</style>
<div id="UT-Sub">
    <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Unziptech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <p id='UT-label'>Subscribe to our Feeds</p>
        <div id='UT-label3'>Get Pro Tutorials Directly into your Inbox</div>
        <div>
            <a href='http://feeds.feedburner.com/unziptech' title="Subscribe to our feeds" rel="nofollow">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOYsTjJXGnzqKahuZy-l1XGEuO-Ly2-oO84GJVK9xuK3VUUqLWCIBrVaPjTSsptaR36cu_LlRk4uvqtA-IRS3LESZoD_cPPS6xHSdzBAjVUGt9bmeYvyyEpLZ9XDEzSgxdR1HNy8F02U0/s1600/feedburner-logo.png" height="50" width="50" alt="Feedburner"/>
            </a>
        </div>
        <p><input type="text" name="email" placeholder="Enter your valid Email-id" id="UT-left"/>
        <input type="hidden" value="Unziptech" name="uri"/>
        </p><input type="hidden" name="loc" value="en_US"/>
        <input type="submit" value="Subscribe"/><div style='clear:both;'></div>
        <p id="UT-label2">Powered by <a href="http://feedburner.google.com" target="_blank" rel="nofollow" title="Feedburner">FeedBurner</a>  
        </p>
        <img src="http://feeds.feedburner.com/~fc/Unziptech?bg=99CCFF&amp;fg=444444&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="FeedBurner Readers" title="FeedBurner Readers"/>       
    </form>
</div>

• Now before saving it, we need to change the feeds url.
• Replace my feeburner usernames with yours (highlighted in red).
• I have given it a width of 300px. If your sidebar is not that wide, you can change the width. I have highlighted it by Green color.
• You can also customize the look and feel, color schemes by playing with the CSS rules mentioned in the <style></style> tag in the above code.
• Once you are done with the customization, click on save.
• Click on view blog to see this widget in action.

You just added an email subscription widget in your Blog. I hope I made everything clear. But still if anyone face trouble adding this widget, please comment here. I will be Glad to help you. You should also check out the all in one social networks widget.

You can also checkout our Blogging and SEO optimization section for more cool Blogger Tips and Tricks.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://unziptech.blogspot.com/2013/05/feedburner-email-subscription-widget-in-blogger.html HTML link code: <a href="http://unziptech.blogspot.com/2013/05/feedburner-email-subscription-widget-in-blogger.html">Add Feedburner Email Subscription Widget for blogger-v2</a> BB link code: [url=http://unziptech.blogspot.com/2013/05/feedburner-email-subscription-widget-in-blogger.html]Add Feedburner Email Subscription Widget for blogger-v2[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+