How to add expandable post summaries to blogger

Expandable post summaries are where a summary of the post is given or a teaser paragraph and then a link to the full post is given such as 'read more...' or 'continue reading...'
I am going to show you how to add this to your blog

The first step is the usual one of backing up your blogger template and then check the expand widget templates box.
1.Now search for the </head> tag and paste the following code BEFORE it

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

2.Once that is done search for the code <data:post.body/> and then paste the following codes AFTER it

<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...</a>
</span>
</b:if>

You can customize the read more link to any text you want by changing the part of the code in blue and you can change the colour of the link by changing the hex value in green

3.Save the template and then go to the settings tab and under the formatting sub tab
go to post template and add the following code

Type your summary here.
<span class="fullpost">
Type rest of the post here
</span>

Now the purpose of this code is to differentiate the summary and the rest of the post.Replace your summary with the text in blue and then the rest of your post with the text in green.I hope you have understood how it works.If you get any problems just ask me and I will help you out.

UPDATE:For those of you using classic templates(templates written in HTML)use this code instead of the first code
<style>
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
</style>

AND then search for <$BlogItemBody$> and add the following code after it.

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>