Create a Table of Contents or Sitemap for Blogger blogs

CAUTION: LATEST UPDATE ON DEC 12, 2013
Please ignore my tutorial below since it is no longer
applicable as Abu Farhan's script is now not workable.
Moreover, Google has issued a malware warning
on Abu Farhan's site as follows:
'This site may harm your computer'.

Another day of rejoicing! I'm overjoyed as I've just created a Sitemap Page here today! This is a better and more comprehensive way of displaying our Blogger blog's posts, sorted by labels and having them all contained in a single page, making them easily accessible and readily navigable for visitors and search engines alike. It brings alive posts that would otherwise have remained buried within our blog from readers' eyes, probably from blog owners' sight too...like, out of sight, out of mind!

This Table of Contents (TOC)/Sitemap generator widget (script) for Blogger-powered blogs, generously shared by Abu Farhan (thank you so much, Abu) [do not click both these links as per caution note above] is so easy and quick to install. And, the best part is, once installed, the script not only generates automatically a table of our blog's contents, but displays them neatly under 'label headings' in alphabetical order, as well as highlights with the "New!!" text to notify the 10 latest posts under each label. Awesome, huh!

A picture below to illustrate the impressive result!



Here's how to create a Table of Contents or Sitemap, sorted by labels :

(Important note : all your posts must have labels before you can proceed with the following steps, otherwise it will not work)

1. Create a Page - go to Dashboard | Edit Posts, which will then open the Posting tab in Blogger. Select Edit Pages, click on the New Page button and type in the Page title, e.g Sitemap, Table of Contents, Labels or whatever that you fancy. Ideally, the title should be short as that will also serve as the page tab's name in your blog.
   
   
2. Next, select the Edit HTML mode to prepare your post. Copy and paste the following code into the post box :
   
   <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">
</script>
<script src="http://jacqsbloggertips.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
   
   Then, change the code in red (jacqsbloggertips.blogspot.com) to the URL of your Blogger blog.
   
   
   
   
3. You can add extra content, such as an introductory/explanatory paragraph above or below the script code, if you wish. Do this while in the Edit HTML mode. Then click Publish Page and you're done. Once your Sitemap Page is published, its tab will appear under your blog's header.
   (Tip: the Page tabs are linked to the Pages widget (gadget) at Layouts | Page Elements where you can configure the page list or reposition the page tabs to the sidebar).

Go for it...create a Table of Contents/Sitemap or Labels Page on your blog and reap the benefits. This is a better alternative to the default labels by Blogger as it presents all the post titles related to a specific label and your readers just need to select what fancy them.

Update 29 March 2011: Interested to know how to style your pages differently? Let Blogger Sentral show you the various ways.

Enjoy learning and keep smiling! :-)

If you're blogging on a Wordpress platform and would like to know how to create a Sitemap Page for your website, check my related tutorial at jaycjayc.com.

Last edit: November 23 2011