6.2 The Blogger Template

The basic blog created in Chapter 3 used a default Blogger design without any customization, as shown in Figure 6-7.

Figure 6-7. Default blog design with Chroma blogger template

Though functional and accessiable to all the key elements of a blog — postings, archives, date, and person making the posting — at some point you'll most likely want to customize the template, if only to add a blogroll or implement Blogger Pro titles (discussed in a later section). The more you want to individualize the look and the behavior of the blog, the more customization required.

Blogger templates such as Chroma, used in Figure 6-7, are HTML and CSS bundled into a particular design, with Blogger template tags inserted to incorporate your individual blog postings, archive files, name, and so on.

6.2.1 The Template Tags

Blogger template tags act as placeholders for generated content. When the blog page is published, Blogger retrieves the writing for the postings, as well as other information unique to the blog, from its internal database and generates HTML from the data. This generated HTML is then used to replace the appropriate template tags within the template. The merged result is then FTP'd to the blog location.

The format of the template tags is:

<$tag name$>

The tag names themselves determine what type of content is embedded in place of the tag. The following is a list of currently supported Blogger tags and the content they represent:

<$BlogTitle$>

Title of the blog

<$BlogArchiveFileName$>

Name of the Blogger archive index filename

<$BlogDateHeaderDate$>

Daily date header

<$BlogItemNumber$>

Individual posting item number

<$BlogItemBody$>

Posting body

<$BlogItemDateTime$>

Date- and timestamp of posting

<$BlogItemAuthor$>

Blog author

<$BlogItemAuthorEmail$>

Blog author's email address

<$BlogItemArchiveFileName$>

Individual post archive name

<$BlogItemAuthorNickname$>

Nickname of blog author, if any (usually not shown)

<$BlogItemAuthorURL$>

URL for blog author (usually not shown)

<$BlogItemSubject$>

Subject (title) of the posting

<$BlogURL$>

URL of the blog

<$BlogArchiveLink$>

In archive template, link for archive page

<$BlogArchiveName$>

In archive template, link for archive name

In addition to the template tags, Blogger also supports custom XML elements that act as containers for individual postings, or a footer that's placed at the end of a day's content. The elements are:

Blogger

Container for all postings and related date and footer content

BlogDateHeader

Container for date displayed in daily header

BlogDateFooter

Container for content displayed in daily footer

PostSubject

Container for posting title (Blogger Pro only)

Not all Blogger template tags must be enclosed within container elements — <$BlogTitle$>, <$BlogArchiveFileName$>, and <$BlogDescription$> can be used anywhere within the Blogger template. However, tags requiring enclosure within container elements and placed outside of those elements are ignored by the Blogger generator and displayed as regular HTML content on the blog page.

6.2.2 The Template View

The Blogger template can be examined in the Template view window, opened by clicking the Template button on the Blogger toolbar. At the top of the Template view page is a large text edit box that contains the actual template itself, as shown in Figure 6-8.

Figure 6-8. Blogger template view window with template

In the Figure, the <$BlogTitle$> template tag is used to name the blog page. Scrolling down through the template text, you'll quickly spot the other Blogger template tags that control the archive and posting.

As a good rule of thumb, once you've modified the template, make a backup of it before saving it to the Blogger database. This way if a problem occurs, you won't lose your work. Additionally, you'll have a copy of the template as a backup in case of future problems.

Once you're comfortable with the template and the placement of the tags, you're ready to start the template customization, detailed in the next section.