Expandable post summaries for Blogspot and Blogger

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text. This is 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.

To enable Post Pages, first go to Settings > Archiving:

Click Save Settings at the bottom of the page.

Create expandable post summaries

There are three ingredients that go into this feature: conditional CSS, a "read more" link for each post, and a modification for the posts that use this feature. So let's go through it step by step.

Let us see the steps to be followed for modifying the template to implement this

1. Log in to your blogger account select Layout of the blog which you want to modify
2. Navigate through Template --> Edit HTML
3. Take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template
4. Search for ]]></b:skin> in your template HTML and add the following code (Shown Below) in between ]]></b:skin> and </head>

   ...................................................................................................

   <!-- Style to implement "Read more on this Article" link in all the posts (Start) -->
   <style>
       <b:if cond='data:blog.pageType == "item"'>
           span.fullpost {display:inline;}
       <b:else/>
           span.fullpost {display:none;}
       </b:if>
   </style>
   <!-- Style to implement "Read more on this Article" link in all the posts (End) -->

   ..................................................................................................

5. After pasting the code, your template should look like as shown in the following image                                                                                     
6. Save your template and click on select Expand Widget Templates
7. Search for <data:post.body/> in the template HTML and add the following piece of code (Shown Below) after <data:post.body/>

   ..............................................................................................

   <!-- Code to show "Read more on this article..." Link (Begin) -->
             <b:if cond='data:blog.pageType != "item"'>
                 <span>
                   <a expr:href='data:post.url' style='color:#0000FF; text-align:right; font-weight:bold; text-decoration:none' >Read more on this article...</a>
                </span>
             </b:if>
             <!-- Code to show "Read more on this article..." Link (End) -->

   ...............................................................................................

8. After pasting the code, your template should look like as shown in the following image. Save your template.
9. That's all. Your template is modified to show expandable posts.
10. Now in every post, the content which you want to show only in post's page should be included between <span class="fullpost">This will be shown only in post's page</span>.
11. Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

    Now, when a reader visits your blog, this post will appear like this:

    Here is the beginning of my post.
    Read more!

12. When they click the link, they'll go to the post page where they'll see the whole thing:

     Here is the beginning of my post. And here is the rest of it.

Reference:

• http://help.blogger.com/bin/answer.py?hl=en&answer=42215
• http://blog.techdreams.org/2007/06/blogger-hack-expandable-post-summaries.html