AndyB's Blog Archive Templates

Here you can find the most recent version of my Blogger Archive javascript scripts. The previous version(s) are found here. And you can view the lastest version in action here in my blog.

Important: Phil Ringnalda has done a lovely point'n'click Blogger Archive Script Generator loosely based on some of my code. It's probably the best way to get this functionality if you're not a script monkey yourself. :-)

The archive script presented here is designed for use with a weekly archive scheme. Points to note:

• Only the start date for an archive is rendered (saves screen space)
• The date is in UK format
• Archive pages get a link to the main page
• Current Archive page is not rendered as a link
• Previous week/Following Week links for quick access
• Can show all archive or only X archives (default 5)
• This preference is stored in a cookie
• NEW "Only X archives" behavior now shows archives centered around current archive
• NEW The archive list is now output as a HTML "ul" unordered list
• NEW For nebulous reasons of code-reuse and reduced-download-weight the archive script is now split into 3 scripts, 1 for Blogger and 2 for the web-page. But I still offer it as one file for those of you that need it.

Disclaimer: As far as I'm concerned this code is in the public domain, if you do use it, a credit would be nice, but is not necessary. Whatever happens, if you use this software I am not responsible.

Single File Setup

<script type="text/javascript" language="JavaScript" src="blogarc.html"></script>
	

where blogarc.html is the name of your archive file.

Add the following where you want the archive listing to be displayed

<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
WriteArchiveSection( BlogInfo );
//-->
//]]>
</script>
	

<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
WriteArchiveBottom();
//-->
//]]>
</script>
	

3 File Setup

<script type="text/javascript" language="JavaScript" src="cookie.js"></script>
<script type="text/javascript" language="JavaScript" src="blogarc.js"></script>
<script type="text/javascript" language="JavaScript" src="blogarc.html"></script>
	

where blogarc.html is the name of your archive file. In the blogarc.js file edit line 116 to change the value "blogarc" to your own archive prefix. Finally modify the Blogger Template as detailed in the Single File instructions.

If in doubt, just use your browser's "view source" facility to see how I've done it in my site

Here's the code:

// (c)2002 A J Buchanan. Blogger populated data structure

var count=0;
var BlogInfo = new Array();
<Blogger>
BlogInfo[count++] = new BlogArchiveEntry( 
    "<$BlogArchiveLink$>" , "<$BlogArchiveName$>" );
</Blogger>

// Other Data
var defaultlimit = 5;

// Limited Processing - Need list sorted 

function bi_comp( a, b ){
    return -a.Compare( b );
}

BlogInfo.sort( bi_comp );

// AJB 1/11/2001, cookie.js
// (very) Simple cookie handling

// Example usage:
// var Xcookie = new obiCookie( "LimitArchive", 365 );
// ( First Param is cookie name, second is desired expirey time in days)
//
// 1. Read Cookie
// var theCookie = Xcookie.GetCookie();
// if ( null == theCookie )
//        // Cookie does not exist
// else
//        // the cookie value can be taken either
//        // from the return value or from the .cookieVal property
//        var x = theCookie;
//        var x = Xcookie.cookieVal;
//
// 2. Write Cookie (Expiry time as in object initialisation)
// Xcookie.SetCookie( "106" );
//
// 3. Delete Cookie
// Xcookie.KillCookie();
//

// My Type 'obiCookie'

// Constructor
function obiCookie( theCookieName, theExpireTimeInDays ){
    this.CookieName = theCookieName;
    this.cookieVal = null;
    this.expireTimeInMs = theExpireTimeInDays * 1000 * 60 * 60 * 24;
}

// Methods
obiCookie.prototype.GetCookie = function(){  
    // Look for our named cookie
    var i = document.cookie.indexOf( this.CookieName + "=" );
    if ( -1 != i ){
        var e = document.cookie.slice( i ).indexOf( ";" );
        this.cookieVal = document.cookie.slice( 
            i+this.CookieName.length+1,
            (-1 != e)?e:document.cookie.length );
        return this.cookieVal;}
    return null;
}

obiCookie.prototype.SetCookie = function( Value ){
    var expireDate = new Date(); 
    expireDate.setTime( expireDate.getTime() + this.expireTimeInMs );

    var cookietext = this.CookieName + "=" + Value + 
        "; expires=" + expireDate.toGMTString();
    document.cookie = cookietext;
    this.cookieVal = Value; 
}

obiCookie.prototype.KillCookie = function(){
    var expireDate = new Date(); 
    document.cookie = this.CookieName + "=0" + 
        "; expires=" + expireDate.toGMTString();
    this.cookieVal = null; 
}

obiCookie.prototype.GetValue = function(){
    return this.cookieVal;
}

// AJB 28/10/2001 Better Archive Listings
// Last Update 3/8/2002

// My Type 'BlogArchiveEntry'
function BlogArchiveEntry( theLink, theName  )
{
    this.Link = theLink;
    this.Name = theName;
    
    // Extract Date from Name, Yuk!
    // 09/30/2001 - 10/06/2001
    this.StartDate = new Date( this.Name.slice(6,10), 
        this.Name.slice(0,2)-1, this.Name.slice(3,5) );
    this.EndDate = new Date( this.Name.slice(13+6,13+10),
        this.Name.slice(13+0,13+2)-1, this.Name.slice(13+3,13+5) );
}

BlogArchiveEntry.prototype.Compare = function( rhs ){
    if ( this.StartDate == rhs.StartDate )
        return 0;
    else if ( this.StartDate > rhs.StartDate )
        return 1;
    else
        return -1;
}

BlogArchiveEntry.prototype.MakeLink_UKShort = function(){
    var newName = this.StartDate.getDate()
        + "/"+(this.StartDate.getMonth()+1) 
        + "/"+this.StartDate.getFullYear();
    var outString = "";

    if ( -1 != location.href.indexOf( this.Link ) ){
        // No Link, this is our page!
        outString = "<span class='selected'>" + newName + "</span>";
    } else     {
        // Link
        outString = "<a href='" +
            this.Link + "'>" +
            newName + "</a>";
    }
    return outString;
}

BlogArchiveEntry.prototype.MakeLink_Normal = function(){
    var outString = "";
    
    if ( -1 != location.href.indexOf( this.Link ) ) {
        // No Link, this is our page!
        outString = this.Name;
    } else     {
        // Link
        outString = "<a href='" +
            this.Link + "'>" +
            this.Name + "</a>";
    }
    return outString;
}

// Short/Long listing selection
function ShowAll(){
    var cookie = new obiCookie( "LimitArchive", 365 );
    cookie.SetCookie( 0 );
    location.href = location.href;
}

function ShowSubset( HowMany ){
    var cookie = new obiCookie( "LimitArchive", 365 );
    cookie.SetCookie( HowMany );
    location.href = location.href;
}

// Locate URL in list of archives
function FindIdx( myURL ){
    for ( var n=0; n<BlogInfo.length; n++ )    {
        if ( -1 != myURL.indexOf( BlogInfo[n].Link ) )
            return n;
    }
    return -1;
}

// Make Archive Link Functions
function MakePreviousArchiveLink( myURL, AnchorText )
{
    var idx;
    if ( -1 == ( idx = FindIdx( myURL )) ) return null;
    if ( 0 == idx ) return null;
    
    if (( null == AnchorText ) || ( "" == AnchorText ))
        return BlogInfo[idx-1].MakeLink_UKShort();
    else
        return "<a href='" + BlogInfo[idx-1].Link 
            + "'>" + AnchorText + "</a>";
}

function MakeNextArchiveLink( myURL, AnchorText )
{
    var idx;
    if ( -1 == ( idx = FindIdx( myURL )) ) return null;
    if ( (BlogInfo.length-1) == idx ) return null;

    if (( null == AnchorText ) || ( "" == AnchorText ))
        return BlogInfo[idx+1].MakeLink_UKShort();
    else
        return "<a href='" + BlogInfo[idx+1].Link 
            + "'>" + AnchorText + "</a>";
}

function MakeFirstArchiveLink( AnchorText )
{
    if (( null == AnchorText ) || ( "" == AnchorText ))
        return BlogInfo[0].MakeLink_UKShort();
    else
        return "<a href='" + BlogInfo[0].Link 
            + "'>" + AnchorText + "</a>";
}

function WriteArchiveSection()
{
    document.write( "<ul>" );
    
    var isIndexPage = ( -1 != location.href.indexOf( "index.html" ) );
    var isArchivePage = ( -1 != location.href.indexOf( "blogarc" ) );
    var thisIndex = FindIdx( location.href );
    
    // Show Link for Home Page, if this is an archive Page
    if ( !isIndexPage )
        document.write( "<li><a href=\"./\">" 
            + "Current Posts</a></li></ul><ul>" );

    //    Next/Previous Links
    var navlink="";
    var wrotelink=false;
    if ( navlink = MakeNextArchiveLink( location.href, "Previous Week" )){
        document.write( "<li>" + navlink + "</li>" );
        wrotelink=true;
    }
    if ( navlink = MakePreviousArchiveLink( location.href, "Following Week" )){
        document.write( "<li>" + navlink + "</li>" );
        wrotelink=true;
    }
    if ( true == wrotelink ) document.write( "</ul><ul>" );
    
    // Work out extents of listing
    var startindex = 0;
    var limit = 0;
    
    var limitArchiveCookie = new obiCookie( "LimitArchive", 365 );
    if ( null == limitArchiveCookie.GetCookie() )
        limitArchiveCookie.SetCookie( defaultlimit );
    limit = Number(limitArchiveCookie.GetValue());

    if ( 0 != limit ){    // Showing a subset around the current archive file
        if ( -1 == thisIndex )
            startindex = 0;    // but this is not an archive page, so don't!
        else
            startindex = Math.round( thisIndex - (limit/2) );
        limit += startindex;
    }
    else    // Showing whole lisiting
        limit = BlogInfo.length;
        
    // Clamp selected region to ends
    if ( startindex < 0 ){
        limit -= startindex;
        startindex = 0;
    }
    if ( limit > BlogInfo.length ){
        startindex -= (limit-BlogInfo.length);
        limit = BlogInfo.length;
    }

    // The Archives
    for ( var n=startindex; n<limit; n++ )
    {
        document.write( "<li>" 
            + BlogInfo[n].MakeLink_UKShort()
            +"</li>" );
    }
    
    // Archive Length Options
    if ( 0 == limitArchiveCookie.GetCookie() )
        document.write( "<li><a href=\"javascript:ShowSubset(defaultlimit);\">"
            +"[Show Less]</a></li>" );
    else
        document.write( "<li><a href=\"javascript:ShowAll();\">"
            +"[Show All]</a></li>" );
    document.write( "</ul>" );
}

function WriteArchiveBottom()
{
    //    Next/Previous Links
    var navlink="";
    var wrotelink=false;
    if ( navlink = MakeNextArchiveLink( location.href, 
	     "[<< Previous Week]" ))
    {
        document.write( navlink );
        wrotelink=true;
    }
    if ( navlink = MakePreviousArchiveLink( location.href, 
        "[Following Week >>]" ))
    {
        document.write( (wrotelink?"  ":"") + navlink );
        wrotelink=true;
    }
    if ( !wrotelink )
    {
        document.write( MakeFirstArchiveLink( "[<< Archives]" ) );
    }
}