Saturday, July 25, 2009

HOWTO: Add a Read More Option

Please follow this better Read More option, instead of the one described here.

If your blog contains long posts and you want to only show a selected snippet of each post on your homepage, here’s a simple method to add a “Read More” option to hide part of a post on the homepage (and also on archive pages).

  • Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.
  • Then locate the </head> tag and add the code shown in red in the following snippet, above that tag.
<style><b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
span.fullpost {display:none;}


  • Then locate the <data:post.body/> element and add the code shown in red below.
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>


  • Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)
This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More

Expandable Post Summaries