I've been struggling to find the easiest method to add the "Read More..." option in my blog and unlike WordPress, you will need add these codes into your template. Warning: These codes will not work in the Classic Blogger Templates.
- Login to www.blogger.com, choose the blog that you wish to edit, click the Layout link and Edit HTML link.
- Do a backup on your existing template before you proceed.
- Click the Expand Widget Templates before continuing.
- Do a search on the tag called </head> (you can bring up the find command by pressing "Ctrl+F")
- Copy these codes in between of the ]]></b:skin> and </head> tag.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Sample 01
- Next, find the code <p><data:post.body/></p> in your template and add these codes below it.
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
Sample 02
- Save your template.
- In order for the "Read More..." option to show up in each of your posts, you will have to manually add <span class="fullpost"> code at the beginnng of the text where you want your readers to read upon clicking the read more link and end it with a </span> code. You can only do this in the Edit HTML mode while writing or editing your post.
Eg: This is the begining of my post. <span class="fullpost">This is where my viewers will continue reading the rest of my post. </span>
That's all and hope this will work on your template.
