ACZoom  ·  Archive-2016

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.