Adding "Read More" expandable link at Blogger

It's almost every bloggers' wish to have a "Read More" link displaying only a certaing part of his posts on the main page making the homepage more spacious and maintained. Here's a quick hack on blogger account to add a "Read More" link and display the rest of the story:

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 in your template HTML and paste the following piece of code in between and

<!-- 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 in the template HTML and paste the following piece of code after

<!-- 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 This will be shown only in post's page.
11. Post a test article using the following HTML to see your blog working as expected