|
|
Modifying Blogger Templates with HTML and Blogger TagsLet'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 CodesI 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 TagsMost 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.
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 TagsWhen 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! |
|
|
