Improved "Table of Contents" Widget

Dear Friend,

"Today I will share with you a simple hack that allows you to have a listing of all of your posts! Think of it as the default "Blog Archive" widget without the hassle of opening and/or showing the arrow buttons."

This was the introductory text I used for promoting my original "Table of Contents" hack two years ago.

Today, while tidying up my old posts and moving them to the archived blog, I wonder if I could make this into a scroll down box to save space, if I were to have hundreds of headlines. I thought this would involved some sort of JavaScript code, but then after examining BlogU'ssimilar Table of Contents code, it is such a simple styling using CSS code. I "borrow" her code and modify my original hack, et voilà, it works! At the moment I'm installing it on my blog so you could see what it looks like.

Such is the beautiful of HTML and CSS, one line of code can change a look completely, making the widget now very usable, since you can change the height (height:200px to whatever,) and further render the look by applying styles to the div, such as style='height:200px;overflow:auto;border:1px solid brown' .

Installing this hack is very simple. First, follow the instructions from this article Hacking Technique: How To Modify Template, in particular section B.4. Then cut this code below and paste it in between any two "b:widget" tags, save the template, and you're done.

<b:widget id='TOC' locked='false' title='Contents' type='BlogArchive'>
<b:includable id='main'>
<!-- **********************Sepember, 2008****************** -->
<!-- *****************Table Of Contents Widget - Written by Hoctro****************** -->
  <b:if cond='data:title'>
  <div class='widget-content'>
  <div id='contents'>
<b:if cond='data:style == "HIERARCHY"'>
<div id='TableOfContents' style='height:200px;overflow:auto;'><ul>
<b:include data='data' name='interval'/>
  <b:include name='quickedit'/>
<b:includable id='posts' var='posts'>
  <b:loop values='data:posts' var='i'>
    <li><a expr:href='data:i.url'><data:i.title/></a></li>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
    <b:if cond=''>
      <b:include data='' name='interval'/>
    <b:if cond='data:i.posts'>
      <b:include data='i.posts' name='posts'/>

To reverse the chronological order so that the oldest posts will appear first on the list, go to "Page Element," select the just-created widget, and select the box "Show Older Posts First".

My special thanks to Annie for her use of expandable "Table of Contents" on her blog.

Have a wonderful day.