Add Feedburner email subscription widget in Blogger Blog

Follow @unziptech

Hello Friends, Unziptech has shared many useful Blogging tips in the previous articles. This Article features a tutorial to add a beautiful email subscription widget in Blogger Blog powered by Feedburner which is a Google's product. Feedburner is the leading web feed management service providers. 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.

RSS feeds are very important for getting traffic to your Blog. Many Blog submission directories ask you to submit your Blog's feed url so that they can track your latest posts. Similarly you can ask your visitors to subscribe to your blog's feed so that they can get the latest updates in their email inbox.

Why you need Email subscription Widget?

Email subscriptions are a good source of Traffic. Every blogger knows the importance of traffic. Good traffic stats shows the popularity of your Blog and improve your rankings as well. Adding this widget in your blog will allow users to subscribe to your blog's feed and allows you to increase your loyal listeners count. They will get updates in their emails and they will visit your Blog. So I recommend everyone to add this widget in their Blog.

How to Add email subscription Widget?

Before adding this widget in your Blog you must have a feedburbner account. So if you don't have one register for it. You can get the code for email subscription widget from there as well, but I have customized the look and feel of this subscription widget using CSS rules so it looks more attractive. It is up to you, which code you want to use. I recommend you to use this one because you can change the CSS rules yourself according to your blog's template and color schemes. For adding this widget in your blog you need to follow these steps:

• Login to you Blogger account and navigate to layout.
• Click on add a gadget, in your Sidebar.
• Choose HTML/JavaScript widget from the pop-up window.
• Copy and paste the following code into it.
<style>
    #UT-Sub
    {
        background-color:#F2F2F2;
        color:#FFF;
        width:300px;
        font-weight:bold;
        text-align:center;
    }
    #UT-sub input[type='submit']
    {
        width:7em;
        height:2.8em;
        text-align:center;
        vertical-align:middle;
        background-color:#724D75;
        color:#FFF;
        border-radius:5px 5px 5px 5px;
    }
    #UT-label
    {
        margin-top:0;
        background-color:#704C73;
        padding-top:10px;
        padding-bottom:10px;
    }
    #UT-label2
    {
        margin-bottom:0;
        color:#551A9C;
    }
    #UT-label2 a
    {
        text-decoration:none;
        color:#551A9C;
    }  
</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'>Get Updates via Email</p><p><input type="text" style="width:150px" name="email" placeholder="Enter your email id here"/></p><input type="hidden" value="Unziptech" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p id="UT-label2">Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
</div>
• Change the username with your Feedburner username. I have highlighted it with Red color.
• 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, you can click on save.
• Click on preview to watch this widget in action and then save the arrangement.

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 check other Blogging and Seo tips on Unziptech. It will help you improve your blogging experience. You should also see the All in one social networks widget for Blogger.

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/04/add-feedburner-email-subscription.html HTML link code: <a href="http://unziptech.blogspot.com/2013/04/add-feedburner-email-subscription.html">Add Feedburner email subscription widget in Blogger Blog</a> BB link code: [url=http://unziptech.blogspot.com/2013/04/add-feedburner-email-subscription.html]Add Feedburner email subscription widget in Blogger Blog[/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+