Tuesday, August 27, 2013

Boys and Heroes, Lovers and Men

It was in June my intention to write up a mini-report on The Age of Consent, Bronski Beat's 1984 debut record, but I got sidetracked by the Bluebird template thing - although I haven't had the CD in my possession for a couple of months, let me take a stab at it.

For better or for worse, Bronski Beat is more well-known for whom it comprised - gay men who wrote about their gay lives some of the time - than for the music it made. Thirty years down the line, of course, one wonders what the fuss was all about - you almost feel sorry for someone who would be shocked, shocked at hearing frontman Jimmy Somerville sing, And the sweetest thing of all is men loving men loving men loving men.

As you would infer from the preceding paragraph, I myself couldn't care less about Bronski Beat's sexuality, any more than I care that Bob Mould and Grant Hart are gay, any more than I care that Amy Ray and Emily Saliers are gay (Saliers prefers "gay" to "lesbian", so I'll use her word choice), any more than I care that Tegan and Sara Quin are gay - it simply isn't an issue to me. What I care about is the music, what's the music like, lads? So I'll focus on the music in the discussion below. Maybe Bronski Beat itself wouldn't want me to separate its gayness from its music, but that's what I'm going to do.

The Age of Consent CD that I checked out from the library held sixteen tracks: ten songs from the original Age of Consent release plus six bonus tracks, three of which were remixes culled from Bronski Beat's second record, Hundreds & Thousands. Musically, about half of the CD was synth-pop and about half of it I would describe as 'soul' for lack of a better term.

The reviews of Bronski Beat that I've seen alternately describe it as a synth-pop or dance band; this characterization as regards The Age of Consent is at best half correct, as noted above. Admittedly, it is possible that Bronski Beat ditched its soul side on its post-Hundreds & Thousands output, I don't know.

I did not like The Age of Consent at first listen for the following reasons:

(1) I did not care for Somerville's high register, approaching-falsetto vocals; if they're an acquired taste I didn't acquire it.

(2) The record's absence of guitar rubbed me the wrong way. (OK, there's some rhythm guitar on "Screaming" and I'm pretty sure that I can hear a faint guitar part on "Love and Money", but there needs to be more.)

"But there's no guitar on the Human League's Dare." Touché. And I would take those guys to task for it as well.

(3) Regarding the original Age of Consent synth-pop songs, I felt that the production could have been punchier. Hi-NRG? My standard of comparison for this sort of thing is Pete Shelley's XL1, to which The Age of Consent doesn't measure up. The Hundreds & Thousands tracks did have the punch I was looking for, however.

(4) I found some of the songs to be dreary ("Wasn't that the whole point, re the gay thing?"), but I suppose you could say that about a lot of early-1980s post-punk music.

Having said all this, I very much liked the textural elements that adorn the soul songs, namely, the clarinet, piano, and choir on "Ain't Necessarily So", the unusual percussion on "Screaming" and "No More War", the sensuous sax solo on "Love and Money", even the tap dancing on "Heatwave". Moreover, one of the synth-pop songs, "Why?", boasts a prominent brass part.

The Age of Consent did grow on me, and I even became accustomed to Somerville's vocals somewhat, with repeated listens. The record's highlights IMO are "Love and Money", "Need a Man Blues", and "Run From Love" (the last track is one of the Hundreds & Thousands add-ons).

Accompanying the CD was a booklet containing neither lyrics nor any credits but rather a fan-written essay that
(a) outlined the history of Bronski Beat during Somerville's time in the band (Somerville appears on Hundreds & Thousands but left prior to its release) and
(b) complained about a scornful New Musical Express review of The Age of Consent.
Actually, I doubt that Bronski Beat's press at the time was as vicious as what was doled out to Queen, Yes, and Styx in the 1970s, but I digress.

Bronski Beat did not make it past the mid-1990s. Somerville today enjoys a solo career but I have no idea what the two 'permanent' members of Bronski Beat - Steve Bronski and Larry Steinbachek - are currently doing.
Overall impression:
All in all, I would say that The Age of Consent is a good but not great record; it's definitely worth a listen, and as for most records, you would want to listen to it before deciding to buy it.

Our musical conversation will (not necessarily in the following entry, but at some point) next take up Norah Jones' Little Broken Hearts...
Posted by at No comments:

Monday, August 19, 2013

Spam/Big Pharma Update

Since my previous anti-spam broadside, the spam influx at my other blog has slowed to a trickle. The spam that has gotten through has been more 'sophisticated', however; here are a couple of examples:

Hellо thегe, Үou've done an excellent job. I will certainly digg it and personally suggest to my friends. I'm sure theу'll be benefited from this web site. start.com.my

Hey! Ӏ realize this iѕ sort оf off-topic but I hаd to ask. Doеs builԁіng a well-established wеbѕіte lіke youгѕ require a large amount of work? I'm completely new to running a blog but I do write in my diary everyday. I'd lіke to start a blog so I can ѕharе my exрerienсe and viewѕ online. Ρlеаse let me know іf you havе any kind οf recommendations oг tips for new aspігing bloggers. Thаnkуou! Heгe is my page :: http://www.isleofwightfacebook.co.uk

Hmmm, these comments almost seem legit, don't they? But each of them sports a link that points to a "not found" page.

Here's one that's not so sophisticated:

We are all culturally and socially brainwashed to a struggle against the demons of the like extremism that fueled those acts of repudiation in 1980 in Cuba. car hire lanzarote One of the worst possible consequences powerfulness; maintain and grow your mesh of contacts; be on the sentinel for opportunities. my site - car hire spain

Well, at least they've got the brainwashed part right. Following the link for this comment generates a Safari can’t open the page "http://www.bestcarhirespain.co.uk/" because Safari can’t find the server "www.bestcarhirespain.co.uk". message.

BTW, spammers, you shouldn't bank on anyone checking out your links if hemorrhoids or payday loans appears in the comment text.

Of course, this doesn't mean that the pharmaceutical pushers have been asleep at the switch. Tucked into recent batches of the snail-mail spam I get every two weeks or so have been pharmacy discount cards from Luscinia Health (LH) and Healthcare Alliance (HA).

The LH card never expires and is recognized for the savings by ABC and the New York Times, and is touted by a set of glowing testimonials on the back of the LH flyer.

As for the HA cards - there were two of them, plus two pharmacy discount key tags, in the mailing - they have no fees, now or ever: there are no forms, no maximums, and no exclusions; moreover, HA encourages its card users to give the extra card or key tag to anyone who could save money on prescription medications and offers a Web site URL and toll-free phone number to request more cards. For more on HA and its cards, check out this blog post.

Posted by at No comments:

Tuesday, August 13, 2013

Bluebird7

We finish the "Notes on the Bluebird Template" series with a quick run through some heretofore-unaddressed topics.

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 in an editable (not-readonly) textarea box for you to fold, spindle, and mutilate as you see fit.



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.
Posted by at No comments:

Friday, August 2, 2013

No Comment

OK, it's time for me to eat some crow. My approach to incorporating a simple comments facility into an ordinary Web page didn't work out as well as I envisioned it would. But let me tell you about it anyway, why not? (At the least you can have a good laugh at my expense.)

The HTML

The first thing we need is a text field into which the user can enter a comment: the most basic choice for this field is a textarea box (that's what Blogger uses - check the source of this page). Second, we should put a text box for the user's identity/name just above the textarea box. Third, after the textarea box we'll want a button that when clicked posts the user's comment.

<form id="inputForm" action="" method="">
Your Name: <input id="nameInput" name="username"><br>
Type your comment into the field below:<br>
<textarea id="commentTextarea" name="usercomment" cols="50" rows="10"></textarea><br>
<button id="commentButton" type="button">Click here to post your comment</button>
</form>

We will load the user's comment into a commentDiv div, which we'll place above the inputForm form:

<div id="commentDiv"></div>
<form id="inputForm" action="" method="">
...

Comment display

We can display the user's comment and identity by writing the values of the commentTextarea and nameInput fields to the innerHTML property of the commentDiv div. The innerHTML property was introduced by Microsoft for IE 4, has long had cross-browser support, and is currently on track to be standardized in a DOM Parsing and Serialization specification.

document.getElementById("commentButton").onclick = function ( ) {
    document.getElementById("commentDiv").innerHTML += document.getElementById("commentTextarea").value + "<br>"
    + "- posted by: " + document.getElementById("nameInput").value + "<br><br>";
    document.getElementById("commentTextarea").value = ""; }

The preceding function also clears the textarea box by setting its value to an empty string.

Remembering the user

Naturally we will want to display the user's identity in the nameInput field if the user returns to our page; we can do this by putting the identity in an HTTP cookie when the button is clicked

/* Add the following code to the commentButton.onclick function: */
var expDate = new Date( );
expDate.setFullYear(expDate.getFullYear( ) + 1);
document.cookie = "myTotallyUniqueCookieName=" + encodeURIComponent(document.getElementById("nameInput").value)
+ "; expires=" + expDate.toUTCString( );

and then retrieving the identity and writing it to the nameInput field's value upon a return visit.

window.onload = function( ) {
    var nameIndex = document.cookie.indexOf("myTotallyUniqueCookieName");
    if (nameIndex != -1) {
        var valueIndex = document.cookie.indexOf("=", nameIndex) + 1;
        var endstr = document.cookie.indexOf(";", valueIndex);
        if (endstr == -1) endstr = document.cookie.length;
        document.getElementById("nameInput").value = decodeURIComponent(document.cookie.substring(valueIndex, endstr)); } }

Setting the cookie

• The cookie's expDate expiration date is set one year into the future by the setFullYear( ) command.

• It is left to the reader to come up with a suitable myTotallyUniqueCookieName for the cookie's name attribute value.

• The encodeURIComponent( ) operation will be unnecessary for most user identities - we wouldn't need it for a Joe, a Mary Ann, or a reptile7 - but at least when using Safari we would need it (and its companion decodeURIComponent( ) operation in the window.onload function) for a name like Günther or Thérèse that strays outside the ASCII character range.

Getting the cookie

• Mozilla's current stringObject.indexOf( ) page is here.

• The document.cookie property gives a name1=value1; name2=value2; ... return for the cookies it holds. The nameIndex variable indexes the starting m of myTotallyUniqueCookieName; for a first-time visit, nameIndex is -1 and therefore nothing happens. The valueIndex variable indexes the first character of the user input we are fishing for; the endstr variable bounds the end of the user input.

Demo

In the bordered div below:
(1) Enter your name or other identity into the Your Name field.
(2) Type something into the textarea box; your textarea input may contain any mixture of text and HTML markup*.
(3) Click the button.
(*If I may make a little suggestion, use
<span style="color:red;">This is red text</span>
for your textarea entry and see what you get.)

Welcome to the comments facility test page.

Your Name:
Type your comment into the field below:





There's just one not-so-little problem with my comments facility. The innerHTML assignment does not permanently write a comment to the page: refresh the page and the comment will be gone. Relatedly, other users will not see your comment and you won't see their comments. Clearly, this is something you cannot do solely on the client side; it is necessary to store comments on the server side and then use the comments to dynamically write the page for its users. (Man, did I dream up this idea before my morning coffee or something?)
We'll wrap up the "Notes on the Bluebird Template" series in the following entry - we'll chat a bit about what happens in the document head and then maybe I'll have a few comments about the so-called "Simple" template that this blog uses.
Posted by at No comments:

Saturday, July 27, 2013

Notes on the Bluebird Template, Part 5

It's way past time that we got to the post part of the Bluebird template, and we'll do that today. The template's <BlogDateHeader> ... </BlogDateHeader> node, which we discussed two entries ago, is followed by a Post div

.Post { margin-bottom: 20px; font-size: 15px; padding-right: 15px; line-height: 22px; font-family: arial, helvetica; color: black; }
...
<div class="Post"> ... </div>

that contains the post title, the post itself, and a byline for the post.

The post title

Blogger assigns a multidigit ID to each of my posts; this ID serves as a fragment identifier for an anchor that precedes the post title.

<div class="Post">
<a name="<$BlogItemNumber$>"> </a><br />
...the post title...

FWIW, 7217738745400984168 is a typical <$BlogItemNumber$>. If there's a link somewhere to this anchor, I can't find it. Keep the anchor if you want, but I'd throw it out.

The anchor is followed by a somewhat-confusing block of code:

<BlogItemTitle>
<span class="PostTitle">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$>
<BlogItemURL></a></BlogItemURL>
</span><br />
</BlogItemTitle>

As you would guess, the post title is the replacement text for the <$BlogItemTitle$> reference. But what about the rest of it? The <BlogItemURL> ... </BlogItemURL> nodes and the link markup they contain are/were related to a "Link field" feature that Blogger has evidently abandoned. Moreover, the <BlogItemTitle> ... </BlogItemTitle> node seems to have a purely descriptive purpose, i.e., it doesn't do anything to the post title as far as I can tell.

The title is styled as follows:

.PostTitle { font-size: 16px; font-weight: bold; font-family: arial, helvetica; }

The post

...
</BlogItemTitle>
<$BlogItemBody$><br />

The post is the replacement text for a <$BlogItemBody$> reference that immediately follows the BlogItemTitle node. The post text is styled by the font-size, line-height, font-family, and color property declarations in the .Post { ... } style rule given earlier.

The post and its title are taken from their respective input fields at the "Create post" or "Edit post" page.

The post byline

Here is a typical reptile7's JavaScript blog post byline:

The post byline

The byline is held by a PostFooter span:

.PostFooter { margin-bottom: 10px; margin-left: 0px; color: gray; font-size: 10px; }
...
<span class="PostFooter"> ... </span>

The byline begins with a
- posted by <$BlogItemAuthorNickname$>
string; the <$BlogItemAuthorNickname$> reference returns the author's Display Name as set in the Identity section of the Edit User Profile page.

Next we have the post's 'permalink':

@ <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>

<$BlogItemPermalinkURL$> returns the URL of the post's individual post page; as for the link text, <$BlogItemDateTime$> returns a value based on the selected option of the Timestamp Format selection list in the Formatting subsection of the Dashboard Settings zone.

(A timestamp is not meant to be a dynamic feature and should not be created via a client-side script. If you want to append a timestamp to a block of content, then you should look at your watch, say "It's 2:53 in the afternoon," and type 2:53 PM into a suitable element - at least that's what I would do.)

If we're at the main page or one of the archive pages and if comments on the post are allowed, then the post's permalink is followed by another link that points to a separate "Post a Comment" page and whose text indicates the number of published comments the post has.

<MainOrArchivePage><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>

• <MainOrArchivePage> </MainOrArchivePage> are "conditional tags" à la the <ItemPage> </ItemPage> construct we encountered in Part 2 of this series.

• The <BlogItemCommentsEnabled> ... </BlogItemCommentsEnabled> node is turned on or off if comments on the post are enabled or not, respectively:

Post settings

• <$BlogItemCommentCreate$> returns the URL of the "Post a Comment" page. Bizarrely, <$BlogItemCommentFormOnclick$> returns a JavaScript statement that sets location.href to the <$BlogItemCommentCreate$> URL:

location.href = post-a-comment-pageURL;

According to Blogger's "Comments Tags" page, <$BlogItemCommentFormOnclick$> includes the code that opens the link in a popup window, if you have that option selected - an option that Blogger seems to have abandoned. In practice, the browser ignores the location.href assignment (no errors are thrown): in the Notes on invalid documents section of the HTML 4.01 Specification, the W3C stipulates, If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value). You can alternatively give the link a target="_blank" attribute in order to open it in a new window.

• As for the <$BlogItemCommentCount$> in the link text, I trust you can figure that one out.

The PostFooter span concludes with a <$BlogItemControl$> reference, which is replaced by
(1) a Email Post image-link to an "Email Post to a Friend" page and
(2) a Edit Post image-link to the "Edit post" page via which the post can be edited.
I am not inclined to discuss the Comments part of the Bluebird template; as noted in Part 1 of this series, my concern here is in applying the Bluebird template to the creation of normal Web pages vis-à-vis reproducing the template's blog-centric features. But then I thought, "Is it really that difficult to add a simple comments facility to an ordinary Web page?" As a matter of fact, it isn't - I'll show you what I came up with in the following entry.
Posted by at No comments:

Monday, July 15, 2013

Notes on the Bluebird Template, Part 4

A sidebar adorns the right side of the Bluebird template.

The Bluebird template sidebar

The sidebar is framed by a <div id="menu"> ... </div> div. The menu div is the second-in-source-order div in the template and the first child of the main div; both on the page and in the source, the menu div appears where it does because it is floated right. Here's the menu div's CSS:

#menu { border-left: 1px solid #000; border-bottom: 1px solid #000;
float: right; padding: 10px; width: 160px;
margin: 0px 0px 10px 10px; background-color: #eee; }

The menu div has an #eeeeee background color, which I do not particularly care for but has never bothered me to the point that I felt a burning need to change it.

The sidebar content can be divided into three sections: a description section, a profile section, and an archives section.

Description

The Basic subsection of the Dashboard Settings zone features a Description field for describing the blog.

The Basic subsection of the Settings zone

As shown by the preceding screen shot, the Description field's value can contain textual markup (for two paragraphs and a link in my case).

The menu div's first child is a Description div that holds the Description field value, which is the replacement text for a <$BlogDescription$> reference.

#Description { padding: 0px; padding-top: 10px; font-size: 12px; font-weight: normal; }
...
<div id="menu">
<div id="Description"><$BlogDescription$></div> ...

All of the padding properties have an initial value of 0 and therefore the padding:0px; style declaration can be removed. The font-weight property's initial value is normal and therefore the font-weight:normal; declaration can also be thrown out.

Profile

(N.B. Some versions of the Bluebird template do not have a SideBar div and wrap the archives section in an Archives div. What I describe in this and the next sections was true of the Bluebird template in March 2005, when I began blogging.)

#SideBar { font-size: 12px; margin-top: 15px; }
...
<div id="SideBar">
<!-- The profile section: -->
<$BlogMemberProfile$>
<!-- The archives section: -->
...
</div>

The menu div's second child is a SideBar div that holds both the profile and archives sections of the sidebar. I access my Blogger profile via a widget in the upper-right-hand corner of the Dashboard; if at my Edit User Profile page I
(a) upload a myPhoto.jpg Profile Photo,
(b) enter a Display Name in the Identity section (as is required),
(c) complete the Location section, and
(d) provide an Introduction in the Extended Info section, then
the <$BlogMemberProfile$> reference in the SideBar div is replaced by the following code:

<div id="profile-container">
<h2 class="sidebar-title">About Me</h2>
<dl class="profile-datablock">
<dt class="profile-img">
<a href="http://www.blogger.com/profile/10603056373768030580">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJm5Hz5bzABaho0GwcfwRK0uTTAKpSlE4uUZt0cKBFevzwfqT-Rr2l6OGLZOM21qhiFhnUsqeWw0N_7w57C0LWrgHeeSJ8ZcuCIH7fPrEaXAJ0VQc_iNow5HhQDMr6WjuTJ379qWZSYF-W/s1600/myPhoto.jpg" width="80" height="58" alt="My Photo">
</a>
</dt>
<dd class="profile-data">
<strong>Name:</strong>
<a rel="author" href="http://www.blogger.com/profile/10603056373768030580"> A. Peak </a>
</dd>
<dd class="profile-data">
<strong>Location:</strong>
New Orleans, LA, United States </dd>
</dl>
<p class="profile-textblock">Introduction text...</p>
<p class="profile-link"><a rel="author" href="http://www.blogger.com/profile/10603056373768030580">View my complete profile</a></p></div>

In-source-order commentary

• The sidebar-title h2 inherits a font-size of 12px from the SideBar div -
h2.sidebar-title { font-size: inherit; }
- pretty small for an h2, whose default font-size is 24px.

• The HTML dl, dt, and dd elements are detailed here.

• The profile-img dt is given an inline rendering (the dl, dt, and dd elements normally have a block-level rendering), but its only content is an image-link whose image component - the myPhoto.jpg photo - is floated left:
.profile-img { display: inline; }
.profile-img img { float: left; margin: 0 10px 5px 0; }
The former rule serves no purpose, whereas the latter declaration set should be applied to the profile-img dt:
.profile-img { float: left; margin: 0 10px 5px 0; }

• The Name: and Location: labels are given a block-level rendering by:
.profile-data strong { display: block; }

• The margin-left of the profile-textblock and profile-link p(aragraph)s is set to 0 (with respect to the SideBar div, their containing block):
.profile-textblock, .profile-link { margin-left: 0px; }
These settings are not overridden by the subsequent
p { margin: 0px 10px 10px 10px; }
rule in the style block.

The profile code contains not one, not two, but three links to my 10603056373768030580 User Profile page - a bit overkill, wouldn't you say? The link is fair enough but I would lose the first two of these links.

Archives

<!-- The archives section: -->
<strong>Archives</strong><br />
<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br />
</BloggerArchives>
<script type="text/javascript" language="Javascript">
if (location.href.indexOf("archive") != -1)
    document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");
</script>

The <BloggerArchives> ... </BloggerArchives> node is a container for links to the blog's archive pages. The <$BlogArchiveURL$> reference is replaced by a URL for an archive page. The replacement text for the <$BlogArchiveName$> reference is based on the selected option of the Archive Index Date Format selection list in the Formatting subsection of the Dashboard Settings zone.

<a href="http://reptile7.blogspot.com/2005_03_01_archive.html">March 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_04_01_archive.html">April 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_05_01_archive.html">May 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_06_01_archive.html">June 2005</a><br> <!-- Etc. -->

If we're at an archive page, then a script appends to the link list a Current Posts link that points to the main page (we previously encountered the <$BlogURL$> reference in our discussion of the Title div).

Script notes
(1) The language attribute of the script element is deprecated, but you knew that, right?
(2) If you're going to validate the page, then be sure to escape the </ character sequences in the a(nchor) and strong element end-tags, i.e., document.write("...Current Posts<\/a><\/strong>");.

One last point:
When my Archives link list began getting unwieldy, I capped the height of the SideBar div at 300px and set the div's overflow to auto so as to clip but provide scrollbar access to the beyond-the-div part of the list - this is not part of the template but I thought I'd give it a quick mention.
We'll discuss the template's Post div in our next installment.
Posted by at No comments:

Thursday, July 4, 2013

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.

The date header sits between the blog title and the post title

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

Blogger Dashboard zones

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

The Setting 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.
Posted by at No comments:
Subscribe to: Posts (Atom)