Blogger date - tear-off desktop calendar format

There are a few of these on the web, here's one more!

The code below uses JavaScript to replace date text on a HTML page, and the CSS code styles it in the format required. Blogger instructions provided. Blogger does not make it easy to do this - in fact, there are quite a few things missing that are necessary to make good use of blogger, for low-volume, friends-and-family type of blog sites.

Date may be displayed in two ways, as shown in the image: if the date text is of the format Sunday, June 27, 2010 then a block is created to make the date look like it is from a desktop calendar. Any other date format is displayed as is, in a rounded border box.

Unfortunately, it is not east to insert this in Blogger templates. It requires manual editing, so the usual disclaimers apply - keep a backup, and don't do this unless you are comfortable with editing blogger templates.

Copy the JavaScript section to the head section in the blogger template. Copy the CSS section also to same place, or add it to the "Add CSS" button available under Advanced in the Blogger Template Designer.

Then, change the HTML that prints the date, the example below uses the timestamp (to show the date on every post, unlike the default blogger behavior which shows date only once, for all postings made on one date). Remove this line:

Remove that line (and any surrounding enclosures that are not needed). Where appropriate, add:
calDate('');

For example, put that just before:

or after:

All the code as well a working HTML page is at this link: example code for desktop-calendar style date formatting. Visit that page, view the source, or save it locally and edit the colors, borders, sizes as needed for your purpose, and then upload the appropriate JavaScript and CSS code to your Blogger template.

Comments

I'm trying this code on my

I'm trying this code on my layout tester blog and it doesn't work properly. I may have taken your instructions wrongly. Blogger is always showing me this message whenever I try it out:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:skin" must be terminated by the matching end-tag ""."

Your help would be very much appreciated. Thanks!

Yes, maybe you left out the

Yes, maybe you left out the closing } for the div.cal-date p.year final style.
Use the "New Template Designer" in blogger, and use Advanced and then Add CSS to add the styles. But even then, if you leave out the final }, it will fail.

In any case, this does require careful editing of the template file and does require great care in watching where to place things - the error message is quite good - if you go to normal "Edit HTML" you can download your template, and then use a local editor to find out what went wrong. As the error message says, look for b:skin and its start and end tags.