How Google Blogger Data Tags Work

Menu

Home: How Blogger Data Tags Work
Page Elements Tags For Layouts in Blogger
Available Data Tags in Blogger
HTML Template Syntax in Blogger

Google Blogger is one of the most popular blogs. You sign up for an account and get a blog going within minutes. It offers much flexibility in making the blog the way you want it to be but not without some knowledge and finesse. Read on to know exactly how to access data related to the current post and how to manipulate them with loops and conditionals.

When you log into your Blogger account and go to Design -> Edit HTML and check 'Expand Widget Template you see a bunch of Blogger specific tags interspersed with HTML code. Here's an example:

...
<b:loop values='data:post.comments' var='comment'> 
  <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
      <data:comment.authorAvatarImage/>
    </b:if>
    <b:if cond='data:comment.authorUrl'>
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
      <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
      </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  </dd>
  <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p>
        <data:comment.body/>
      </p>
    </b:if>
  </dd>
</b:loop>
...

In the Blogger HTML template we see regular HTML tags such as <p> and CSS styling class inside HTML tags. But what about other tags that are NOT HTML tags? What is "data:post.comments"? What is "b:loop" tag? What is "b:if" tag? How does the syntax work?

Basically they are Google Blogger's way of showing each post's data and manipulating them with some simple logic. For example "data:post.comments" store all the comments of this post, and b:loop loops through them one by one. You can identify basic data of a post including the post's title, URL, date and time of the post, etc. However without a comprehensive tutorial that goes through all the available data tags and programming logic syntax how do we know what data are available and how we can manipulate them?
To my dismay I cannot find much help on Google with keywords like "blogger html template tutorial", "blogger data tags help", "blogger widget tags syntax", "blogger tags language tutorial". I finally found some help but they are so hidden on the web that I decided to write a post on them to bring more visibility to where people can find help!

Basically you need to understand three things: element tags for layout in Blogger, available data tags in Blogger, and syntax to manipulate them in Blogger's template language.

Without further ado let's look at the available data tags in Blogger! Questions?

Page Elements Tags For Layouts ▶