Creating Post Summaries on Blogger.com

Many of us are frustrated that blogger.com didn't include "post summaries" in their system by default but the posted an article about "post summaries" on their help section. Now since not all of us blogger.com users are expert in HTML and CSS, I made a simple tutorial for those who want to have post summaries on your blogs





Conditional CSS

We're going to use conditional tags to change how posts display on different pages. Add the following code to your style sheet, depending on what kind of template you have:



Your style sheet is usually near the top of your template, between the tags. If you have your style sheet in a separate file, you'll still need to add these lines in your template, so the conditional tags will work. Just make sure you add in the tags around them.

What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks). Part of each post will use this class, as we'll see later.



"Read More" Links

Add the following code to your template, somewhere after the <$dollarBlogItemBody$dollar> or tag:




This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post. You can replace the "Read more!" text with whatever you like, of course.
Post Modifications

The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code:



This part can actually go in the post template, if you don't want to have to type it for each post. You'll enter the summary text outside the span tags and the remainder inside, like so:

Here is the beginning of my post. And here is the rest of it.

Now, when a reader visits your blog, this post will appear like this:

Here is the beginning of my post.
Read more!

When they click the link, they'll go to the post page where they'll see the whole thing:

Here is the beginning of my post. And here is the rest of it.