Archive links in main page scripts

These Blogger archive scripts are intended to produce an archive index that can be used as a javascript source file, which is then included in your main page and in the actual archive pages with a <script src=...> tag. 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 "Archives for the week of..." and then writes links as "May 6, 2001". My favorite, the dropdown select menu creates (duh) a dropdown select menu like the ones you see on fancy PHP enabled sites, without the PHP, and lists archives from newest to oldest, just like the days in your blog. It also includes an option for the current page, so you can replace the entire "Home" link through "Archives" link section in the standard Blogger templates.

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 archive template and main template code in two Notepad windows. Paste the archive template code (from the "scriptname_include_in_archive_template" window if you are using "Get the code") into your archive template, replacing absolutely every single character that is in your existing template, and click save changes. Remember that for archive links to be included in your main page, your archive template must create a javascript source file, rather than a web page, so if you are switching from a separate archive index page, you will need to delete all the HTML that is currently in your archive template, not just replace the Blogger portion of the code.

Paste the code for the main template (from the "scriptname_include_in_main_template" window if you are using "Get the code") into your main template, click save changes, and post & publish to see your new archive links in action. 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, in both the archive template code and the main template code.

Basic script: Month names

Archive template

// moname[0] = "January" ...
var moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
<Blogger>
// tmp="05/01/2001 - 05/31/2001"
tmp="<$BlogArchiveName$>";
// get number for month
mo=tmp.substring(13,15);
// get number for year
yr=tmp.substring(19);
// change month number to name - remember January = 0
mo=moname[mo - 1];
// set date to "May 2001"
newdate=mo+" "+yr;
// tell the script to write the archive link in the main page
document.write("<a href='archives/<$BlogArchiveLink$>'>");
// tell the script to write the date
document.write(newdate);
// close the link tag and go to a new line
document.write("</a><br>");
</Blogger>

Main template

<!-- Paste into your main template where you want the archive links -->
Archives:<br>
<script type="text/javascript" src="archives/<$BlogArchiveFileName$>"></script>
<noscript>Javascript required</noscript>
<br>

Week of...

Archive template

var moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
<Blogger>
tmp="<$BlogArchiveName$>";
// get the starting month number
mo=tmp.substring(0,2);
// get the starting day
day=tmp.substring(3,5);
// get the starting year
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("<a href='archives/<$BlogArchiveLink$>'>");
document.write(newdate);
document.write("</a><br>");
</Blogger>

Main template

Archives for<br>
the week of:<br>
<script type="text/javascript" src="archives/<$BlogArchiveFileName$>"></script>
<noscript>Javascript required</noscript>
<br>

Dropdown select menu

Archive template

var moname = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// we need the links and names in an array, so we can loop through the options in the select menu
var archlinks = new Array;
var archnames = new Array;
var i = 0;
<Blogger>
tmp="<$BlogArchiveName$>";
mo=tmp.substring(13,15);
yr=tmp.substring(19);
mo=moname[mo - 1];
newdate=mo+" "+yr;
// put first link and name in archlinks[0] and archnames[0], second in [1], ...
archlinks[i] = "archives/<$BlogArchiveLink$>";
archnames[i] = newdate;
i++;
</Blogger>
// change current location to archlink when selected from menu
function gothere(where)
{
location.href = where.options[where.selectedIndex].value
}
// tell the script to start a form - the \ before the " tells javascript that you want to write a " rather
// than interpreting it as the end of the stuff you want to write
document.write("<form action=\"\">");
// tell the script to start a select menu that calls the gothere function when it is changed
// change the class= to change the appearance of the menu, but leave the \" before and after your class
document.write("<select name=\"archivemenu\" onChange=\"gothere(this)\" class=\"links\">");
// this is the first, nonfunctioning option, that tells the viewer what the menu does
document.write("<option value=\"\">Archives</option>");
// this is the option for your main, current page: if that isn't the default page for the domain then you
// have to change \"/\" to your location - for www.domain.com/me/blog/index.html use \"/me/blog/\"
document.write("<option value=\"/\">Current</option>");
// starting with the last link, and looping until we run out of links
for (i=archlinks.length-1; i>=0; i--)
{
// write an option tag with the link and the name of the month and year
document.write("<option value=\""+archlinks[i]+"\">"+archnames[i]+"</option>")
}
// close the tags for the form
document.write("</select></form>");

Main template

<!-- Because there is a "current" option for your main page, this
replaces both the archive link and the home link -->
<script type = "text/javascript" src = "archives/<$BlogArchiveFileName$>"></script>
<noscript>Javascript required for archives</noscript>



Valid HTML 4.01! Valid CSS!