BTemplates Blog

Tutorials, new and tricks about Blogger.

Native Blogger email subscription

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

follow-by-email-blogger

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

follow-by-email-settings

native-blogger-email-suscription

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.

2 Questions and comments on Native Blogger email subscription

Joan March 30, 2011 at 1:37 am

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.

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

le sorelle September 3, 2011 at 5:13 pm

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! 🙂

Leave a Reply