Blogger Trick : Displaying post titles as summary on index pages

One more idea that can enhance use experience on index pages is to display a summary of all titles on the page. This way user will not have to scroll though all the content on the page. He/She can directly jump to the title of their choice by hitting the navigation link.

Now .. to add the feature you simply need to add few lines of JavaScript  code just before </body> tag.

<script>
if($(".post-title >a ").length>1)
{
   $("#main-wrapper").prepend("<ol id='summary-list'></ol>");
   $("#summary-list").css("background-color","silver");
   $("#summary-list").css("list-style","none");
   $("#summary-list").css("padding","10px");
   $("#summary-list").css("margin","0px");
   $(".post-title >a ").each(function(i){
      var anchorname=$(this).parent().prev("a").get(0).name;
      $("#summary-list").append("<li><a href='#" + anchorname + "'>" + $(this).text() + "</a></li>");
    });
}
</script>

And you need to include my favorite jQuery library at the top before </title> tag.
<script src='http://geekonweb.com/scripts/jquery-1.2.6.min.js' type='text/javascript'></script>

Thats it..  

see the demo page here