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
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.
// 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>
<!-- 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>
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>
Archives for<br> the week of:<br> <script type="text/javascript" src="archives/<$BlogArchiveFileName$>"></script> <noscript>Javascript required</noscript> <br>
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>");
<!-- 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>