Christian Moist

Fancy Blogger Calendar Date

There is a lot of talk about creating cool funky calendar style dates for blog posts like the one one this site. Most of them are centered around WordPress, as it's built in PHP, and is easier to manipulate.

Fortunately, the original Blogger allows users to publish files in php as well as html. As such, creating the calendar date thing is pretty straight forward in Blogger, when publishing in php.

Initially, Blogger outputs the date as a string like this:

Mar 9, 2009

After a bit of planning, we decide we want the month at the top, the day in the center, then the year offset at the bottom. We should be able to do this with four divs (or any block level elements, for that matter); one container div and one for the day, month and year. The container div will house a background image and the inner divs will have margins placing the data exactly where we want them.

Going to Photoshop, we design something like this:

You can see that the divs are laid out for each of the bits of data. From this, we can measure exactly how much margin we need and where.

Now lets lay out what we want the HTML to look like:

<div class="date-block">
<div class="date-m">jan</div>
<div class="date-d">21</div>
<div class="date-y">09</div>
</div>

Next, let's create the css to style our HTML above:

.date-block {
background: transparent url('../images/calendar.gif')
 no-repeat scroll top right;
display: block;
float: left;
font: normal 900 10px Verdana, Arial, Helvetica, sans-serif;
height: 59px;
margin: 25px 0 5px 0;
text-align: center;
width: 54px;
}

.date-block .date-m {
color: #FFF;
display: block;
line-height: 10px;
margin: 6px auto 2px auto;
padding: 0;
text-align: center;
text-transform: uppercase;
}

.date-block .date-d {
display: block;
font-size: 26px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 18px;
margin: 7px auto 0 auto;
padding: 0;
text-align: center;
}

.date-block .date-y {
color: #FFF;
display: block;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 9px;
margin: 4px auto 0 32px;
padding: 0;
text-align: center;
}

Lastly, we need to create a function that we can call in the Blogger template to turn the standard date into our new fancy calendar date. The function will look like the following, which you can place in an included file, or directly in the Blogger template:

function prettyDate($date) {
list($month, $day, $year) = explode(" ", $date);
$day = str_replace(",", "", $day);
$year = substr($year, 2, 4);
echo "<div class=\"date-block\">";
echo "<div class=\"date-m\">" . $month . "</div>";
echo "<div class=\"date-d\">" . $day . "</div>";
echo "<div class=\"date-y\">'" . $year . "</div>";
echo "</div>";
}

Breaking it down, we are going to split up the original date by exploding them by the space character, which will give us:

$month = "Mar";
$day = "9,";
$year = "2009";

Notice that there is still a comma after the day, so we replace ',' with nothing. Additionally, we turn the four digit year into a two digit year by grabbing the substring of the year, starting at the second digit and grabbing the following two digits, which will return '09'. At this point, we simply print out the HTML containing the variables $month, $day and $year.

Lastly, in our Blogger template, call the function and pass the original date to it:

<?php prettyDate("Mar 9, 2009"); ?>

The function will run when the page loads. This example assumes a couple of things. You have included a functions file with the above function in it. You have placed the CSS in an included CSS file, or directly in the Blogger template. You are running on a server that has PHP installed. Enjoy!

Labels: (X)HTML, PHP, Web Development

Posted by Christian on Mar 9, 2009 at 2:27 PM | Permalink 2 comments