How to create expandable post summaries in Blogger

I've been tweaking my blog template because I've already bored with my old default template that I use previously. While working on this template, I'm thinking that it may be cool to have my long post to be truncated and have the "read more" link.

I found the code from Blogger Help to do this. However, there is one issue with their code where the "read more" link will appear regardless of whether a post has been truncated or not. You can check it out at help.blogger.com on How can I create expandable post summaries?. If you have already read them, you should notice the disadvantages under the Note list which says:

• Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)

Do you think it is a good exercise? So, how many of you have already solve this exercise? I've been browsing through pages of google results and found that currently, I didn't see anybody solve and publish the answer for this exercise with just the blogger layout code and without using other javascript code. I do the search because I'm a lazy coder where I don't wanna spend my precious time to reinvent the wheel. Anyway, after a few minutes of thinking, I got an idea on how to solve this problem. And as usual, I'm happy to share my solution with you.

Let's make it short now, here's the tutorial:

How can I create expandable post summaries that only show the "read more" link if post is truncated?
With this hack, 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. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Step #1 - Edit your template code
To edit your template code, you have to go to your Layout > Edit HTML tab. Tick the Expand Widget Templates to have all the codes.



It is easier to copy all code and paste it to your text editor. To copy all code, click on the code area once and then press Ctrl+A to Select All. Press Ctrl+C to copy the selected codes, open your text editor and paste it in. Now you have your code ready to edit.

Add this code just before the <b:skin> tag on your template code:

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if>
</style>

Here's how it should look. The yellow box in the image below shows your newly added code:



And then you have to find <data:post.body/> tag using Ctrl+F or find function in your text editor and paste this code just before the </p> tag, right after the <data:post.body/> tag:

<b:if cond='data:post.labels'>
   <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.name == &quot;more&quot;'>
         <a expr:href='data:post.url'>...<b>Read more</b></a>
      </b:if>
   </b:loop>
</b:if>

And the screenshot. The yellow box shows your newly added code:



My solution here is by checking the label whether it have "more" label. So, in every post that you decided to have the "read more" link, you have to add this label. I'm adding a loop to read the labels for each post and inside the loop, there is an IF statement to check whether it have the "more" label.

You should notice this line with:
<b:if cond='data:label.name == &quot;more&quot;'>
where the word 'more' in bold here is the label name. You can substitute this with any word you like but make sure you will only add that label to the post where you want to have the "read more" link.

And now, you can differentiate the truncated post. After verifying your code, copy it from your text editor and overwrite your HTML template code. Click on Save Template and you are done with the first step. Check your code carefully if Blogger fail to save it. Maybe you have missed any '<' or '>' in your code.

UPDATE!!: Please Read - Fixing Read More link appear on Blogger Fullpost

Step #2 - Add Class Tag in your default Post Template
The next step is optional to keep the class tag handy on every post you would like to have expandable post summaries. To add this, you can just go to Settings > Formatting tab on your blog settings. Scroll to the bottom and you will see the Post Template option. Then, put this code:

<span class="fullpost">

</span>

Here's the screenshot:



After that, click on Save Settings and you are done.

Step #3 - Creating your expandable post
You can now follow the same way like in the blogger help to create your expandable post. 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. When you have finish typing your post, make sure you add "more" label in order for the “read more” link to work properly.



Now, you can Publish your post, and see the result. Have fun blogging!!! Don't forget to subscribe my RSS Feed for more coding tricks. Feel free to link my blog on yours too... Heheh.

You may also love to read:

• How to Show and Hide Text in Blog Post
• How to Show and Hide Text in Blog Post with teaser