Previous Page
Next Page

Modifying Blogger Templates with HTML and Blogger Tags

Let's take another look at the Edit Current page on the Template tab. That big text box in the middle of the page is filled with lines of code that looks a little like HTML. Well, that's because the code is HTMLor most of it is, anyway. Your blog is constructed from HTML code, with a few special Blogger tags thrown in for good measure.

If you know your way around HTML, you can use the Edit Current page to customize your Blogger template. Changing colors or fonts, deleting unwanted elements, even adding new elements is as simple as editing the appropriate codes.

Understanding Essential Codes

I won't go into all the intricacies of HTML here; I'll assume that if you're editing code, you know what you're doing. What I will do is point out some of the more important codes, as well as talk about those Blogger-specific tags.

First, know that Blogger uses Cascading Style Sheets (CSS), so that most of the font and color information is set at the very top of the code. Look for the code that starts with the following line:

<style type="text/css">

Everything in-between this tag and the closing </style> tag defines all the elements used in the template's style sheet. When you make changes to the definitions within this section, it affects the look of the entire style sheet.

The main content of your blog is prefaced by the following tag:

<div id="main-content">

After this tag you'll find code that inserts your blog posts, comments, and similar content. You probably want to leave this part of the template as-is.

The sidebar, however, is where you'll do the most customization. You can add a ton of content here, using both Blogger tags (for Blogger-generated content) and your own HTML. This section of the template starts with the following line of code:

<div id="sidebar">

Understanding Blogger Tags

Most of the content in your template is generated by Blogger tags. When you use a Blogger tag, a single tag is used to insert all manner of dynamic content. For example, the single <$BlogItemBody$> tag displays the entire content of a post. You don't have to enter the content into the code; this tag inserts it, dynamically.

Caution

Unlike normal HTML code, Blogger tags are case-sensitive. You must use the proper in-tag capitalization for the code to work.


It's important, then, to get to know the various Blogger tags. These tags fall into two general groups; item-level tags, which insert content from Blogger's database, and page-level tags, which define when and where the content from item level tags will appear on the page. You can tell an item-level tag from the dollar signs surrounding the tag name. For example, <$BlogItemUrl$> is an item-level tag that inserts the URL for a given post; <BlogItemURL> is a page-level tag that defines where the URL will appear.

There are quite a few of these Blogger tags, which are detailed (by type) in Tables 23.1 through 23.7.

Table 23.1. General Tags

Tag

Type

Description

<Blogger> and </Blogger>

Page-level

Container tags that surround all your blog content

<$BlogEncoding$>

Item-level

Inserts the encoding section from your template's Formatting tab

<$BlogMetaData$>

Item-level

Inserts all blog metadata via a single tag

<$BlogPageTitle$>

Item-level

 Inserts "smart" titles for your blog ("Blog Name" for the index page, "Blog Name: Date Info" for archive pages, and "Blog Name: Post Title" for individual post pages)

<$BlogTitle$>

Item-level

Inserts the title of the blog

<$BlogDescription$>

Item-level

Inserts the description for the blog

<BlogDateHeader>

Page-level

Defines the placement of the date headers for each post

<$BlogDateHeaderDate$>

Item-level

Inserts date headers for each post; typically used in conjunction with the <BlogDateHeader> tag, like this:<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>


Table 23.2. Posting Tags

Tag

Type

Description

<BlogItemTitle>

Page-level

Defines the placement of a post's title

<BlogItemURL>

Page-level

Defines the placement of post's URL

<$BlogItemURL$>

Item-level

Inserts the URL for a post

<$BlogItemBody$>

Item-level

Inserts the content of a post

<$BlogItemAuthor$>

Item-level

Inserts the first and last name of a post's author

<$BlogItemAuthorNickname$>

Item-level

Inserts the display name of a post's author

<$BlogItemAuthorEmail$>

Item-level

Inserts the email address of a post's author

<$BlogItemAuthorURL$>

Item-level

Inserts the home page URL of a post's author

<$BlogItemDateTime$>

Item-level

Inserts the date and/or time of a post

<$BlogItemNumber$>

Item-level

Inserts the ID number of a post

<$BlogItemArchiveFileName$>

Item-level

Inserts the archive filename of a post

<$BlogItemPermalinkURL$>

Item-level

Inserts the permalink of a post

<$BlogItemControl$>

Item-level

Inserts the quick edit link of a post

<BlogDateFooter>

Page-level

Defines the placement of a post's output date footer

<BloggerPreviousItems>

Page-level

Defines where previous items will appear

<$BlogPreviousItemTitle$>

Item-level

Inserts the 10 posts previous to the current post


Table 23.3. Comment Tags

Tag

Type

Description

<BlogItemCommentsEnabled> and </BlogItemCommentsEnabled>

Page-level

Turns on the display of comments

<BlogItemComments> and </BlogItemComments>

Page-level

Defines where comments will appear

<$BlogItemCommentCount$>

Item-level

Inserts the comment count

<$BlogItemCommentFormOnClick$>

Item-level

Inserts a link to the blog comment form

<$BlogCommentNumber$>

Item-level

Inserts the comment number

<$BlogCommentBody$>

Item-level

Inserts the comment text

<$BlogCommentPermalinkURL$>

Item-level

Inserts the URL for the comment's permalink

<$BlogCommentAuthor$>

Item-level

Inserts the name of the comment's author

