Tutorials, tips and tricks about Blogger

16 Mar

Native Blogger email subscription

2 Comments | by in Features, News, Widgets | 2011

Español Português

Blogger starts with the novelties of this year, this time presenting a new gadget to subscribe by email or follow by e-mail as they have called.

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.


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'>
          <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
        <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'/>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>

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

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


<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.


/*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.


2 Comments, leave a reply · Feed
  1. Hi, im using your tequilas flamejantes template, i like it so much. Well it is workin fine, the only prob is: if i want to post my blogger page on facebook, the blog presentation appears in html code.

    Studio test – Mobile photography lab
    ‎”);j++}i++});i=0;j=0;$jtab1(“#”+sidebarname+” .widget”).each(function(){if(i>=starttab&&i if (window.jstiming) window.jstiming.load.tick(‘headEnd’);

  2. le sorelle September 3, 2011

    I cannot thank you enough for posting this! I had been searching for this code for hours, and thanks to you my search is over! Thanks again! 🙂


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger