Expandable Post Summaries on Blogger

One of my readers, Chris contacted me with a question:

A few days ago, when I checked your blog, it had this cute feature; there were teasers (previews) for each post, with links to expand to the full post. I have a Blogger blog myself, and I would like to implement this feature. Could you post directions for this?

Thanks
Chris

Well, Chris, the standard term for the post teasers is Expandable Post Summaries. In self-hosted blogs, this feature is prevalent and it is also an indication of professional blog design. Or it has been made so by widespread use of this feature in professional blogs. In Blogger blogs, this feature is not available directly from the dashboard. However, a minor Blogger tweak can give you this effect. Though there is official Blogger help for this tweak, it is not rated understandable by most people.

What You Should Know Before You Do This

There is a catch to expandable post summaries, however, which made me get rid of this a few days ago. Through this, though only the summaries are shown to the readers, the whole post is loaded on the browser nonetheless. Hence, if you increase the number of posts shown on homepage to say, 10, all your posts are loaded in browser and will increase your total blog home page size enormously. If you are using long posts with lots of images and other links, like me, then this will negatively affect the blog’s SEO. If you have short posts, then you may well go ahead and do this tweak.

For this tweak, you have to edit three things. First, the blogger layout, the post template, and the post itself.

Tweak Steps

1. Enable Post Pages

First of all, we need to enable post pages in Blogger. For this, go to Settings. Under Archives, set ‘Enable Post Pages’ to Yes.

2. Template Backup

Make sure you back up the whole template. Use Download Template link from the Layout->Edit HTML

3. Expansion Link

[Edit done on 16 Oct 2008: I found there was some problems around the editing of CSS code in Blogger, and here, I am posting a slightly modified way to get post summaries]

Expand the Widget templates by going to Edit HTML and checking Expand Widget Templates check box.

In the HTML code, find this tag: <div class='post-body'> If you don’t find that tag, you may find the tag <div class='post-body entry-content'> After either of these tags, add this code:

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

Do Not Save Now!

Now, find this tag: <p><data:post.body/></p>. Immediately after this tag, add the following code:

<a expr:href='data:post.url'>Continue Reading...</a> </b:if>

You can change ‘Continue Reading’ to the text of your choice. Now save the template.

Here is the screenshot:

4. Modify the Post Template

Now you can edit the post template within new Blogger. Go to Settings->Formatting. Within the text area beneath Post Template, add this code:

<span class="fullpost"></span>

Now this code will appear on your Blogger post editor. When editing your new posts, see if this code appears in the code editor in HTML view. If not, add it manually (recently, I found it is not appearing in my post editor).

5. Post Editor

Now, whenever you start a new blog post, you will see the above code already there (check the post HTML view). Add your post summary above this code and add the rest of the post right before the </span> tag. Like this:

Here is the summary of this post <span class="fullpost"> Here is the complete post, which will not be seen normally. </span>

Edit all your internal blog posts to reflect these changes, and you will see only summaries when you visit the blog’s home page or archived category pages. You will have the link to expand to full post, which you can use to get to the full post page.

Conclusion

Hope it helped. There is another way to expand the posts, which uses JavaScript. In another article, to be published soon, we will discuss how to do that. The advantage of JavaScript is that it will promptly expand the posts. One click, and there is no reloading, the full post is promptly shown, with a contract link at the bottom, which on click shows the summary promptly.

However, there is an advantage on using the normal way of expansion. Your blog’s average bounce rate will be greatly reduced. Since each click to expand and read the post is considered as a second pageview, almost all visitors will have two or more pageviews.

Related Entries:

A Better Way to Post on Blogger Keeping W3C Rules
Expandable Post Summaries Using JavaScript

Copyright © Lenin Nair 2008