Feedburner Email Subscription Widget For Blogger

Here's how to add a Feedburner email subscription widget in blogger blogs and also setup feedburner email subscription for your blog. The Feedburner subscription widget when added to your blog's sidebar, allows visitors to sign up for email notifications about new posts on your blog. Feedburner is a free feed email service which automatically sends a blog's post or recent posts to the blog's  subscribed readers. With these loyal subscribers, your blog's pageviews and returning visitors are increased. Follow the guidelines below to add a feedburner email subscription widget to your blogger blog.

Blogger Feedburner Email Subscription Widget

Also Read: How to Add Social Media Icons to Blogger Header
                   Auto Scrolling Widget For Blogger Blogs
                   Floating Social Share Buttons For Blogger

How To Setup Feedburner Email Subscription in Blogger 

If you haven't setup feeburner email subscription for your blogger blog, here's how to do it. For those who have, you can skip this section to the next.
  • Visit feedburner and login using your google account.
  • Enter your blog's URL in the space provided



  • On the preceeding page, tick 'atom', then select next.
  • Enter the name of the feed and username for the feed. (take note of the username, you'll need it for the feedburner email subscription widget)

Blogger Feedburner Email Subscription Widget
  • Next, click on the publicize tab.
  • Select 'email subscriptions'.
  • Then activate the service.



How to Add FeedBurner Email Susbcription Widget On Blogger

  • Goto your Blogger Dashboard,
  • Navigate to Layout
  • Select add a gadget
  • From the pop up options, select HTML/Javascript (Refer to this post on how to add widgets and gadgets in blogger blogs)
  • Copy the code below and paste in the text field.


<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<div id='responsiveness'>
            <h5>Subscribe Our Newsletter</h5>

            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techlass', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
           <input  class="placer" type='text'  name='email' placeholder='Full Name' />
            <input  class="placer" type='text'  name='email' placeholder='Enter Email ID' />
            <input type="hidden" value="techlass" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="Subscribe" class="button" type="submit" />
            </form>
            </div>

<style>
#responsiveness {
    padding: 15px 25px 20px;
    line-height: 35px;
    text-align: center;
    background: none repeat scroll 0% 0% #1E1E1E;
    margin: -15px;
    border-radius: 3px;
}
#responsiveness h5 {
    font-size: 17px;
    font-weight: 700;
    font-family: 'PT Sans',sans-serif;
    color: #FFF;
    padding: 0px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 10px 0px 15px;
    letter-spacing: 0.01em;
    text-align: left;
}
input.placer {
    color: #333;
    padding: 15px;
    font-size: 14px;
    font-family: PT Sans,sans-serif;
    border: 1px solid #EEE;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    margin: 10px auto 0px;
    border-radius: 3px;
    width: 89%;
}
input.button {
    background-color: #BA1A00;
    color: #FFF;
    font-weight: 400;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: PT Sans,serif;
    padding: 10px 15px;
    border: medium none;
    font-size: 16px;
    width: 100%;
    margin: 15px auto 0px;
}
input.button:hover{
    background: #FFF;
    color: #333;
   }
</style>

  • Replace techlass in the code with your FeedBurner username.
Optionally you can customize the feedburner email subscription widget for blogger by,
  • Changing the size of the widget by replacing the fields 520 and 550 for height and width repectively.
  • Also, to change the background colour of the widget, repace 1E1E1E with your desired CSS colour code.
  • The text to be displayed on the widget by default is SUBSCRIBE OUR NEWSLETTER, change this to your desired text. 
  • To change the text on the submit button, replace SUSCRIBE with your text.
  • Finally, save the gadget. 
Also Read: Auto Read More With Thumbnail For Blogger Blogs 
                   Most Commented Posts Widget For Blogger With Thumbnails

The  Feedburner Email Subscription Widget has been added to your blog.

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

    URL Of Post:


    HTML Link Code:

    BB (forum) link code:

    Comments

    1. how do i center the widget, adjust the padding width symmetrically.

      ReplyDelete
    2. hy bro your widget box code is not currect plz fix

      ReplyDelete

    Post a Comment

    Please share your views on this topic with Grace Joseph by leaving a comment.