30 How to create a table of contents page for your blog October 09, 2007 /

Until recently, I used Beautiful Beta's excellent "Table of contents" hack for this blog. This technique loaded the table of contents above other posts, and was accessible from a link in the sidebar. The only downside of this hack is that it significantly slows blog loading time, especially when your blog has more than 100 posts.

For the new template, I have modified this hack to show the table of contents for Blogger Buster on a post page instead. In this post I will explain how I did this.

Beautiful Beta's TOC hack requires two components. There is the code which calls the contents of your blog, and provides a link in the sidebar:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div> <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script> <script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

And the div element which features in a widget above your blog posts:

    <div id="toc"></div>

We need to combine both of these elements inside a post page, which will then create the link to show the contents of your blog, and open this in the actual post page.

First, create a new blog post and edit this in HTML mode, instead of rich text compose mode. Then, copy both elements of code from Beautiful Beta's hack into this page, like this:

Don't forget to change "YOURBLOG.blogspot.com" to the actual URL of your blog!

Then simply save the page, and you are done!

If you have more than 100 posts in your blog, you will need to repeat the line which calls the posts feed from your blog, modifying this so that it begins from the 101st post, like this:

<script src="script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script> <script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>

If you have more than 200 posts, you will need to add extra lines where the start-index is 201, and so on.

This ensures all of your posts are included in the original table of contents.

IMPORTANT: if you have already installed the TOC hack in your sidebar and above the main posts column, you will need to delete these two widgets to ensure they don't interfere with the loading of the table of contents on your post page, and also slow down blog loading time!

How it works

The TOC hack uses javascript to call the post titles from your blog's feed, and then displays them in a tabular format, arranged by post title, date or label.

This version of the TOC hack works almost exactly the same as Beautiful Beta's: the reader must click on the link to display the whole table of contents in the page, and is shown a message to explain that the page is loading. The main advantage of using a post page to display the TOC is that page loading time is significantly reduced for the whole blog, and only the TOC post page had a longer loading time.

I would have preferred to have the TOC load instantly with the page, but after some experimentation, I believe that I would need to add an "onload" function to the head of my template, which would load the TOC along with the rest of the blog even though it is only displayed on one page. However, I have tried to contact Beautiful Beta to verify this, and will of course post more on this subject here if this is possible.

Further modifications

If you take a look at my own Table of contents page, you will notice that I have also slightly modified some other elements of the hack:

• Changed part of the javascript to include a message above the table which explains how the contents can be used.
• Added styling to the table to ensure it matches the styling of my blog
• A slight change to the text above the "Show TOC" link

To add the styling for the template, I added some lines of extra CSS to the <b:skin> area of my template. Here is the CSS styling I added for your reference if you would prefer to also style your own TOC post pages:

The code I used

If you would like to use the modified javascript used here at Blogger Buster to display the TOC hack in a post page, feel free to copy the code below and paste this into your post page:

<div id="toclink"><p>On this page you can see the whole list of posts published.</p> <p>To show the full table of contents, please click on the link below (this may take a few moments to load)</p> <p><a href="javascript:showToc();"><b>Show table of contents</b></a></p> <br/><br/><br/><br/></div> <script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script> <script src="http://YOURBLOGURL.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script> <div id="toc"></div>

Don't forget to change "YOURBLOGURL" to the proper url for your blog!

Adding a link to your Table of Contents page

You will probably want to make a link in your sidebar to the table of contents page. Just visit the page you have created and copy the url from the address bar. Then create a new text widget (or HTML/Javascript if you prefer), create your link text, and then make this text into a hyperlink using the url you have copied. Then your blog readers will easily be able to find your table of contents page and will not be troubled by long page loading times!

Technorati Tags: toc | table+of+contents | widget | hack | beautiful+beta