blogger fun: 'this page' widget

A little jquery.

step 1
Add a html/javascript gadget.

step 2
You will need jquery somewhere, load jquery

<script src="http://path/to/jquery-1.2.6.min.js" type="text/javascript"></script>

You can get it from google:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

step 3
the script, I'am not a jquery guru but this did 'the trick' for me:

<div id="toc"></div>
<script type="text/javascript">
$(document).ready(function() {

$('<div id="toclist"></div>')
.prependTo('#toc');

$('h3').each(function() {
var $this = $(this);

$this.clone().appendTo('#toclist');
});
});
</script>

Add this to the widget.
The blog titles of my template are the only 'h3' elements in the page so we only need to look for 'h3' elements.

step 4
Apply a little css, the TOC is in a div with id 'toclist'.
Put this in the css section of the template.

/** added for toc */
#toclist h3
{
margin-top: 4px;
margin-bottom: 4px;
font-size: 90%;
}

update

I reworked this