Blogger team tried to make their product easier to use and custom for all users with Template Design function. If you want small changes in fonts, background, layout..., this function can help. But if you want more to make your blog look like a professional website? It's time you need to learn structure of blogger template, APIs, javascripts ... to make a custom template. This serie: “How to make a Blogger template” will take you step by step to creating your own. I will try to make it short, simple and easy to understand, hope it helpful for you .

Chapter 1   Blogger Template Structure

Chapter 2   Template Header

Chapter 3   Template body and API's

Chapter 4   Inside widget - "Includable"

Chapter 5   Blogger data tags 1

Chapter 6   Blogger data tags 2

Chapter 7   How Blogger widget work

Chapter 8   General steps of making a Blogger template



You already knew about data tags in previous chapter, we will see the rest of data tags in this chapter and know more about the most important widget: blogpost. This widget purpose is to shows posts in a blog. Without blogpost widget, we can't blogging.

Now let's see blogpost widget's data tags :

  • <data:feedLinks/>: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
  • <data:feedLinks.url/>: The feed URL.
  • <>: The feed name (i.e. 'Posts' or 'Comments').
  • <data:feedLinks.feedType/>: The type of feed (Atom or RSS).
  • <data:feedLinks.mimeType/>: The mime type of the feed.
  • <data:olderPageUrl/>: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
  • <data:olderPageTitle/>: Title of the link to the older page of posts. It's usually the text "Older Posts"
  • <data:newerPageUrl/>: The newer equivalent of olderPageUrl.
  • <data:newerPageTitle/>: The newer equivalent of olderPageTitle.
  • <data:commentLabel/>: The phrase to use to show the number of comments, e.g. "comments."
  • <data:authorLabel/>: The phrase to use to indicate who wrote the post, e.g. "posted by."
  • <data:timestampLabel/>: The phrase to use to indicate when the post was written, e.g. "posted at."
  • <data:postLabelsLabel/>: Phrase to introduce the list of post labels, e.g. "labels for this post."
  • <data:backlinksLabel/>: Phrase to describe backlinks to this post, e.g. "links to this post."
  • <data:posts/>: A list of all posts for this page. You can consider it a set, and each post is an item in this set . We can refer to post's properties by the following tags:
    • <data:post.dateHeader/>: The date of this post, only present if this is the first post in the list that was posted on this day.
    • <>: The numeric post ID.
    • <data:post.title/:>: The post's title.
    • <data:post.body/>: The content of the post.
    • <>: The display name of the post author.
    • <data:post.url/>: The permalink of this post.
    • <data:post.timestamp/>: The post's timestamp. Unlike dateHeader, this exists for every post.
    • <data:post.labels/>: The list of the post's labels. Each label contains the following:
      • <>: The label text.
      • <data:label.url/>: The URL of the page that lists all posts in this blog with this label.
      • <data:label.isLast/>: True or false. Whether this label is the last one in the list (useful for placing commas).
  • <data:post.allowComments/>: 'True' if this post allows comments.
  • <data:post.numComments/>: The number of comments on this post.
  • <data:post.showBacklinks>: Whether to show backlinks for this post.
  • <data:post.numBacklinks/>: Number of backlinks for this post.
  • <data:post.addCommentUrl/>: The URL of the 'add a comment' form for this post.
  • <data:post.emailPostUrl/>: The URL of the 'email this post' form for this post.
  • <data:post.editUrl/>: The URL of the edit form for this post.
  • <data:feedLinks/>: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
  • <data:feedLink.url/>: The feed URL.
  • <>: The feed name (e.g. 'Posts' or 'Comments').
  • <data:feedLink.feedType/>: The type of feed (Atom or RSS).
  • <data:feedLink.mimeType/>: The mime type of the feed.
  • <data:comments/>: A list of all comments for this post (on item pages only). Each contains the following:
  • <>: The numeric ID of the comment.
  • <data:comment.body/>: The body of the comment.
  • <data:comment.timestamp/>: The time the comment was created.
  • <>: The display name of the comment's author, or 'Anonymous'.
  • <data:comment.authorUrl/>: URL of the comment author's profile, if the comment is not anonymous.
  • <data:comment.deleteUrl/>: The URL for deleting this comment.
  • <data:comment.isDeleted/>: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)  

Share this post



  1. Hello Please See My Web Site and look my template error

  2. Sorry Hello Please See My Web Site and look my template error Plz Tell Me............

  3. This will greatly help me.. nice post mas broe

  4. Hi I want a special design for my blog ..
    As for me cobras or charge for the design,
    please, I hope your answer, where you can send
    the information, and where and how I can pay for the design I need.
    thank you very much for your attention ...
    Best Regards

  5. hi i just wanna confirm that how to design my blogs of my wish, so that i can add more templates and custom fonts. please reply

  6. now i know..eventhough it's hard to make one..

  7. ilike this post! yeahh :D
    thanks alot

  8. hello sir pls how to add next and previous option for my blogger image this is my website

  9. Wow, Now its very easy to design a best template . Business Logo Design .

  10. very very very nice tutorial my friend

  11. how can i use this tags into html blog post ?

    1. You can place these tags in xml blogspot template where you want to render data.
      For example you have a block of HTML code, and want to insert the title of blog post in this block code, you can insert this tag :

  12. Hi there, I need to make a link by joining two data tags.
    For example:
    Remove This Ad

    Output should be:{numeric post id}

    How to get numeric post ID?

    1. You can get post id by using this data tag

  13. hi you missed this one
    Please add this and it's descriptions.


Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers