In many professional websites you see posts with a short summary and link to the full post. Links like “Read More” “Continue Reading” and “More” are some of the text which link to the full post.This type displays maximum posts in minimum space.And it is a very good way to show content on your website so that readers read what they like.

Expandable post Summaries

Here’s how you can add this to your Blogger blog (Source: blogger help):

1. Go to Layout->Edit Html
2. Download Full Template
3. Check the Expand Widget Templates
4. Just search for this code

<body>

and then paste this code just below the above code.

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

5. Now search for this code:

<data:post.body/>

and then copy this code just below the code mentioned above

<b:if cond=’data:blog.pageType != “item”‘><br />
<a expr:href=’data:post.url’>Continue Reading</a>
</b:if>

You can replace the text in bold with any text (like”more”) of your choice or even an image.

To add an image use the following code:

<b:if cond=’data:blog.pageType != "item"’><br />
<a expr:href=’data:post.url’><img src=’Your-image-link-here‘/></a>
</b:if>

Replace the code in bold with your image link to display an image for read more posts

6. Now the last step, Go to your Blog then go to Settings and then click on Formatting link. Search Post Template and paste this code:

<span class=”fullpost”></span>

Put the code in Post Template

Your post editor will look like the following:

Post editor will have the above code

Whatever you write between the span class=”fullpost” will not be displayed on the homepage and all the other content will be displayed on the homepage.

For example if you type the following code in the post

Beginning of my post. <span class=”fullpost”>And here is the rest of it.</span>

The actual post on the main page will look like this:

Beginning of my post.
Continue Reading