World Today: 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

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


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


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


          <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>
          

...............................................................................................
After pasting the code, your template should look like as shown in the following image. Save your template.
That's all. Your template is modified to show expandable posts.
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>.
Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>
When they click the link, they'll go to the post page where they'll see the whole thing: