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!