Contents, contents, contents, the important word that differentiates an interesting homepage from another. It's important, therefore, to advertise your content to others, much like book authors ALWAYS put their "Table of Contents" at the front pages to catch our attentions for buying their books.

During the weekend, I was able to devise a simple way to create a 2-level hierarchy method based on Beta's "label" feature. It's simple. You need to rename your label with the same common text, then a star(*), then your subtitle name. That's it. Below are the detailed installation instructions:



Instructions:

Step 1:

Create a label widget from the page element. Named it "Contents At a Glance" or something like that. This text is important, because it is the marker for finding your label inside the detailed HTML template.



Make sure you sort it Alphabetically, otherwise this won't work properly.



Step 2:

In Template->Edit HTML option, turn on "Expanded Widget Templates" checkbox. Locate the widget you've just created and replace it with this code:




<b:widget id='Label1' locked='false' title='Contents At A Glance' type='Label'>
<b:includable id='main'>
   <div class='widget-content'>
     <div id='bulletList'>
     </div>
   </div>
<!-- Table of contents add-in by hoctro. Free for use in Blogger Beta. Please do not remove this line &
refer others to my original hacks stored at http://hoctro.blogspot.com for proper installation and latest
updates - 9/17/06 -->

   <script language='javascript' type='text/javascript'>
     var text = "";
     var text2 = "";
     var currentText = "";
     var display = "";
     <b:if cond='data:title'>
       display = display + "<h2><data:title/></h2>";
     </b:if>
     display = display + "<ul>";
     <b:loop values='data:labels' var='label'>
       text = "<data:label.name/>";
       var arr = new Array(2);
          arr = text.split("*",2);
          if (arr[0] != currentText) {
            currentText = arr[0];
            if (arr[1] == undefined)
              display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><span>" + arr[0] + 

"</span></a></li>";
            else
              display = display + "<li>" + arr[0] + "</li>";
          }
          
          if (arr[1] != undefined)
            display = display + "<ul><li><a expr:href='data:label.url + "?max-results=100"'><span>" + arr[1] + 

"</span></a></li></ul>";
     </b:loop>
     display = display + "</ul>";
     obj = document.getElementById('bulletList');
     obj.innerHTML = display;
      </script>
</b:includable>
</b:widget>


then save your template.

Step 3: Rename your posts' labels.

This might sound tedious and lots of work, but it's really simple once one new label is created. That's because Beta Editing tool allows us to select from a list (if you click on the "show all" button.)



Just re-label your posts, one at a time, with the new way [Title*Subtitles]. For example, to have three sub-labels for my "Beta Hacks", this is what I have:

Blogger Beta*My Hacks

Blogger Beta*My First Attempt.

Blogger Beta*Hacking It Right.

You see, they all share the same words "Blogger Beta", follows by a *, then the sub-labels.

Notice also the period (.) at the end. This is to conform to the Tab hack improvement mentioned in my Tab hack.

That's it. Enjoy your new Table of Contents and let me know whether it works or not.




Notice: if you want this hack to work on the sidebar, you need to add this CSS code right after the .sidebar ul portion in the CSS part:


.sidebar ul ul {
list-style-type: square;
margin:0 0 0 2em;
padding:0 0 0;
}



This is the picture of my "Contents at a glance" after dragging it from the blog area to the sidebar area.



I will hopefully (time permits and the difficulty level of these problems) create in the future some more hacks, based heavily on this bullet list concept such as pull-down menu (vertical and horizontal,) sitemap, etc. This "Table of Content" hack is indeed a "foundation" type of hack compared to those just listed.

In the mean time, if you're interested, please read this article entitled: Drop-Down Menus, Horizontal Style by Nick Rigby (from A list Apart website,) to see how bullet lists are so closely related to pull-down menus.