How to make a blogger template : data tags - part 1

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

----------------------------------------------------------------------

CHAPTER 5:   BLOGGER DATA TAGS 1

In chapter 4, we already take a tour around widget and its elements, in this post, we will know more about Blogger data tags, which can be used to include specific pieces of data in template file.

All of these data tags has structure:
 <data:name/> or <data:name1.name2/>
where name or name1,name2  is the name of the particular piece of data you want to use

Now ,we go further:
In the post on section and widget, I told you there are 12 types of widget:
•    BlogArchive
•    Blog
•    Feed
•    Header
•    HTML
•    SingleImage
•    LinkList
•    List
•    Logo
•    BlogProfile
•    Navbar
•    VideoBar
•    NewsBar

So there are 12 groups of Blogger data tags ( or Blogger APIs ) for 12 types of widget, these data tags are used only in the corresponding widget. There’s a group of data tags which can be used in any place of template file, independent to type of widget, called Globally Available Data.

Globally Available Data:

These data tags refer to common things such as blog title, current page, type of page, current url …, so you can use anywhere in a template file:

• <data:title/>: Return the blog's title.
• <data:pageType/>: Return type of the current page. It can be 'item', 'archive', or 'index'.
• <data:url/>: Return the URL of the current page.
• <data:homepageUrl>: Return the homepage of the blog.
• <data:pageTitle/>: Return title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
• <data:encoding/>: Return the encoding to use for the blog, e.g. UTF-8.
• <data:languageDirection/>: Return either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
• <data:feedLinks/>: Return the autodiscovery feed links for the page header.

How to apply them ?
In a place you want to show blog title, just add a <data:title/> and the blog title will be shown, easy, right?

Page Header

There are two data tags for this widget:

• <data:title/>: The blog's title.
• <data:description/>: The blog's description.

Blog Archives

Data tags for Blog Archives widget:

• <data:title/>: The title of the widget.
• <data:style/>: Displaying style of Blog archive widget: 'MENU', 'FLAT', or 'HIERARCHY'. These are default options in the Page Elements tab. If you're redesigning a Blog Archive widget, it's easiest to use 'FLAT' as the style.
• <data:data/>: A list of each archive unit, each of which contains:

• <data:data.name/>: The name of this archive interval, e.g. "August 2006."
• <data:data.url/>: The link to the page containing posts from this interval.
• <data:data.post-count/>: How many posts there are in this interval.

Profile Widget

Profile widget contains the information on blog author, content contributors … which has following data tags:

• <data:title/>: The title of the widget.
• <data:userUrl/>: The author's profile URL.
• <data:location/>: The location from the author's profile.
• <data:aboutme/>: The &quot;About Me&quot; information from the profile.
• <data:displayname>: The author's display name.
• <data:photo/>: The user's profile photo, made up of the following:
• <data:photo.url/>: The photo URL.
• <data:photo.width/>: The photo's width, in pixels.
• <data:photo.height/>: The photo's height, in pixels.
• <data:photo.alt/>: The “alt” text of the photo.

In a team blogs, profile widget contains less information about other authors except owner, as following:

• <data:title/>: The title of the widget.
• <data:authors/>: The list of all authors, each of which contains the following:
• <data:authors.displayname>: The author's display name.
• <data:authors.userURL/>: The author's profile URL.

If you want your template to handle both of single and multiple authors blog, you can use the data:team variable to distinguish between single and multiple authors. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget are the same way and have two pieces of data:

• <data:title/>: The widget's title.
• <data:content/>: The content of the widget.

Feed Widget

Content of a feed widget is loaded using Google AJAX API after blog fully rendered in web browser. So CSS is the only way to style this widget.

• <data:title/>: The widget's title.
• <data:feedUrl/>: The URL of the feed.

Picture Widget

A picture widget contains a single image, and data tags provide relevant data for that image:

• <data:title/>: The title of the widget.
• <data:sourceUrl/>: The URL of the image.
• <data:width/>: The image's width, in pixels.
• <data:height>: The image's height, in pixels.
• <data:caption/>: The image caption.

Labels Widget

The labels widget includes a list of all labels that use in a blog.

• <data:title/>: The widget title.
• <data:labels/>: The list of labels, each of which contains:
• <data:labels.name/>: The text of the label.
• <data:labels.count/>: How many posts have this label.
• <data:labels.url/>: A link to a page displaying posts with this label.

List Widget

List widget displays a list. Type of items in the list is text only.

• <data:title/>: The widget title.
• <data:items/>: The list of items.

Link List Widget

Display a list of links. A slightly fancier list, where each item has two attributes: the text and the link.

• <data:title/>: The widget title.
• <data:links/>: The list of links, each of which contains:
• <data:links.name/>: The link's text.
• <data:links.target/>: The link's URL.

Logo Widget

Showing logo is what this widget does. Never simpler. Here is data tag:

• <data:fullButton/>: The URL of the Blogger button you've selected.