Add A Blogger Archive Calendar Widget To Your Blog

Add A Blogger Archive Calendar Widget To Your BlogLive DemoOne 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'>
<h2><data:title/></h2>
</b:if>
<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>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

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

</caption>
<!-- 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>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

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

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

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

Now save the template.

STEP #2
Now find this code in the template:
</head>
And immediately ABOVE/BEFORE it, paste this code:
<!-- Start Blogger Archive Calendar -->
//STYLE CODE WILL COME HERE - SEE STEP #4
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blogger_archive.js' 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.

STEP #3
Now go to Layout -> Page Elements
and edit the properties of the archive widget according to this image:
Add A Blogger Archive Calendar Widget To Your Blog
Now the calendar widget will appear on your blog.

STEP #4
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='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dark_theme.css' rel='stylesheet' type='text/css'/>

Style – Plain White
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/plain_white.css' rel='stylesheet' type='text/css'/>

Style – Blue/Black
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blue_black.css' rel='stylesheet' type='text/css'/>

Style – Dusty Blue
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dusty_blue.css' 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

Leave a Reply

26 Comments on "Add A Blogger Archive Calendar Widget To Your Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
BEBEN
Guest

aw aw … you have goes ther too … Phydeaux3 😀
yeah…and now error in my blog … ~x(

View Comment
Divya Sai
Guest

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

View Comment
Reza@Blogging Guide
Guest

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.

View Comment
InBonobo.com
Guest
I've been using Phydeaux widget for a year now on my zamo.ca 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… Read more »
Prettyholic
Guest

It doesn't work 🙁

View Comment
ADM - nistrator
Guest

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…

THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…THANKS…

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

View Comment
Sai - Blogger Widgets
Guest

Haha..Revappa
That's the most unique comment on this blog…a dream come true widget 🙂
Happy for you !

View Comment
jaclyn
Guest

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

View Comment
Seo Tips
Guest

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

View Comment
Bdinamo
Guest

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!

View Comment
Максимилиан Эдельман
Guest
Masda
Guest

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

View Comment
mazanga
Guest

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

View Comment
Sai - Blogger Help
Guest

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.

View Comment
Moderator
Guest

hi..

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 http://ispaceexpress.blogspot.com/
please check and help..

View Comment
mido
Guest

thank you nice topic

View Comment
SARANSH
Guest

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 ""….

View Comment
Nags
Guest

i am getting the same error as above 🙁

View Comment
IMOOO
Guest

thank you for this, it's really cool

View Comment
Sudhakar
Guest

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.

View Comment
wpDiscuz