Post Summary And Read More

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.

Step 2: Modify the template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:

<div class='post-body entry-content'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <style type='text/css'>.restofpost {display:none;}</style>
  </b:if>
  <data:post.body/>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>Read more...</a>
  <b:else/>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'>Read more...</a>
    </b:if>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template.

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:

<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.