Replace Date Headings with a Funky Calendar In Blogger
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:
- Go to Settings>Formatting in your Blogger dashboard and change the format of your date to yyyy-mm-dd. Then save this setting.
- 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> - 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;
} - 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.
Andrew. Fredericksburg Attorney. | July 28th, 2008 at 4:49 pm #
That is an awesome tip! Thank you for this. I’ll have to incorporate it into some of the Blogger blogs I help with.
Shane | July 28th, 2008 at 7:40 pm #
Bummer! I tried it and can’t get it to work. I even followed your tips.
Andre | July 29th, 2008 at 11:05 pm #
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.
lisa | August 3rd, 2008 at 2:09 am #
Ummmm classic templates doesnt use any codes with ’skin’
Web Design Zoo | August 6th, 2008 at 6:42 pm #
Great tips, it’s always nice to jazz up that rusty looking blog.
Kct | August 20th, 2008 at 7:33 pm #
It doesn’t work if there is more than a post per day.
Rohan | October 15th, 2008 at 12:38 pm #
Awesome! Cleanest code I’ve found on the net for this purpose. Thanks a lot!
Rohan
Daily Humor
Rohan | October 21st, 2008 at 11:03 am #
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
Rohan | October 21st, 2008 at 11:17 am #
Also, I found that dates always show the wrong date (e.g. 21st shows as 22nd). So I subtracted one from the getdays call.
Rohan | October 23rd, 2008 at 12:11 pm #
Ok, huge bug! Any idea why this doesn’t apply the styles in IE? The text substitution happens fine.
eksuterru | November 6th, 2008 at 9:58 pm #
Andy | November 14th, 2008 at 1:38 pm #
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.