Expandable Post Summary

Here is a great tip to dissect the body or the contents of your blogger posts. This is what we called the “Expandable Post Summary” or EPS. Here are some benefits of using EPS on your blogger posts:

1. Shorten the contents of your page.
2. Allow your readers to view the summary before reading the entire contents of the article.
3. Since your articles contents are short, you can post more items on your front page.

To do these tips, you need to have some sort of browsing and searching skills, copy and paste, and a little knowledge in html codes. However, don't worry it is simple and easy.

We need only four steps to accomplish our task.

First Step (Open Blogger Layout):

1. Log-on to your blogger account.
2. Open the Lay-Out page.
3. Then, click Edit html.
4. On the Edit Template, tick Expand Widget Templates

Step Two (Conditional CSS):

1. Search for the </head> tag on the template codes.
2. Copy the code bellow:
   

   <b:if cond='data:blog.pageType == "item"'>
     div.fullpost {display:inline;}
   <b:else/>
     div.fullpost {display:none;}
   </b:if>

3. Then, paste it on the template codes before the </head> tag.

Step Three ("Read More" Links):

1. Search for the <data:post.body/> tag on the template codes.
2. Copy the code bellow:
   

   <b:if cond='data:blog.pageType != "item"'>
     <a expr:href='data:post.url'>Read more!</a>
   </b:if>
   

3. Then, paste it on the template codes after the <data:post.body/> tag.

Final Step (Post Modification):

1. Make a code in your blog post in this manner:
   

   The quick brown fox<div class="fullpost"> jumps over the lazy dog.</div>

2. Save your post and you're done!

Finally, when your reader visits your blog, your post displayed like this:

The quick brown fox Read more!

After clicking the "Read more!" link, you will be redirected to the page where the full post/page will be displayed as what is shown below:

The quick brown fox jumps over the lazy dog.