Blogging Tips

Many bloggers choose to clean up the layout of their non-item pages by choosing to display only the post titles. This has the effect of teasing readers with a catchy title, encouraging them to link through and read the main article, while ensuring the main pages feature a clean and organized layout.

Blogger blogs do not have the function of displaying excerpts on the home, archive and search pages in the same manner as WordPress blogs. While there are various techniques you could use to display archives, most of these are complicated and require HTML editing for each post. Choosing instead to display post titles is much simpler and requires no further editing of the HTML when installed.

In this post, I’ll explain how you can easily edit your Blogger template to display only the post titles for your blog posts on the home, archive and search pages of your blog.

Step 1: Back up your Blogger Template

Before making any changes to the HTML code of your blogger template, it is essential that you first perform a complate back-up of your existing template. Then if you happen to make a mistake, you can easily restore this working template to your blog.

To make a full back-up of your Blogger template, go to Layout>Edit HTML in your Blogger dashboard and click on the “Download full template” link near the top of the page.

This will prompt you to save your template as an XML file to your computer. You can change the file-name to something you will remember more easily. Be sure to save in a location you can easily find if you need your back-up template!

Step 2: Check you have enabled the setting for post pages

“Post Pages” are unique pages in your blog which are used to display individual posts. Most Blogger blogs have this setting activated by default, but it’s worth checking to be sure this hack will work once installed.

To check this, go to Settings>Archiving in your Blogger dashboard and ensure the setting for “Enable post pages” is set to “Yes”. Be sure to save any changes before you leave this page.

Step 3: Add conditional tags to your Blogger template

This is the most complicated part of editing your template to display only the post titles on non-item pages.

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box. This enables us to find the section of code we need to edit.

Now using your browser’s search function, locate the following tag:

<data:post.body/>

You may find this tag is surrounded by other tags, such as <p> or <div> tags. You must leave these in place when we add the conditional tags. The lines we will add to the template need to wrap around the line in your template which contains the <data:post.body/> tag.

Add the following line just above that which contains the <data:post.body/> tag:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Then just after the <data:post.body/> line, add this tag:

</b:if>

Once you have made these edits, the section in your template should look something like this:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>

Now preview your template. If you have added the code correctly, you should now see that only the post titles display on the home page of your blog. If all is well, proceed to save your template. Then visit your blog in your browser. When you view the home, archive or search pages, only the titles of your posts will appear. By clicking on a post title, you will be taken to the item page, in which case the entire post will appear.

The conditional code we have added to the template means that the post content is not merely hidden (as in the case of post summary hacks), it does not appear at all in the source code. This also means that non-item pages can load more quickly as there is less content to load and no post images – both of which can cause blog pages to load more slowly, particularly for those not using a Broadband connection for their internet browsing.

That’s all there is to it! It’s far simpler to display only post titles in your Blogger powered blog than you would think.

I hope this tutorial has proved useful for you! Please feel free to add your comments or suggestions below.