I first came about archive calendar widget from phydeauxredux. The installation process is very simple and I think you never face any problem.
But, the entries of BloggerSPhera and Vagabundia show us how you install the widget that is better look as compare to phydeauxredux. So I decide to install it.

In archive calendar widget show us how to change the way we see the elements blogger files, replacing the charts for a calendar.
Although I have implemented here in my side bar and you can see and check how it is running.

You see in the calendar, you have a control to select the month, where the days will be highlighted where there are entries in that month.
A navigation bar to move forward and backward month by month and below, a list of links to the corresponding inputs.

To apply the widget, you first download the script for this file is in zip.

Now you unzip the file and put the JavaScript just above the </head>.

In the second step, add blog archive page element in your blogger.

Now replace

<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>

With the following code:

<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
<b:includable id='toggle' var='interval'> <!-- Toggle not needed for Calendar --> </b:includable>
<b:includable id='interval' var='intervalData'> </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>
<thead id='bcHead'/>
<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 id='bcFootAll'/><td id='bcFootNext'/></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='menu' var='data'> </b:includable>
<b:includable id='posts' var='posts'> <!-- posts not needed for Calendar --> </b:includable>
<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>
</div>
</b:includable>
</b:widget>

Finally, add the following CSS properties for the calendar just before ]]</skin>

/* Archive calender element
---------------------------------------------------------------------/
#blogger_calendar { /* is where we show the block */
margin:0 auto; /* centered */
width: 190px; /* width */
}

#bcaption { /* the rectangle above the months */
height:20px;
text-align:right;
}
#bcaption select { /* this is the selector of the months */
background-color: #345;
border: 1px solid #567;
color: #DDD;
font-family:Tahoma;
font-size:11px;
padding: 0 0 0 10px;
width:100px
}

table#bcalendar thead tr th { /* each cell with the names of the days of the week */
background: #345;
border: 1px solid #567;
color: #EEE;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
padding: 2px;
text-align: center;
width: 20px;
}

table#bcalendar tbody tr td { /* each cell with the number of day */
background: #567;
border: 1px solid #789;
color: #ABC;
text-align: center;
padding: 2px;
-moz-border-radius: 2px;
}

td.highlightCell { /* the cells where there is input */
background-color: #9AB !important;
}
table#bcalendar tbody tr td a { /* the link of these cells*/
color: #000;
font-weight: bold;
}

td.firstCell { /* empty cells at the begining */
visibility: hidden; /* we can make them visible using visible */
}
td.emptyCell { /* empty cells in the final */
visibility: hidden; /* we can make them visible using visible */
}
td.filledCell {background: #FFF;} /* colour of empty cells if they are visible */

table#bcNavigation { /* is the bottom navigator bar */
color: #DDD;
background-color: #123;
border: 1px solid #234;
font-family:Tahoma;
font-size:10px;
margin: 5px 0 0 0;
padding: 0 ;
text-align:center;
width:190px;
}
table#bcNavigation a {color: #ABC;} /* text colour */
td#bcFootPrev {float: left; width: 10px;} /* back link */
td#bcFootNext {float: right; width: 10px;} /* forward link */
#calendarDisplay{ /* Below is the list of entries */
}

/* This is the list below showing the entries of the month */
ul#calendarUl { }
ul#calendarUl li { }
ul#calendarUl li a { /* each list item is a link */
color: #9AB;
display: block;
font-size:11px;
padding-left:30px;
}

Now check the installation by click the preview tab. Then, save the widget.
It is done.


Happy blogging!

NOTE: If you have any problem, please fill it free to ask the question to resolve the issue.
You also visit phydeauxredux, BloggerSHhera and Vagabundia's page for better understanding.

New Archive Calendar Widget for Blogger Subscribe to updates