Friday, February 20, 2009

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.

5 comments:

  1. thanks U very Much, good job, very good blog...

    ReplyDelete
  2. 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.
    wholesale shawls , wholesale pashmina , pashmina shawl wholesale , pashminas in bulk , wholesale scarves in bulk , wholesale scarf suppliers , chiffon scarves wholesale , wholesale prayer shawls , velvet shawls wholesale , velvet shawl

    ReplyDelete
  3. Drug rehab is an expansive theme as there are numerous types of drug rehab. Which type would suit an individual with an expansion would rely upon the degree of reliance, the sort of drug dependent on, and their social circumstance.
    beating addiction quotes
    addiction recovery quotes

    ReplyDelete
  4. I am absolutely amazed at how terrific the stuff is on this site. I have saved this webpage
    organic long grain brown rice

    ReplyDelete