How it works

When added, it will automatically add the blog to Feedburner, creates the URL of the feed and use it for mail subscription.

The gadget displays a simple form where the reader can write her email and confirm the subscription. Apparently, the submit button is automatically adapted to the color palette of the blog.

Settings

To configure email subscription I recommend reviewing our guide: How to offer e-mail subscriptions step-by-step.

Widget code

As all the Blogger widgets, you can modify the form code looking for the title or in this case by FollowByEmail. The code generated by the gadget is as follows:

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>
        <span>
          <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
        </span>
        <input class='follow-by-email-submit' type='submit' value='Submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
</b:widget>

Here, I recommend changing the following line, if your blog is not in English:

<input name='loc' type='hidden' value='en_US'/>

With:

<input name='loc' type='hidden' value='You language code'/>

Where "You language code" is es_ES for spanish, for example. You can read: Language Options in Email Subscription Forms Explained.

This is to translate the confirmation message in your language.

Styles

/*Form conteiner*/
.FollowByEmail .follow-by-email-inner {
    position: relative;
}
/*Email field*/
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    border: 1px inset;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0 2px;
    width: 100%;
}
/* Submit button */
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    -moz-border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 0 none;
    color: #FFFFFF;
    font-size: 13px;
    height: 24px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    z-index: 0;
}
.FollowByEmail .follow-by-email-inner input {
    font-family: arial,sans-serif;
}

Needless to say, these can be overwriting from the template code if you want to customize.

Step by step:

1. Go to your template code (Desktop → Design → Edit HTML) and expand widget templates.

2. Search the pages widget code, it looks more or less as follows:

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

To facilitate the search, can search with your browser: id = ‘PageList

3. Once you locate the code, there are two places where you can put new links:

• Before <ul>. The link will be the first one in the menu.
• After </ul>. The link will be the last one in the menu.

As this is an HTML list, the link will follow this format:

<li><a href='http://mysite.com/mylink/'>My link</a></li>

You can add as many links as the design permits. Always taking care of opening and closing tags correctly.

4. Save the changes.

In this way you can add links to a important label, an external site, the feed url or any other link.

1. Go to your blog, and select the “Layout” tab.
2. Choose the place where you wanna put the comments, and click “Add a Gadget”.
3. Select the “Feed” element, and click “Add to blog”.



4. The next step is to add the feed’s URL, in this case is the one that has the comments of our own blog. This address is like this:

http://YOURBLOG.blogspot.com/feeds/comments/default

Where YOURBLOG is that part of your blog’s address.

5. The next step is to configure:

Title: the title to show on top of comments.
Number of items: in this case it’s the number of comments.
Item date: show comment’s date.
Item sources/authors: show comment’s author.

6. Save the changes and that’s it.

This will be enough to show the last comments. The look will depend of the place you insert them into. With this method you can add any content with feed format, doesn’t matter if it’s not from Blogger.

Read this article in spanish.

1. Go to Layout> Edit HTML and without checking the “Expand widget templates” box, look for this piece of code:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Below that line you will find your template’s widgets:

<b:widget id='BlogArchive1' locked='false' title='Blog Archives'
type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='My Profile'
type='Profile'/>

2. Copy those widgets and keep them save (wherever).

3. Upload the new template.

Blogger will warn you that your widgets are going to be deleted. Do NOT continue.

4. Go to the same piece of code where you took your widgets from:

<b:section class='sidebar' id='sidebar' preferred='yes'>

And paste the widgets you copied, below. In the end, the whole code should look like this:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives'
type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='My Profile'
type='Profile'/>
</b:section>

That’s it!

*Asides | Lee esto en español

2. Look for this line of code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

3. Replace it with the following code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
    <b:if cond='data:label.count &gt; 2'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'>
          <data:label.name/>
        </a>
      </b:if>
      (<data:label.count/>)
    </li>
   </b:if>
</b:loop>
</ul>
  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. In the first line highlighted in red, you decide the minimum number of posts a label needs to have in order to be displayed in your Labels’ widget/gadget.