Thursday, April 19, 2007

Blogger beta - archive calendar widget

Archive calendar widget. I've been wanting a calendar widget for my blog post archives ever since I saw them on Wordpress. I thought it was such a cool graphical way to display the archive - but I also wanted to retain a list of my posts as well.

I love the way that my blog posts for the past month can be displayed to show the days I wrote and the days I didn't. I like the fact that you can roll over the "writing" days and get the title of the blog post - and that you can click on the day and go straight to the post.

I like the fact that all my post titles for this month are still listed beneath the calendar - and that I can select the month I want to view on the calendar - and that changing the month automatically loads the list of posts for that month.

I also like the fact that I can style my calendar so that it matches the colours of my blog. That matters!

I've been periodically googling for a calendar widget that works in Blogger, and finally I spotted one on the very wonderful phydeaux3's blog. It's been up on his blog for a few weeks now, and I've been waiting with baited breath for him to post the instructions - which he's now done.

As always with phydeaux's Blogger hacks, he's written fantastically clear instructions to go with the widget - and in fact I don't think I need to add anything to them at all. All I need to say is - go forth and get your calendar widget! And thanks a million to phydeaux3 for the way he continues to create new tricks and widgets for Blogger - you rule, phydeaux3!

Oh - and if you see any styling in my version of the calendar that you'd like to include in yours, feel free to ask me in the comments and I'll endeavour to help!

Technorati tags: , , , , , , .


Q... said...


Thanks for the news. I am always on the lookout for new tools in this area.

Regina Thomas

phydeaux3 said...

Wow, thanks for the kind words and all the great spots/suggestions you made. Done 'em all.

And that is quite a fetching calendar, looks great on your blog with all the colors styled to match.

I may want to point out a little CSS niggle, that you got from me. I noticed this when I was making corrections, and somehow I screwed up this entry.

table#bcalendar tbody tr td {text-align:center;padding:2px;4px;border:1px outset #000;}

which should be

table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #000;}

Somehow I got that incorrect ;4px in there, and you got it from me. Doesn't seem to be harming anything, but just in case. It's fixed on my end now. I hope. :-) I've been looking at that stuff so much over the past few days I can't get my eyes to uncross.

Thanks again.

Claudya said...

Very cool tip! Thank you...;)

webweaver said...

Hi Regina!

Thanks for taking the time to comment on my post - much appreciated.

phydeaux3's blogger widgets are always awesome - and he does such fantastically clear and easy-to-follow instructions that anyone can implement them.

I'm always happy to point people in his direction - he does such great work.

phydeaux3 said...

Thought you might be interested, if you've noticed the calendar has stopped working.

First, all blogspot feeds were forked up, and everybody's that did just about anything were returning errors. But blogger jumped on it and fixed it...mostly. It looks like there are some lingering issues for very small cases, and you're one of them. Troublemaker! :-)

It seems to be down to only feed requests that are targeted to a time period, AND that are using anything in the +UTC timezones. Which you are. For example I don't, and my calendar is working fine. I've reported it, but haven't got a confirmation on the error yet.

If you want a quick fix, until Blogger sorts it out, if you change the calendar timezone setting to it's closest minus setting, like say -01, then it should start working again. You may see some slight offset if a post was made within a few hours of the beginning/ending of a day. It may show up on the wrong day, but it's better than an empty calendar. And since this will affect a smaller portion of users I don't know how quick blogger may fix it. If you want, I'll let you know when I see that it's been resolved. Sorry for the trouble with it, but it still seems to be on Bloggers side where the errors are.

webweaver said...

Thanks heaps phydeaux!

Yeah I noticed it was buggered up yesterday...

I'll reset the timezone and see if it works.

Looks like the Blogger redo has also buggered up my most popular posts widget - the text size has gone enormous! Sigh...

phydeaux3 said...

Quick heads up. As of right this moment, the blogspot feeds are still suffering the same fate with + signs for the calendar. But I did an update that does an end run around them if you want to get back to your proper timezone setting.

Explanation at calendar update...basically all you have to do is recopy/paste the script section only. Doesn't change any of the styling etc. you already have setup.


webweaver said...

awesome - thanks phydeaux3 - I'll fix it tonight.

prince of darkness said...

erm..good post..
can u help me uon the archive calender.
my template seems to doesn't have any one.
help me my blog
i don't have /head nor /skin

webweaver said...

@prince of darkness

Woah dude! Your template is SO broken I don't know where to begin...

I notice you're using a non-blogger template - maybe that's why, or maybe you just need to reinstall it and start again, cos you've definitely broken something.

It's probably quite simple - you've maybe accidentally deleted a closing div tag or something, but until you get it looking right, I don't think I can really help you.

Let me know once you've fixed the brokenness and then we can work out how to add the calendar widget.

Pam, probably. said...

Hi and Thank You for posting this! We followed your link to phydeaux3's blog and tried out the code.

Bingo! It worked beautifully on the first try. We even used additional code there to customize the colors for each of our blogs.

Thank you thank you again!
Pam & Frank, Oregon USA

Tamara said...

thanks for putting this up!!!

BenoƮt Cicchelero said...

Hi Webweaver, I really like the way you make the destinction between the posts through your icon arrow.

Could that just as easily be done for "li" bullets?

And do you know if the shown feeds under the calendar could be set to those of the current day only? Or from the last 3? Or with a maximum of 10 posts?

Rohini Kulkarni said...

Hey!! That was a really cool tutorial!! I kept searching for this calender from the time I saw it on wordpress!!
Thanks once again!! :-)

webweaver said...

Hi Rohini!

Glad you like it! phydeaux3 is one clever dude...


Kristen said...

Hello. I'm 32 weeks pregnant and I'm wanting to put a calendar on my blog that will allow family and friends to pick a day they think my baby will be born on. But I'm only able to find reguar calendars. Any suggestions??


Selena said...

Hello, Thanks for the tutorial. Any suggestions on how I can center the calendar? I've been searching the web but all i can find is how to center html.


webweaver said...

This comment has been removed by the author.

webweaver said...

Hi Selena

The easiest way would be to change a couple of styles within the calendar and just outside it.

Firstly you need to change the alignment of a wrapper div so that it's centered - like this:

#ArchiveList {

and then give the calendar table an auto margin to the left and right - like this:

table#bcalendar {
border:1px solid #000;
margin:0 auto;

Hope that helps!