Geekaholic
•  A Date to Behold!  •

I have updated the code with a much cleaner one, which can be changed easily if you want to alter the order or anything else. If you have one, you don’t need to update, but first time users might as well take the new one.⌘

Also, if someone has trouble finding the correct date format, see the picture below. It’s the second last format in the list :)⌘

⌘

This was something that I wanted to have when I saw it on Lifehacker. Their dates look, well, different, and I thought it’d be really cool to let your dates stand out than the normal one line dates that Blogger forces us to have. It is basically a function that takes in the Blogger date as an input, does some fancy splitting and slicing, and outputs the day, the month and year in it’s own seperate line, or if you like it, as a picture. There is a catch to the niceness.⌘

Before you jump in

If you want to use pictures, like I have, you’ll have to put in some time and photoshop work. Since there is no scripted way of generating pictures (not without much hallabaloo at least), you will have to make the picture for all days, months, and a few years. That means, you will need a picture with the numbers 1-31, month names January to December, and a few years from 2006-2008 (or from whenever you started your blog). This can be quite a job, so I’ll suggest you go with the first method.In case you want the pictures, you’ll need to modify the document.write statement to output image tags, with the source set to in a format of url/"+array-element+".png. This will generate an image for every value held in the array. That will take a bit of template modding as well, with some knowledge of CSS to make the styles. Don’t say I didn’t warn ya! :P⌘

The code

Let’s get hacking. Begin by changing the date format output of your dates from the blog settings. Change it to show dates as ‘23 January 2007’ (with the spaces, no commas). Then put in this bit of code in your <head> area:

Now, you’ll need to find the place where the date tag is in your template. The date tag looks like <data:post.dateHeader/>. You’ll have to replace that line, and anything else within that <b:loop> tag, except the conditional statement (<b:if>) with this:

That’s all you have to do at the template hacking level. The next to do will be to define styles for your newly generated date. Your three parts of the date are held in three <span> elements as you can see from the function up there, with the class attribute set to ‘theDate’ (for the day), ‘theMonth’ and the ‘theYear’. You can style all of them the way you like it by defining classes in your CSS named as div#post-date span.theDate and so on. You should set a display: block; to begin with so that they all come up in a seperate line. Other CSS style attributes can be applied as per required. The parent element will be styled with a div#post-date to hold the background. It can be a picture or a simple colour, it’s up to you. Here’s a sample CSS definition which you can use in case you’re lazy:⌘

div#post-date {
    display: block;
    float:left;        /* set this to right if you want it go to the right */
    padding: 1em;       /* to keep the text away from the edges */
    background-color: #555555;  /* you can change this to hold a picture, will make it look nicer */
    border: 3px double gray;   /* a border to make it look nice */
}

div#post-date span.theDate {
    display: block;       /* to put this in a different line */
    font-size: 3em;       /* to make the date stand out */
    background-color: transparent; /* to let the background show through */
    color: white;
}

div#post-date span.theMonth {
    display: block;
    font-size: 1em;       /* smaller compared to the date */
    background-color: transparent;
    color: white;
}

div#post-date span.theYear {
    display: block;
    font-size: 1em;       /* smaller compared to the date */
    background-color: transparent;
    color: white;
}

All that will go within your <b:skin> tags in case your wondering. If you know what you’re doing, go around and play with the attributes to get what you’ll actually looking for.⌘

That’s pretty much it! It’ll be a little hard to use images with this for those who don’t know Javascript, so if you want, I could modify the function for you to output the images. You’ll need to give me the URL to your images though. Do ‘not’ use Blogger Image hosting to upload your pictures. The path is never constant, and this function requires that the path always be constant, with only the names of the images changing. The names themselves should be 1.png, 2.png and so on for the days, January.png and so on for the months and 2007.png for the years. All in the same format! You’ll need to make 31+12+1 (atleast) = 44 images. I did it twice :P Once for my old blog, and then again for this new one. I’m beginning to not like this look too, so a third round might be imminent!⌘

But now you know how to get it done! So go ahead, make your dates look great!⌘

⌘ • Projects, Plugins, Hacks and Userscripts • 22 January, '07
Next —
Previous —