Showing only post titles on archive and label pages

When your contents grow, your index (multi-post) pages become bigger. This translates to longer loading time, and long loading time is of course no good to your blog because it sends your visitors away. One way to remedy this is by loading and showing only post titles on these pages. This will help speed up the loading time. It also make it easier for your visitors to browse your contents.

This hack will show only post titles on archive and label pages of your blog. Your homepage is unaffected.

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. In the code window, look for this line: 
   

   <b:include data='post' name='post'/>

6. Now replace that line with the code below (just copy & paste): 

<!--Label and archive page title only hack-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if> 
</b:if>
<!--http://catemix.blogspot.com/-->

Updates 
Mar 2011: Revised entire code to prevent the hack from being applied to homepage's “Older posts”. You can see the old code below. 
Mar 2010: Revised code to prevent the hack from being applied to Blogger (static) Pages.
The old code (for reference only). Click “Show source” to view.  



show source



Click Save Template.
Here is the result for a label page, tested on this blog:



To change the look of the titles, you have two options:

Use inline styling by inserting style attribute after <h3 in lines 3 and 6, like in this example :








<h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>








Add a separate element definition in CSS, like this: 







.title-only { 
/* add styling codes here here */ 
}







And place the it before ]]></b:skin> line in your HTML.


Finish and enjoy!