Add "Read More..." Expandable Posts link in Blogger

This tutorial is very easy if you just follow this step by step tutorial properly. With this hack, you can choose to display only a selected amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of your post, they can click a “Read more...” link to read your entire post.

1. Login to your Blogger account and go to Layout > Edit HTML (click Expand Widget Template).

2. Find this line of code:

<data:post.body/>

3. Copy this code just before the code above:

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

4. Now, copy this code just after the code above (<data:post.body/>):

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

5. Save your template.

1. In your Blogger Dashboard, go to Settings > Formatting and scroll all the way down to the bottom. Copy this code and then save settings:

<span class="fullpost">

</span>

Creating a New Post:

When you click the Posting tab (HTML mode), you'll notice that your default post template now has <span class="fullpost"> and </span> tags. Anything you put above the tag <span class="fullpost"> will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span> tags.