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.