PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Replace Date Headings with a Funky Calendar In Blogger

Posted by on 28th Jul 2008 Blogger, Design & Coding 14 comments

Calendar icons replacing date headings are a stylish trend of modern blog design. When I saw this style of date-heading on the Twitter status blog, I decided to find out how this could be adapted for use in Blogger blogs.

So in this tutorial, I’ll explain how you can replace your boring date headings in Blogger with a stylish Twitter style calendar format like this:

This is a simple customization to make to your Blogger powered blog and requires only a few modifications to your template and settings.

Here is how to add this calendar style date-format to your blog:

  1. Go to Settings>Formatting in your Blogger dashboard and change the format of your date to yyyy-mm-dd. Then save this setting.
  2. Next, go to Layout>Edit HTML and search for the closing </head> tag. Immediately before this tag, paste the following lines of code:

    <script src='http://bloggerbuster.com/scripts/fastinit.js'>
    <script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'></script>
    <script src='http://bloggerbuster.com/scripts/bloggerbuster-calendar.js'></script>

  3. Finally, find the closing </b:skin> tag in your template (or </skin> tag if you are using a Classic Blogger template). Just before this tag, paste the following section of code:

    .cal {
    text-align: right;
    width: 140px;
    float: right;
    white-space: nowrap;
    font: Normal 34px Helvetica, sans-serif;
    letter-spacing: -2px;
    color: #ccc;
    text-transform: uppercase;
    line-height: 35px;
    }
    .cal_day { float: left;}
    .date-brick {
    float: right;
    height: 30px;
    width: 45px;
    background-color: #6498cc;
    color: #bbd5f1;
    font: Bold 12px Verdana, Sans-Serif;
    text-align: center;
    line-height: 12px;
    margin-left: 10px;
    padding-top: 5px;
    letter-spacing: 0px;
    overflow: hidden;
    }

  4. Now when you preview your template, you should see the stylish calendar format appear at the top right hand side of your post titles! Save your template and enjoy your funky new date headings.

How this works

The script used in this customization parses any date which is contained between <h2> and </h2> tags, replacing it with this format of date instead. You can see this customization in action in this test blog.

You can change the style and color of this calendar format by editing the style code to suit your preferences.

Troubleshooting

If you experience problems using this customization, here are a few things you can try:

  • Refresh your browser to ensure the modifications to your template have been taken into account.
  • Make sure you have set the correct date format for your date headings in the Settings>Formatting page of your dashboard. The format should be YYYY-MM-DD (Year, Month, Day separated by dashes).
  • If all else fails, check your template code to ensure the tag <data:post.dateheader /> is contained in H2 tags. This line of code should appear like this in your template:

    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>

    It may be nescessary to edit this line so that it appears like the line in red above.

Download code for the Blogger date calendar

If you prefer to host the JavaScript files required for this calendar format yourself, you can download these files below:

Funky Calendar for Blogger (Zip File)

Be sure to change the URLs to these scripts in the header section of your blog in order for these scripts to work!

What do you think?

I would appreciate your feedback about this calendar formatting customization, so please feel free to leave your comments and opinions below.

Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

14 comments - Leave a reply
  • Posted by Andrew. Fredericksbu on 28th Jul 2008

    That is an awesome tip! Thank you for this. I'll have to incorporate it into some of the Blogger blogs I help with.

  • Posted by Shane on 28th Jul 2008

    Bummer! I tried it and can't get it to work. I even followed your tips. :cry:

  • Posted by Andre on 29th Jul 2008

    Hello Amanda,

    I've tried to follow your step-by-step instruction, but I was given an error message as follows:

    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 "script" must be terminated by the matching end-tag "".

    Also, should I check "expand widget templates"?

    Thanks in advance.

  • Posted by lisa on 2nd Aug 2008

    Ummmm classic templates doesnt use any codes with 'skin'

  • Posted by Web Design Zoo on 6th Aug 2008

    Great tips, it's always nice to jazz up that rusty looking blog.

  • Posted by Kct on 20th Aug 2008

    It doesn't work if there is more than a post per day. :roll:

  • Posted by Rohan on 15th Oct 2008

    Awesome! Cleanest code I've found on the net for this purpose. Thanks a lot! :)

    Rohan

    Daily Humor

  • Posted by Rohan on 21st Oct 2008

    Hey, just found a bug in your code. The calendar js array for the dates doesn't have a couple of dates (8th and 11th), I think. And '29th' is spelt as '29yh'.

    Rohan

    Daily Humor

  • Posted by Rohan on 21st Oct 2008

    Also, I found that dates always show the wrong date (e.g. 21st shows as 22nd). So I subtracted one from the getdays call.

  • Posted by Rohan on 23rd Oct 2008

    Ok, huge bug! Any idea why this doesn't apply the styles in IE? The text substitution happens fine.

  • Posted by eksuterru on 6th Nov 2008

    :mrgreen: thank you! simple steps too! been wanting to do that date icon thingy for my blog

  • Posted by Andy on 14th Nov 2008

    The first line of code needs a closing tag. Add this at the end of line

    I would assume that is the reason why some of the people commenting say that they can't get it to work.

  • Posted by Grace on 18th Dec 2008

    Hi I just implemented your code. But the dates do not tally with the actual blogger dates. What is happening? How do I fix it?