New hack to improve your label/archive pages

[UPDATE: I developed a better hack based on this to expand/collapse posts in label/archive pages. Check this out too.]

Translations by other bloggers: Chinese

In a Blogger Beta blog, when you select a label or search for a term in the navbar, it displays the contents of all the posts that match the label/search in the main column. This is also true for archive pages for a particular month/year. As Ricardo rightly pointed out in my previous post, this is not very user-friendly if there are too many posts. Here's a new hack to display only the titles of matching posts (with their permalinks). You can then select the post(s) that you want to read and ignore others.

After my first hack to display labels in drop-down form, I spent some time understanding the various sections and widgets of Blogger Beta template. Here's a short introduction to widgets before giving you the code for my newhack. A section is a portion of the blog that consists of many widgets and each widget is associated with a hierarchy of data. For example, the following widget governs the display of blog's posts.

<b:widget id='Blog1' locked='false'
title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
 <!-- posts -->
 <div id='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>

Here, data:posts is the list of posts associated with the "Blog" widget. As you can see, there is a loop going through each post. 'var' is the loop variable whose values are the various posts. For each post, it displays the date (if there's one) followed by the post contents. 'b:include' is the equivalent of a function call which is defined later. Then, there is an if condition that checks whether the page type is "item". This is so that comments are displayed only for item pages. This is just to give you an idea of widget code. For a detailed dissection, check out Scott's post.

Now, let's get back to the hack. Goto Edit HTML page, click on 'Expand Widget Templates' and replace the line in red above with the following lines.

 <b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Basically, I check whether the current page is not the main page or an item page. If it is neither, it must be a search page, label page or archive page. For such pages, I just display the post titles (linked to post URLs). Here, blog.homepageUrl is the equivalent of the old tag <$BlogURL$> and blog.pageType serves the purpose of <itempage>.

You can try this hack by choosing a label in my blog's sidebar or clicking on the year 2006 in my archive display. If you like it, try it in your Beta blog and let me know your comments.

Update: I have explained how to override the limit of 20 posts per label page in this post.