Add A Blogger Archive Calendar Widget To Your Blog

Live 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:

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