Notes on the Bluebird Template, Part 3

Having covered the Bluebird template's Title div in the previous post, we move on today to the template's date header.



Proceeding in source order:
• The Title div element's next sibling* is a <Blogger> ... </Blogger> node (for lack of a better word).
• The Blogger node's first child* is a <BlogDateHeader> ... </BlogDateHeader> node.
• The BlogDateHeader node contains a class="DateHeader" div element that holds the date header, which is the replacement text for a <$BlogDateHeaderDate$> reference.
(*I am ignoring inter-tag white space for my use of these terms.)

<div id="Title"> ... </div>
<Blogger>
<BlogDateHeader>
<div class="DateHeader"><$BlogDateHeaderDate$></div>
</BlogDateHeader> ... </Blogger>

The DateHeader div is styled as follows:

.DateHeader { border-bottom: solid 1px #c3cfe5;
font-size: 18px; text-align: left; margin-top: 30px; width: 300px;
margin-bottom: 0px; color: gray; font-weight: bold; }

If more than one post is published on a given date, the date header
(a) is displayed at each individual post page but
(b) only appears once for those posts at the main page or at an archive page.

How to configure the date header

At the www.blogger.com/home Dashboard, go to the Settings zone



and then to the zone's Language and formatting section.



The Formatting subsection features a Date Header Format selection list of 16 date header options from which to choose.

Coding the default date header

As shown by the preceding screen shot, the default Blogger date header has a Day, Month Date (preceded by a 0 if in the 1-9 range), Year format:



Creating this format with JavaScript is not at all difficult:

<div id="dateDiv" class="DateHeader"></div>
<script type="text/javascript">
var now = new Date( );
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var date = ((now.getDate( ) < 10) ? "0" : "") + now.getDate( );
var today = days[now.getDay( )] + ", " + months[now.getMonth( )] + " " + date + ", " + now.getFullYear( );
document.getElementById("dateDiv").textContent = today;
</script>

Quick script deconstruction

(1) We begin by creating a now Date object.
(2) We set up a days array of day names that maps onto the 0-6 returns of the Date object's getDay( ) method.
(3) We set up a months array of month names that maps onto the 0-11 returns of the Date object's getMonth( ) method.
(4) We get the date of the month; if the date is in the 1-9 range, we prepend a 0 to it.
(5) We piece together the various parts of the date header and assign the resulting string to a today variable.
(6) We load today into the DateHeader div.

Mozilla's current Date object page is here; go here for links to pages for the getDay( ), getMonth( ), getDate( ), and getFullYear( ) methods of the Date object; go here if you are unfamiliar with the ?: conditional operator.

It is left to the reader to adapt the above code to other Blogger date header formats.

Link styling, take two

In the previous post I neglected to mention that the Bluebird template's style block also contains a
a { text-decoration: none; }
rule that will de-underline all links on the page even if we throw out the style block's
#Title a { text-decoration: inherit; color: inherit; }
rule. To ensure that all of our links are blue and underlined, we should throw out the latter rule and change the former rule to
a { color: blue; text-decoration: underline; }.

---

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