Add A Blogger Archive Calendar Widget To Your Blog

Live Demo
One of the most famous widgets available on WordPress which is rarely seen in a Blogger blog is of course a calendar archive widget, in which dates are linked to posts published on that particular date.
Thanks to Phydeaux3 as we now have this widget for Blogger too.
Although you can add a simple calendar to your blog, as a HTML/JavaScript widget, but this one is far more advanced than that one.
This tutorial has mainly four steps, three are common to everyone and in the fourth step, styling of the widget will be done [you can select from the pre-made skins or you may modify/design a unique theme for your widget].

Instructions To Follow:

STEP #1:
Log in to Blogger, go to Layout
Now add the regular Blogger Archive widget (if you do not already have one in your blog). [BTW don't worry nothing will go wrong :)]

Now go to Layout -> Edit HTML
and "Download Your Template" as a back up, if anything goes wrong.

then find this code:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
The id can also be BlogArchive2 instead of BlogArchive1.

Replace that line with this code:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
<b:include name='quickedit'/>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><></a> (<>)

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
<div id='calendarDisplay'/>

<script type='text/javascript'> initCal();</script>

<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

Now save the template.

Now find this code in the template:
And immediately ABOVE/BEFORE it, paste this code:
<!-- Start Blogger Archive Calendar -->
<script src='' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
<!-- End Blogger Archive Calendar -->
Again save the template.

Now go to Layout -> Page Elements
and edit the properties of the archive widget according to this image:

Now the calendar widget will appear on your blog.

Go back to Layout -> Edit HTML.
Now here's the styling part of the tutorial; select the best theme for your blog from this page:
Archive Calendar Styles [Just remember the name of the style]

Now copy the code of that style (and replace the code in RED in STEP #2 with this one):

Style for Dark Templates
<link href='' rel='stylesheet' type='text/css'/>

Style - Plain White
<link href='' rel='stylesheet' type='text/css'/>

Style - Blue/Black
<link href='' rel='stylesheet' type='text/css'/>

Style - Dusty Blue
<link href='' rel='stylesheet' type='text/css'/>

If you want to change the color/width etc. of this widget yourself, then instead of using any of the 4 style-themes from step #4, modify the Plain Simple Theme according to the instructions/comments written along the code lines and place it in to your template.

Credits for the widget: Phydeaux3

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Next Post »


Write comments
December 18, 2009 11:29 AM delete

aw aw ... you have goes ther too ... Phydeaux3 :D
yeah...and now error in my blog ... ~x(

December 18, 2009 11:44 AM delete

Hey Beben, just visited your blog, the widget is working fine, what's the error?

December 18, 2009 9:18 PM delete

Cool, but I don't think I need that (at least for now), may be it will be useful in the future, and I will remember Bloggerstop.

December 20, 2009 9:52 PM delete

I've been using Phydeaux widget for a year now on my blog. However, one thing I wish for but could not do it myself is a fixed length. That is, a fixed number of articles to be displayed regardless of the current date.

Currently, the widget stops displaying articles from the previous month on the 1st of each month. This causes it's length to vary throughout the month.

I'd like to be able to configure the number of articles shown by the widget and have that number kept constant - i.e., the widget should always display the latest n articles, where n could be 5 or 10 or 20.

What do you think? Can it be done?

Also, how did you manage to configure your domain so that you don't use the www. (or 3rd leved domain) with Blogger?

April 10, 2010 1:09 AM delete

Thanks A Lot Buddy.....

i Was Looking For This Widget From The Past 6 Months... It Used To Come iN My Dreams Also...U Made My Dream Come True...

I Have Inserted This Gadget In All My 5 Blogs...


Thank U Very Much,
Revappa, Benagaluru, Karnataka, INDIA

April 10, 2010 6:42 AM delete

That's the most unique comment on this blog...a dream come true widget :)
Happy for you !

April 11, 2010 12:40 PM delete

Thanks!! Finally I found some instructions where it's simple and easy enough for a techno-idot to follow. Thanks again!!

April 13, 2010 5:20 AM delete

Its really great and helpful for new blogger who wants to add this widget. Thanks for sharing.

April 18, 2010 11:46 AM delete

Teşekkür! Finally I found some instructions where it's simple and easy enough for a techno-idot to follow. Son olarak ben o sade ve yeterince kolay bir techno-idot takip etmek için biraz talimatlar bulundu. Thanks again!! Tekrar teşekkürler!

June 09, 2010 9:07 PM delete

Hoho, thanks for share, very beautiful,,,good job brother, i will try

July 10, 2010 9:13 AM delete

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

cant find it, n i cant save it. otherwise looks like a widget i would like to have

July 10, 2010 2:29 PM delete

Well I don't think that this error is because of this widget...
Try to save your template, WITHOUT editing anything in it - if the error still appears then already there's something wrong in the template...which wasn't already reported.

If no error comes, then remove your present archive widget and then add it again (in some other part of your template - like below the post area) - and follow the rest of the tutorial as it is - and after saving your template, drag the widget back to the sidebar wherever you want it to be.

August 11, 2010 5:37 AM delete


i tried your widget because i facing an issue in my blog: the color of the links in the archive widget(fefault blogger widget) was black and my background was black so the posts were not visible in archive widget.

i tried your widget. same prolem in other themes only dusty blue seems to be showing the text but now in the calender all the numbers for which no post have been made are not visible.

My blog is
please check and help..

September 03, 2010 10:44 AM delete

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

March 25, 2011 8:34 PM delete

i am getting the same error as above :(

April 03, 2011 3:13 AM delete

thank you for this, it's really cool

April 28, 2011 10:20 PM delete

Thanks It's working Fine,It is more attractive If any body add a 3-D look as well as with different colors,default colors of this calendar need editing.

July 14, 2011 11:40 AM delete

How can I get the headline of this really nice calendar in german ?

July 15, 2011 12:35 AM delete


January 23, 2012 7:00 AM delete

How can I remove the post list from under the calender?

May 12, 2012 7:28 AM delete

Very nice! Thanks for sharing this! :D

February 03, 2013 3:28 PM delete

the Javascript file is not available anymore, can you please update this??


Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon