Notes on the Bluebird Template, Part 2

Welcome back to our discussion of the Blogger.com Bluebird classic template. The Bluebird template very prominently displays the blog title at the top of the page, and that title is as good a place as any to begin our template deconstruction. The blog title is held by an id="Title" div, whose full coding is given below:

#Title { font-size: 43px; padding-left: 0px; padding-top: 10px; text-transform: none; }
#Title a { text-decoration: inherit; color: inherit; }
a:hover { background-color: #c3cfe5; }
...
<div id="Title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</div>

The Title div is the fifth-in-source-order div in the template; it is the second child of the main div that frames all of the non-background content. (We will discuss the Title div's previousSibling, the menu div that contains the sidebar on the right side of the template, at a later point.)

The blog title (reptile7's JavaScript blog in my case) is the 'replacement text' for the <$BlogTitle$> reference. The title's font size is set to 43px, which is about 33% larger than that for h1 element text and which gives the title a bolded appearance. A padding-top:10px; style pushes the title down a bit from the top edge of the main div. BTW, the CSS text-transform property's initial value is none and therefore the text-transform:none; declaration can be thrown out.

If the Title div's containing document is for the blog's main page (http://reptile7.blogspot.com/) or for one of the blog's archive pages (e.g., http://reptile7.blogspot.com/2010_01_01_archive.html), then the div's only content will be the blog title. However, if the div's containing document is for one of the blog's individual post pages (e.g., http://reptile7.blogspot.com/2013/05/subtract-other-items-update.html), then the <ItemPage></ItemPage> conditional tags will wrap the blog title in an anchor element with a href attribute set to <$BlogURL$>, whose replacement text is the URL for the blog's main page. Long story short: At an individual post page, the blog title will link to the main page.

Style-wise, our new <a href="<$BlogURL$>"> ... </a> link
(a) inherits the text-decoration of its Title div parent, i.e., it won't be underlined (the initial value of the CSS text-decoration property is also none),
(b) inherits the color of its Title div parent, i.e., it'll be black for almost all users, and
(c) is given a #c3cfe5 background-color if we mouseover it.
I myself like blue and underlined links, and consequently would throw out the #Title a { text-decoration: inherit; color: inherit; } style rule.

A non-database ItemPage

We can easily duplicate the ItemPage functionality with a bit of JavaScript/DOM programming.

var mainpage = location.pathname == "/";
var archivepage = location.pathname.indexOf("archive") != -1;
var itempage = !mainpage && !archivepage;
window.onload = function ( ) {
    var titleDiv = document.getElementById("Title");
    if (itempage) {
        var titleLink = document.createElement("a");
        titleLink.setAttribute("href", "http://myblog.blogspot.com/");
        titleLink.textContent = "Title of My Blog";
        titleDiv.appendChild(titleLink); }
    else titleDiv.textContent = "Title of My Blog"; }

At the blog's main page the location.pathname return is / and at an archive page location.pathname contains archive; by process of elimination, we are at an individual post page if location.pathname is not / and does not contain archive.

If we are at an individual post page, then we
(1) create an empty anchor element,
(2) equip the anchor element with a href attribute that points to the main page's URL,
(3) load the blog title into the anchor element, and finally
(4) load the completed anchor element into the Title div.
If we are at the main page or an archive page, then we simply load the blog title into the Title div.

Of course, you might prefer to ditch the ItemPage/anchor markup and just go with a
<div id="Title">Title of My Blog</div> title, and that would be fair enough.

Blogger tags, take two

In the previous post I stated that the <tagName> ... </tagName> construct is an XML element, but I'm not so sure about that now. On the one hand, the browser sees it as an element node, it serves a descriptive purpose to an extent, and the tagName name is case-sensitive. However, it is clear from this post that <ItemPage></ItemPage> at least is as much a subroutine call - an onIndividualPostPage event handler, if you will - as it is a structural unit. Perhaps we should refer to <tagName> ... </tagName> as a function or operation - these terms are not wholly satisfactory but they're better than "tags", which implies a static structure.

---

We'll discuss the template's date header in our next installment.