Table of Contents - another method

In this post, A del.icio.us way to make a previous post list, I explained how to add a Table of Contents to your blog. The method used del.icio.us as it's backbone. And it works well, especially for those that haven't switched to Blogger Beta. Well, I have switched, and it doesn't work quiet as seamlessly as before. I have to go through a few more steps.

Hans, from Beautiful Beta, has figured out a different, more streamlined, method of making a Table of Contents. I'm going to detail it here, because unless you are very familiar with beta, you may be lost.

First open your dashboard and go to Template/Edit HTML. Check the box to 'Expand Widget Templates'. Scroll down until you find:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

Replace with:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<!-- on a label page, add a header saying 'Contents' -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<h2 class='date-header'>Contents</h2>
</b:if>
</b:if>
</b:if>
<!-- Start loop for displaying posts here -->
<b:loop values='data:posts' var='post'>
<!-- Date-headers are only displayed if on main, item or archive page -->
<!-- If on label-page, then no date-header -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Here we start displaying the posts. -->
<!-- If we are on a label page, only the posttitle is displayed -->
<!-- On other pages the entire post is displayed -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<a expr:href='data:post.url'><data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- If on item page display comments -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

That is the first part of the process. The second part involves putting a link in your sidebar. In Blogger Beta, open Dashboard/Template/Page Elements, then open 'Add a Page Element'. Select the 'Link List' widget. Give your widget a title in the top box, and name your link in the bottom box. (Something like Content, or Post List.) In the 'New Site URL' add this link:

http://yourblogURL/search/label/?max-results=999

Make sure you replace yourblogURL with your URL. And that is it. All except for visiting Hans and thanking him for such a wonderful hack!!