Separate archive index page scripts

These Blogger archive scripts are intended to produce a separate page with a list of links to the individual archive files. The basic script, intended for monthly archives, writes links as "May 2001" and is heavily commented to make it easy to modify to suit your own taste. The other scripts only include comments for new features, but the "get the code" versions include all comments. For weekly archives, try the Week of... script, which writes a header of "The week of..." and then writes links as "May 6, 2001". Suitable for either weekly or monthly archives without any alteration, the Written out script writes links as "May 1-31, 2001", "April 29-May 5, 2001" or "December 31, 2000-January 6, 2001". Finally, the European style script, for weekly or monthly archives, writes the links as 6.5.2001 - 12.5.2001.

There are two ways to copy the code for these scripts: either highlight the code on this page and copy, or for IE 5.x users, just click the IE 5.x: Get the code button below each script to open the code in Notepad. Paste the code into your archive template, replacing the <Blogger> to </Blogger> code in your existing template, click save changes, and publish your blog to create the new archive index page. Remember that for a separate index page, your archive template must have the HTML to create the page, so if you are switching from archive links included in the main page, you will need to replace the script that includes the links with a <a href="archives/<$BlogArchiveFileName$>">Archives</a> link in your main template, then copy your main template and paste it into your archive template, and then replace the <Blogger> to </Blogger> with the code you copy from this site. Also note that throughout this site I assume your archives are in a directory named "archives" - if yours are in another directory, be sure to change archives/ to your directory name, or delete archives/ if your archives are in your main blog directory.

Basic script: Month names

<Blogger>
<!-- write the archive link-->
<a href="archives/<$BlogArchiveLink$>"> 
<script type="text/javascript">
// moname[0] = "January" ...
moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// tmp="05/01/2001 - 05/31/2001"
tmp="<$BlogArchiveName$>";
// get number for month
mo=tmp.substring(0,2);
// get number for year
yr=tmp.substring(6,10);
// change month number to name - remember January = 0
mo=moname[mo-1];
// set date to "May 2001"
newdate=mo+" "+yr;
// write it in the page
document.write(newdate); 
</script>
<!-- if javascript is off, write the ugly date -->
<noscript>
<$BlogArchiveName$>
</noscript>
</a>
<br>
</Blogger>

Week of...

<!--Start with the text The week of... because otherwise it looks like archives for just one day-->
The week of...
<Blogger> <a href="archives/<$BlogArchiveLink$>"> <script type="text/javascript"> moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); tmp="<$BlogArchiveName$>"; mo=tmp.substring(0,2); day=tmp.substring(3,5); yr=tmp.substring(6,10); mo=moname[mo-1]; // if day is 01 to 09, take just the second character if (day<10) { day=day.substring(1) } newdate=mo+" "+day+", "+yr; document.write(newdate); </script> <noscript> <$BlogArchiveName$> </noscript> </a> <br> </Blogger>

Written out

<Blogger>
<a href="archives/<$BlogArchiveLink$>"> 
<script type="text/javascript">
moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
tmp="<$BlogArchiveName$>";
// assign first month
mostart=tmp.substring(0,2);
// assign last month
moend=tmp.substring(13,15);
// assign first day
daystart=tmp.substring(3,5);
// assign last day
dayend=tmp.substring(16,18);
// assign first year
yrstart=tmp.substring(6,10);
// assign last year
yrend=tmp.substring(19);
mostart=moname[mostart-1];
moend=moname[moend-1];
if (daystart<10)
{
daystart=daystart.substring(1)
}
if (dayend<10)
{
dayend=dayend.substring(1)
}
// format the new date
// did week cross new year
if (yrstart != yrend)
{
newdate=mostart+" "+daystart+", "+yrstart+"-"+moend+" "+dayend+", "+yrend;
}
else
// did week cross new month
if (mostart != moend)
{
newdate=mostart+" "+daystart+"-"+moend+" "+dayend+", "+yrstart;
}
else
newdate=mostart+" "+daystart+"-"+dayend+", "+yrstart;
document.write(newdate); 
</script>
<noscript>
<$BlogArchiveName$>
</noscript>
</a>
<br>
</Blogger>

European

<Blogger>
<a href="archives/<$BlogArchiveLink$>"> 
<script type="text/javascript">
tmp="<$BlogArchiveName$>";
// assign first month
mostart=tmp.substring(0,2);
// assign last month
moend=tmp.substring(13,15);
// assign first day
daystart=tmp.substring(3,5);
// assign last day
dayend=tmp.substring(16,18);
// assign first year
yrstart=tmp.substring(6,10);
// assign last year
yrend=tmp.substring(19);
if (daystart<10)
{
daystart=daystart.substring(1)
}
if (dayend<10)
{
dayend=dayend.substring(1)
}
if (mostart<10)
{
mostart=mostart.substring(1)
}
if (moend<10)
{
moend=moend.substring(1)
}
// format the new date as d.m.yyyy
newdate=daystart+"."+mostart+"."+yrstart+" - "+dayend+"."+moend+"."+yrend;
document.write(newdate); 
</script>
<noscript>
<$BlogArchiveName$>
</noscript>
</a>
<br>
</Blogger>



Valid HTML 4.01! Valid CSS!