Custom CSS Date Blocks in Blogspot, or Elsewhere

When creating a new layout for your blog, blogspot, or anywhere else, you may want to design a nice CSS styled date block for each entry, rather than to have the publish date in plain text. In doing so though you will most likely hit a buffer pretty fast. The quickest & simplest way around that is to use javascript to rewrite the HTML with the values of the date inserted correctly into the appropriate divs assigned with day, month and year specific style classes.

By way of a quick solution, start by setting your blog publish date to the “Month, Day Year”, and then include the following code in-page, along with JQuery:

$(document).ready(function() {

	// iterate through each date block found
	$(".date-header").each( function() {

		var element = this; // assign current item to var
		var txt = $(this).html(); // grab html to string var

		//check the legth of the string
		if (txt.length > 5) {

			var parts = txt.split(" ");  // split the date based on " "
			var year = "" + parts[2] + ""; // assign year
			var month = "" + parts[1] + ""; // assign month
			var day = "" + parts[0] + ""; // assign day

			// replace the html with update code for styling
			$(element).replaceWith("<div class='date-header'>
			<div class='month'>" + month.substr(0,3) + "</div>" +
			"<div class='day'>" + day + "</div>
			<div class='year'>" + year + "</div></div>");
		} else {
			$(element).replaceWith("");  // strip out  blocks with nothing
		}

	// end iteration function
	});

});

As you can see the code is simple and flexible, so amend it as you like and enjoy some improved styling opportunities for the posting dates o your blog. Why leave them so bland?