Post Summaries on Blogger.com

Blogger.com is one of the largest and most popular blogging services. While it has many great features and makes blogging easy, there are some features that aren't available, or at least aren't able to be implemented by pointing and clicking.

One of these features is the ability to have a post summary instead of the full post appear on the blog's home page, and other index type pages.

In Blogger's help section they show you how to accomplish this, but I wasn't completely happy with the implementation because it didn't bring the reader to the spot where they left off. They head to start scanning through the page to find out where they last read. I find this annoying so I made a slight change to make it easier for readers.

Why use post summaries?

A lot of people that surf the web click the back button if they don't find what they're looking for right away. If you have a series of long posts on your blog's front page and your visitor came from a search engine but the content they are looking for is on the bottom of the page, then they may give up looking for it if they have to scroll down multiple pages.

For this reason, it's important to have the layout set up so that a visitor can easily skim through your blog. One way to accomplish this is to only include a portion of your blog post on index pages such as the blog's front page. This way, readers can quickly skip over posts that don't interest them. This is especially important if you tend to write long posts.

Not everyone is going to be interested in everything you write so it's a good idea to let them only see a short bit about each post so that they can continue onto something they are interested in before they get bored and leave your site.

Does Blogger have a tag to get Post Summaries?

Blogger.com doesn't expose any way to truncate a post or provide a layout tag to only get the post summary. So to do this, you have to tell the browser to hide part of the post from the visitor. It's still there, they just can't see it.

This change requires you to add some HTML tags in your blog post. If you have a lot of old posts and you want to implement this, you have to go through each one. But if you're not getting a lot of traffic to old index pages, it might not be worth the bother.

It's a shame that Blogger doesn't provide this function since it is probably easy for them to do so. Since they have the ability to only show a summary in feeds, the logic is already there. They just need to add a tag in their data taglib to provide a summary maybe even through in the ability to control the length. Something like <data:post.summary chars="200"> but that doesn't seem to be available now.

The nice thing about having to do it manually in each post is that you have control over the amount of text that is shown. It is not just some variable you set that gets a certain number of paragraphs or characters. This way, you can make sure your summary will be engaging and want the reader to continue onto the full post.

How to add Blog Post Summaries on Blogger

Tag summary and non summary content

In every post, identify the summary section and the rest of the post by surround it with span tags. In this example, we're not going to be doing anything special with the summary content tags, but it's a good idea to include it in case you want to do something with it in the future. Your blog posts should look like this:

1:<span class="post-summary"> 2:The first section of your post that will be used 3:as the summary goes here. 4:</span> 5:<a name="fullpost"></a> 6:<span class="fullpost"> 7:Continue writing your blog post. 8:</span>

Now we have the areas marked with <span> tags that use a class that we can control through styles. The <a name="fullpost"> tag, serves as a marker so that when a user clicks on the Read More link from the summary, they go to the next line, instead of where they already read.

I really hate when I'm reading something, get into it, then click a link to read the rest, and I have to dig around to find where it was I left off. This change should enhance your user's experience a bit.

Use Styles to show summary except when viewing the post page

You're going to have to make changes to your blogger template. To do so, follow these steps.

1. Log into your Blogger.com account
2. Click on the Layout link for the blog you want to change
3. Click on the Edit HTML link under the Layout tab.
4. Before you make any changes to your template, use the backup your blogger template by clicking on the Download Full Template Link and following the instructions to save a copy on your computer.
5. Click on the Expand Widget Templates check box so that you can see the entire template in the text box.
6. In the HTML head section, (between the <head> and </head> tags) place the following style code:
   1:<style type='text/css'> 2: <b:if cond='data:blog.pageType == &quot;item&quot;'> 3: span.fullpost {display:inline;} 4: <b:else/> 5: span.fullpost {display:none;} 6: </b:if> 7:</style> 8:
   This will tell the browser to hide the section marked as fullpost unless the page loaded is the blog post page and not your blog's front page or any other index pages a visitor might see such as clicking on a date, archive or tag link. The
7. Now you need to make changes in the Blog Posts widget to show the Read More link on index pages. Search through the template to find a part that looks like:
   1:<div class='post-body'> 2: <p><data:post.body/></p>
   And change it to the following:
   1:<div class='post-body'> 2: <data:post.body/> 3: <b:if cond='data:blog.pageType 4: != &quot;item&quot;'> 5: <div class='readMoreLink'> 6: &lt;a href='<data:post.url/>#readmore'&gt; 7: Read More 8: <span style="font-size: 60%"> 9: &gt;&gt; 10: </span> 11: &lt;/a&gt; 12: </div> 13: </b:if> 14:
   That will create a Read More link on index pages that will bring users to the full post and scroll the browser to the first line after the post summary.
8. Click on the Save Template button to save your changes.

That's it. Your template should now show summaries in your blog's front page. You may want to also include a style for readMoreLink to control the formatting of the link.

Why not make the post expand and shrink?

Another thing you can do is to make the rest of the post expand and shrink using javascript. This is pretty neat but I chose not to do this because I wanted the reader to continue onto the permalink for the post. This way, they can see the comment form. If you're using contextual based advertising, your ads will be better targeted on the individual post page.