The document title
The template's title element holds a
<$BlogPageTitle$> Blogger tag.<html><head><title><$BlogPageTitle$></title>The
<$BlogPageTitle$> tag is briefly described in Blogger's "Template Tags: defined" article; it is replaced by a "smart title" whose text depends on whether the page is the main page, an archive page, or an individual post page.The
<$BlogPageTitle$> tag can be precisely defined in terms of other Blogger tags discussed earlier in this series.(1) At the main page,
<$BlogPageTitle$> = <$BlogTitle$>,that is, it returns the title of the blog.
(2) At an archive page,
<$BlogPageTitle$> = <$BlogTitle$>: <$BlogArchiveName$>,i.e., it returns a Blog Title: Archive Index Date string,
e.g., reptile7's JavaScript blog: January 2010.
(3) At an individual post page,
<$BlogPageTitle$> = <$BlogTitle$>: <$BlogItemTitle$>,i.e., it returns a Blog Title: Post Title string.
You can use JavaScript to create your own smart titles if you are so inclined, something like:
if (mainpage) document.title = mainpage_title_code;
if (archivepage) document.title = archivepage_title_code;
if (itempage) document.title = itempage_title_code;Metatemplate
The template head concludes with a
<$BlogMetaData$> Blogger tag.<head><title><$BlogPageTitle$></title>
<style type="text/css"> ... </style>
<!-- Meta Information -->
<$BlogMetaData$>
</head>At reptile7's JavaScript blog
<$BlogMetaData$> is replaced by four script elements, three meta elements, seven link elements, and two style elements - about twice as much stuff as the <$BlogMetaData$> sample output that appears in the aforecited "Template Tags: defined" article. No, I am not going to put my <$BlogMetaData$> output in front of you, but I do want to draw attention to one of its elements, namely, a meta element that specifies the document character encoding, because the formal validation of a document requires the presence of such an element:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">The Web Design Group maintains reasonably good pages on the meta element and the link element if you could use some help in crafting these elements.
Template download
I could offer you a shiny, spiffed-up Bluebird template that incorporates the changes I would make to it. But perhaps you would rather make your own changes, and for that reason I would just as soon offer you the original, uncut template for you to fold, spindle, and mutilate as you see fit. Go to this page and copy/paste what you see.
The big space issue
In the course of doing homework for this series I came across this "Blogger Buzz" page that references user complaints about
the big space at the top of ... blogs using the Bluebird template. To decrease the big space, the post's author recommends that users add a
#main #menu { position: absolute; right: 21px; }rule to the template's style block. I looked at that rule and said, "This isn't going to do anything": the menu div is off to the side - indeed, it is removed from the normal flow of the document by virtue of being floated - and shouldn't be playing a role in the big space issue. In the event, replacing the menu div's
float:right; style declaration with the position:absolute;right:21px; declaration set had no effect.Inspection of the CSS for the template divs at the top of the page allows one to quickly see which stylings are causing the big space issue; here are the changes you want to make:
(1) Get rid of the Title div's
padding-top:10px; setting (or decrease it to a smaller value).(2) Shrink the Title div's font-size to 32px (as though it were an h1 heading).
(3) Lose the DateHeader div's
margin-top:30px; setting (or decrease it to a smaller value).That'll do it, folks.
The "Simple" template
For this blog I opted to use a new "Simple" Blogger template. Skimming through the Simple template source gives me the feeling that I'm looking at a parody of a Web document: there are 144 divs in this thing, can you believe that? Running the first The Reptile7 Metablog post through the W3C's markup validator generates 51 errors and 6 warnings - impressive, huh?
The template's Template zone concludes with a Revert to classic templates section via which I can "revert" to Blogger's Rounders classic template if I so choose; for that matter there's nothing stopping me from replacing the Simple template source with the Bluebird template source. However, a classic template precludes
access to many new features such as the template designer- features that I by and large couldn't care less about. Actually, there is one such feature that is relevant to what I do: I can execute JavaScript with the Simple template (as long as there aren't any < characters in that JavaScript).
One very annoying aspect of the Simple template: I cannot check links in Preview mode (as I can at my Bluebird blog). I am able to work around this problem but Blogger really needs to get it sorted out.
We will probably return to non-technical territory in the next post.
No comments:
Post a Comment