Section 30. Identifying Elements in the Blogger Template Source

30. Identifying Elements in the Blogger Template Source


29 Understanding the Blogger Template Structure and Editor


31 Defining and Implementing Custom Styles

32 Understanding the Blogger Template Language

 1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  2:  ""> 3:  <html xmlns="" xml:lang="en" lang="en"> 4:  <head> 5:  <title><$BlogPageTitle$></title> 6:  <$BlogMetaData$> 7:  <style type="text/css"> 8:  /* stylesheet entries go here */ 9:  </style> 10: </head> 11: <body> 12: <!-- To aid with the Blogger NavBar --> 13: <div > 14: <!-- Header --> 15: <h1><$BlogTitle$></h1> 16: <$BlogDescription$> 17: <!-- Blog Posts --> 18: <Blogger> 19: <BlogDateHeader><h3><$BlogDateHeaderDate$></h3></BlogDateHeader> 20: <a name="<$BlogItemNumber$>">&nbsp;</a>  21: <BlogItemTitle><h2><BlogItemURL><a href="<$BlogItemURL$>"> </BlogItemURL> 22: <$BlogItemTitle$><BlogItemURL></a></BlogItemURL></h2> </BlogItemTitle> 23: <div > 24: <$BlogItemBody$><br /> 25: <div >posted by <a href="<$BlogItemPermalinkURL$>" 26:  title="permanent link"><$BlogItemAuthorNickname$>&nbsp;&nbsp;# 27: <$BlogItemDateTime$></a> 28: <MainOrArchivePage><BlogItemCommentsEnabled>&nbsp; 29: <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnclick$>> 30: <$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled> 31: </MainOrArchivePage> <$BlogItemControl$></div> 32:  </div> 33: <ItemPage> 34: <div > 35:     <BlogItemCommentsEnabled><a name="comments"></a> 36:     Comments: 37:     <BlogItemComments> 38:     <div > 39:     <a name="<$BlogCommentNumber$>"></a><$BlogCommentBody$><br /> 40:     <div ><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a>  41:     posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$></div> 42:     <$BlogCommentDeleteIcon$> 43:     </div> 44:     </BlogItemComments> 45:     <$BlogItemCreate$> 46:     </BlogItemCommentsEnabled> 47:     <br /><br /> 48:     <a href="<$BlogURL$>">&lt;&lt; Home</a> 49: </div> 50: </ItemPage> 51: </Blogger> 52: <!-- Archive Links --> 53: <h2 >Archives</h2> 53: <BloggerArchives> 54: <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a> 55: </BloggerArchives> 56: <script type="text/javascript" language="Javascript"> 57: if (location.href.indexOf("archive")!=-1)  58:     document.write("<strong><a href=\"<$BlogURL$>\">Current Posts </a></strong>"); 59: </script> 60: <p ><a href=""> 60: <img width="88" height="31"  61: src="/books/2/863/1/html/2/" 61: border="0" alt="Powered by Blogger./></a></p> 62: </div> 63: </body> 64: </html> 

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.

For the sake of brevity, the style sheet entries have been removed from this example. However, style sheets are surrounded by <style></style> tags, as shown on lines 7 and 9, respectively; the individual style definitions fall between these tags. Before the closing </head> tag, you might also find JavaScript elements that are used to control various display or functional aspects of your blog. This particular template does not show any JavaScript in the HEAD area, but if it did the code would be delineated by the <script></script> tag pair.


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.

Blogging in a Snap
Blogging in a Snap (Sams Teach Yourself)
ISBN: 0672328437
EAN: 2147483647
Year: 2003
Pages: 124 © 2008-2017.
If you may any questions please contact us: