Friday, July 22, 2011

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

In previous post ,I mentioned on what is on widgets and includable ,and now ,in this post ,I want to show you the Blogger APIs,or data tags ,which you can use to included 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 APIs (or data tags ) for 12 types of widget ,these APIs can use only in the corresponding widget and one group for Globally Available Data ( the data you can use in any place in template )
1,Globally Available Data :
These data tags can be applied to the entire page, so you can use it anywhere, unlike other data tags which can only be used in a specific widget.
  •     <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 ?
Very simple ,in template ,in a place you want to show blog title ,just add a <data:title/> and the blog title will be shown . 

Page Header

There are two data tags for this widget :
  •     <data:title/>: The blog's title.
  •     <data:description/>: The blog's description.

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.
  •     <data:title/>: The title of the widget.
  •     <data:style/>: One of 'MENU', 'FLAT', or 'HIERARCHY'.
  •     <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

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.
  •    <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 &quot;alt&quot; text for the photo.

On team blogs, the profile widget contains less information about more authors, as follows.

  •     <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 to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. 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 work the same way and have the same two pieces of data.
  •     <data:title/>: The widget's title.
  •     <data:content/>: The content of the widget.

Feed Widget

A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.

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

Picture Widget

A picture widget contains a single image, and provides all the 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 are in use on the 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

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.
  •     <data:title/>: The widget title.
  •     <data:items/>: The list of items.

Link List Widget

A slightly fancier list, where each item has two parts to it: 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

It doesn't get any simpler than this one. Just one piece of data here.
  •     <data:fullButton/>: The URL of the Blogger button you've selected.

No comments:

Post a Comment