30. Identifying Elements in the Blogger Template Source
BEFORE YOU BEGIN
29 Understanding the Blogger Template Structure and Editor
31 Defining and Implementing Custom Styles
32 Understanding the Blogger Template Language
When editing your Blogger template to add links to third-party items, you might be given particular instructions to add a bit of code to the heading area of your template, or the style sheet, or within particular Blogger template tags. This topic looks at a minimal Blogger template and helps you to identify various elements.
Finding the Document Type Declaration
The first line or two of your template, before the opening <html> tag, typically contain a document type declaration. You can learn more about document type declarations in Appendix A, "HTML Fundamentals." Do not remove these lines; they assist in the rendering and validation of the pages that make up your blog. Lines 1 and 2 show the document type declaration within this template.
Identifying HEAD Elements
There are usually four sets of items within the HEAD element of a template, which is surrounded by the opening <head> tag (line 4) and the closing </head> tag (line 10). The title, surrounded by the <title></title> tag pair, is one of these elements, and can be found in this instance on line 5. Next comes the metadata for your blog. Line 6 shows the use of a Blogger template tag for metadata; you can learn more about this tag in 32 Understanding the Blogger Template Language. One of the most important elements of metadata that is dynamically displayed in this area is a link to your site feed. Following the metadata tags are the lines containing your template's style sheet.
Locating the BODY Element
All the magic happens within the BODY element; the opening <body> tag can be seen on line 11, and the closing </body> tag does not appear until line 62 (immediately before the ending </html> tag). Within the BODY element are all the various Blogger template tags and <div> elements that control the display of your blog main page, archive page, and post pages.
Identifying HTML Comments
HTML comments begin with <!-- and end with -->, and within these symbols contain text that is never to be rendered by the browser. Line 17 shows a good use of a comment: It indicates that the source code following this comment will be used to generate the blog posts. HTML comments are often used to provide a visual indicator of the purpose of the code that follows it, and can be very helpful when quickly scanning through source code to find a particular area.
Locating Blogger Content Placeholder Tags
When you see a tag that begins with <$ and ends with $>, you have found a Blogger content placeholder tag. These single tags in your template represent values stored in the Blogger database that is then displayed when your template is published. For instance, line 15 shows the placement of the <$BlogTitle$> Blogger tag between the standard HTML <title></title> tag pair. When published, the actual title tag seen in the source will be <title>Your Title Here</title>.
Locating Blogger Content Container Tags
Blogger content container tags are different in appearance and usage than the Blogger content placement tags just described. These tags do not have the dollar-sign indicator (as in <$BlogItemBody$>) and instead look just like HTML tag pairs (<Blogger></Blogger>, <ArchivePage></ArchivePage>, and so forth). These tag pairs are used to set apart elements of the template that will be populated with content when published. When the publishing process occurs, these tags tell the underlying Blogger application to kick into gear and do something specific based on the type of tag it encounters.
For instance, line 34 shows the <BlogItemCommentsEnabled> opening tag. This tag tells the Blogger application to start the process of retrieving the stored comments for this particular blog, and to continue doing so until it comes across the closing </BlogItemCommentsEnabled> tag in line 45.
If you have any aspirations of working with your Blogger template, it is important to be able to discern between the various elements of HTML, style sheets, and Blogger template tags found in the template. Although you have the ability to add, modify, and delete elements from your template, doing so haphazardly will have repercussions. For instance, if you remove the <Blogger> opening tag from your template and republish your blog, you'll find no blog content is displayed. Always be cautious when modifying your template, and always keep a backup handy.