Blogger Hack - Expandable post summaries for professional blog design

With little bit of modifications to your Blogger Beta template you can easily implement expandable post summaries in your blog main page. Expandable posts gives very professional and elegant look to your blog. You can hide most of the detailed content from main page and display them when the page of the post is opened.

If you observer my blog, voting widgets are displayed on my post links and not in my main page. Also, most of the images in my posts are shown only in the actual post links only. Moving bandwidth intensive content to posts' pages loads your main page very fast.

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 paste the following piece of code 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 paste the following piece of code 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

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. Post a test article using the following HTML to see your blog working as expected

Hi, this is my test post.<span class="fullpost">This line is not shown in the main page</span>

Update on [2-July-2007]

Removed target='_blank' from step 7 code to avoid posts being opened in a new window.