<$BlogCommentDateTime$>

Item-level

Inserts the date/time the comment was created

<$BlogCommentDeleteIcon$>

Item-level

Inserts a delete button for each comment

<$BlogItemCreate$>

Item-level

Inserts a link that lets users add new comments

<$BlogItemCommentCreate$>

Item-level

Inserts a link that lets users add new comments


Table 23.4. Profile Tags

Tag

Type

Description

<$BlogOwnerNickname$>

Item-level

Inserts the blog owner's display name

<$BlogOwnerFirstName$>

Item-level

Inserts the blog owner's first name

<$BlogOwnerLastName$>

Item-level

Inserts the blog owner's last name

<$BlogOwnerFullName$>

Item-level

Inserts the blog owner's first and last name

<$BlogOwnerEmail$>

Item-level

Inserts the blog owner's email address

<$BlogOwnerLocation$>

Item-level

Inserts the blog owner's location

<$BlogOwnerAboutMe$>

Item-level

Inserts the blog owner's complete profile

<$BlogOwnerProfileUrl$>

Item-level

Inserts a link to the blog owner's profile


Table 23.5. Archive Tags

Tag

Type

Description

<BloggerArchives>

Page-level

Defines the placement of the archive post list

<$BlogArchiveURL$>

Item-level

Inserts the URLs for the archive post list

<BlogArchiveName$>

Item-level

Inserts the names for the archive post list


Table 23.6. Site Feed Tags

Tag

Type

Description

<BlogSiteFeed>

Page-level

Defines the placement of RSS feed information

<$BlogSiteFeedUrl$>

Item-level

Inserts the URL for your site feed; typically used in conjunction with the <BlogSiteFeed> tag, like this:<BlogSiteFeed><$BlogSiteFeedUrl$></BlogSiteFeed>

<$BlogSiteFeedLink$>

Item-level

Outputs the URL for your site feed inside a <link> tag


Table 23.7. Conditional Tags

Tag

Type

Description

<MainPage> and </MainPage>

Page-level

Contents between the on and off tags will only appear when visitor is viewing the main page of your blog

<ArchivePage> and </ArchivePage>

Page-level

Contents between the on and off tags will only appear when a visitor is viewing the archive page of your blog

<ItemPage> and </ItemPage>

Page-level

Contents between the on and off tags will only ppear when a visitor is viewing an item page in your blog

<MainOrArchivePage> and </MainOrArchivePage>

Page-level

Contents between the on and off tags will only appear when a visitor is viewing the main or archive pages of your blog


In some cases, all you have to do is insert the appropriate tag. For example, to insert your username and profile, insert the following tags into the sidebar section of the template code:

<$BlogOwnerNickname$>

<$BlogOwnerAboutMe$>

Using some of the other tags, however, can be a bit tricky. I recommend you study the existing template code to see how these tags are used, and then consult the Blogger help system for more detailed instructions.

Using Other HTML Tags

When you're customizing your blog template, you may want to include a variety of personal information about yourself, typically in the template's sidebar. All you have to do is go to the sidebar section of code (which starts with the <div id="sidebar"> tag) and insert the appropriate HTML.

For example, to insert a photo in the sidebar, use the following code:

<img src="imageurl" width="100">

Replace imageurl with the full URL and filename of the graphic you want to insert. The width attribute sizes the picture to a 100-pixel width, which should be a good size to fit within the sidebar; experiment with different widths, if you like.

Some bloggers, myself included, like to include a list of books they're reading or CDs they're listening to, like the one shown in Figure 23.23. You can manually insert a reading or listening list in your sidebar, along with pictures and links to each item on Amazon.com, by using the following code:

Figure 23.23. A CD listening list added to the blog sidebar.


<h2 class="sidebar-title">Recent Reads</h2>
<font size=1>

<a href="http://www.amazon.com/exec/obidos/ASIN/amazonASIN">
<IMG
SRC="http://images.amazon.com/images/P/amazonASIN.01.THUMBZZZ.jpg"
align=top>
Book/CD title
</a>

<a href="http://www.amazon.com/exec/obidos/ASIN/amazonASIN">
<IMG
SRC="http://images.amazon.com/images/P/amazonASIN.01.THUMBZZZ.jpg"
align=top>
Book/CD title
</a>

<a href="http://www.amazon.com/exec/obidos/ASIN/amazonASIN">
<IMG
SRC="http://images.amazon.com/images/P/amazonASIN.01.THUMBZZZ.jpg"
align=top>

Book/CD title
</a>

</font>

In this code, replace amazonASIN within both the link and the image URLs with the actual Amazon ASIN number. (You can find this number on any Amazon product page.) Replace Book/CD title with the title of the book or CD. You can include as many items as you like in your list by adding more lines of code.

And, as discussed previously, you can add a link to your blog's Atom feed by inserting the following lines of code:

<a href="<$BlogSiteFeedUrl$>" title="Atom feed">Atom Feed</a>

In this instance, you're using the <$BlogSiteFeedUrl$> Blogger tag to dynamically insert the URL for your blog's Atom feed.

As you can see, there's a lot you can do to customize your blog templatemore than I can describe in this single chapter. If you're technically inclined, I recommend you check out the help system on the Blogger site, which offers a wealth of more advanced information. And don't be afraid to experimentas long as you create a backup copy of your existing blog template first!


Previous Page
Next Page