Blogger “read more” without the bug

This hack was written before the introduction of Blogger jump-break (read more) feature. Blogger jump-break doesn’t have this bug.

As you may notice many blogs use “read more” (a.k.a. expandable post) thingy on their homepages. For readers who are unfamiliar with this feature, what a read more function does is when you are at the homepage (or any index page), only post snippets are displayed, the rest will be hidden. When you click the “Read more” link  it will transfer you to the post page, and shows the post in full.

This read more hack enables blog owners to put multiple posts in the homepage without using too much space. Visitors will appreciate this because the can scan through the entire homepage with less scrolling.

Most read more codes out there come with a bug, the “Read more” link will show up on all posts, even if you don’t want it to (by not defining the id=”therest” in the post). The read more function I’m  going to show you has been sanitized so to speak, so it’s free from the said bug/annoyance.

So here it goes:

1. Login to your Blogger account.
2. Go to Dashboard > Design >  Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. In the code window, look for this line: <data:post.body/>
6. Replace the line with the code below:

   (Update 19 June 2009: Minor changes to the code to prevent duplicate content in generated source code.)

   <!--read more starts -->
   <div expr:id='"sbtxt" + data:post.id'><data:post.body/></div>
   <b:if cond='data:blog.pageType != "item"'> 
   <style>#therest{display:none;}</style> 
   <span id='showlink' style='float: right; text-align: right;'>
   <script type='text/javascript'>
   if(document.getElementById('sbtxt<data:post.id/>') .innerHTML.indexOf("therest")>=0) {
   document.write("<a expr:href='data:post.url' target='_blank'>Read more...</a>")
   }
   </script>
   </span>
   </b:if> 
   <!--BloggerSentral.com -->
   <!--read more ends --> 

7. To make the code to work, you have to define the id=therest part of your post. To do this, go to post editor. in HTML mode, insert these tags inside your post: <span id="therest"> and its closing pair </span>. Position the tags as shown below. Note: The id name “therest” can be changed to any name of your choice, as long as you change them in all three places: inside the post, inside the style tags and inside the script.
8. Repeat step 7 for other posts.
9. Click Preview. If it works, then click Save Template.

That’s it, enjoy!

 

Technorati Tags: read more,expandable post,blogger