How To Display Post Excerpts in Blogger

Many blogs may display only a few paragraphs of a post, and then provide a link to the rest of the post. These blogs usually publish rather large posts, and would like to display several posts on they home page, without the page getting too large.

WordPress has a tag that you can insert to create a post excerpt, but Blogger doesn’t have such a feature. In this post I will explain a work around you can use to create post excerpts in Blogger.

Create a Post Excerpt

The method that I will explain below is not one I created. I found it while looking through the Blogger help. Since it can be difficult to find specific help, I have decided to publish the technique in this post.

The technique involves using CSS to hide or display the post. To create a post excerpt in Blogger, use the following steps:

1. Log in to your Blogger account.
2. From the dashboard, click the Layout link to the blog you want to add a blogroll to.
3. In the menu at the top, click Edit HTML to view the HTML for your template.
4. In the head section of your template, include the following HTML snippet:
   <style>
   <b:if cond=’data:blog.pageType == “item”‘>
   span.fullpost {display:inline;}
   <b:else/>
   span.fullpost {display:none;}
   </b:if>
   </style>

   The above HTML snippet checks to see what page type is currently displayed, and builds the CSS depending on the page type. If the page type is item (or post), then the span tag with the class of “fullpost” is displayed. Otherwise, the span tag is hidden.

   You will see where the span tag is inserted in a little bit.

5. Search your template for data:post.body. Below that line, add the following:
   <b:if cond=’data:blog.pageType != “item”‘>
   <p><a expr:href=’data:post.url’>Read more!</a></p>
   </b:if>

   The above code will add a “Read more!” link to your post exceprt that will redirect your visitor to your post. You can change “Read more!” to whatever text you like.

6. Once you have made the above changes, click the Posting tab, and create a new post.
7. When you are finished writing your post, move your cursor to the end of your post excerpt and insert the following:
   <span class=”fullpost”>
8. Move to the end of your post and insert the following HTML:
   </span>

This will make your post look like the following:

This is the first paragraph of the post, and appears as the excerpt.
<span class=”fullpost”>
This paragraph will only appear when a visitor clicks on the link to view the entire post.
</span>
9. Save your post, and then view it in a browser. You should now see your post excerpt, and your link, on your home page. Clicking the link should take you to your post.

The one downside to using this method is that the visitor will still download the entire post as the displaying of the post is controlled by CSS. This method, however, will allow you to display excerpts from each post, without the display of your page being too large.

When I used Blogger, I used this technique on my blog since I do write fairly large posts, but since I switched to WordPress, I use WordPress’ built-in method.