How to install Blogger expandable post summaries

This is an oldie but a goldie. One of the first things I did when I created the first version of this blog early last year was to hunt around for a way to implement expandable post summaries.

There are a few ways to accomplish this but I eventually opted for this method…

Before we begin please make a Backup of your Blogger template – if you don’t know how to do this have a quick look at my post – Always back-up your Blogger templates!

Step 1 – Add some style rules

Go into your Blogger template (Layout/Edit HTML) and look for the following tag:

]]></b:skin>

Immediately AFTER it add this:

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

Now save your template.

Step 2 – Add the “Read More” links

Once again, go into your Blogger template (Layout/Edit HTML) and make sure you have your widgets expanded.

Find the following tag:

<data:post.body/>

Immediately AFTER it add this:

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>

Now save your template.

Step 3 – Add some span tags to your template

Now go into your Blogger Settings menu and hit the Formatting tab. Down the bottom of this menu you will find the Post Template field.

In this box add the following:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Now save your Settings.

Step 4 – Modifying your posts

Ok now every time you create a new post the text above will automatically appear in the editing box.

Anything that you put into your post BEFORE the <span class="fullpost"> tags will become your POST SUMMARY (this includes images).

Anything that you put into your post AFTER the <span class="fullpost"> will become the MAIN BODY of the post only visible when a reader clicks on the Read more link.

Check out the main page of this blog to see it in action.

You can easily customise the way the “Read more” text appears, in fact I may do a quick post on it next.

NOTE: Unfortunately for your old blog posts you will have to go back and manually implement these span tags to convert them to post summaries.

Let me know if you have any problems.

Newsflash: I have heard rumours that Google may be implementing an even better post summary method into Blogger in the near future, but in the meantime this method works pretty well.