How to Add "Read More..."Posts link in Blogger

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>
Change the Read more... text to whatever link text you want to appear. The result should look something like this now:
5. Save your template.

Adding Class Tag in Your Default Post 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>

It should look something like this:

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 in order for the “read more…” link to work properly. See image below:



Publish or preview your new post to see your newly created "Read More..." works on your blog.