With this trick, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page.
Step #1 - Update Your Template Code First you need to edit your existing code. Go to Layout >> Edit HTML. There you first click on "Expand Widget Templates" showing right above the HTML editor box. Now do a search (CTRL + F) within the HTML editor box for the following code <data:post.body/>. Now add the following code just above the <data:post.body/> tag.

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>
The result should look something like this: new-code-block.png or something like this: new-code-block-mush.png Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it’s just tag above it that will differ based on the template you’re using.
Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.
<b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>
Yes, there are supposed to be two </b:if> tags in the above code so don’t think it’ s a mistake. The result should look like this: new-code-block-2.png This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above. Now let’s look at what the final result should be. Here’s the updated code block you just worked on all put together: new-code-block-3.png
Ok, now save it. If it get saved means you have done it well. So move to the next step:

Step #2 - Add a Class Tag in Your Default Post Template For this step go to Settings >> Formatting and scroll all the way down to the bottom. It’s the last option called “Post Template”. You’re going to paste in the following code:
<span class="fullpost"> </span>
You’ll want to keep the spaces in there which will make sense later. After you save this, it will look like this: post-template2.png
Step #3 - Create a New Post Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class=”fullpost”> and </span> tags. If not, then you didn’t save it properly so go back and re-read step #2.
So when writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.
Now publish or preview your post to see the “read more” hack working on your blog. If it doesn’t show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It’s difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.
Here’s the live post with the “read more…” link properly working based on the text I used above in the post text area.
post-results.png
Additional Info If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags breaking apart the post into two parts.
For some posts, you might not want to use this feature at all. If that’s the case, just delete the <span class=”fullpost”> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!

5 comments

Jalil said... @ September 12, 2009 at 6:31 AM

nice guide line thanx broo......!!

[ REPLY ]
mithilesh said... @ January 19, 2011 at 12:48 AM

I am a fan of ur Blog....
thanks for d useful information .... if u wanna see live cricket match , newly released movies , hacking , ... just visit http://goo.gl/pg2bf

[ REPLY ]
bindra said... @ May 7, 2011 at 12:57 PM

sir i have a problem
my blog is at bloggingtutor.blogspot.com
when i added this and went to create a new post there is no predefined span
also it is showing only read more instead of any post text

[ REPLY ]
Ram A Singh said... @ October 9, 2011 at 4:06 PM

after adding this tag nothing change.

[ REPLY ]
Web Development Works said... @ December 14, 2012 at 7:29 PM

Good work! and nice use of CSS
Thanks for sharing !
WEB Application Development

[ REPLY ]

Post a Comment

There was an error in this gadget