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:
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
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.
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:
- 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
Don't forget to change "YOURBLOGURL" to the proper url for your blog!
Adding a link to your Table of Contents page