First, to activate this feature you must enable your post pages setting.
Second, go to your 'Template' editor and add the following style sheet (CSS) code:
Put the code between
</style>tags. If you have your style sheet in a separate file, you'll still need to add these lines in your template, so the conditional tags will work. Save and 'Republish' your entire blog.
Third, you must make a modification in your each post you want the 'Read More' link appears. Insert the following code to the starting sentence/paragraph which you want to 'hide' in the rest of the article:
<span class="readmore"><a href="your post page link address">Read more!</a></span><span class="fullpost">
Then, also don't forget to put:
at the very end of your post.
IMPORTANT: Since the 'Read More' link here is very specific compared with Blogger's script, you must know first your post page link address. Blogger usually give the name of each post with the pattern:
yourbloggerid.blogspot.com: your Blogspot address
year: the year you write the post.
month: the month you write the post.
title-of-your-post.html: the HTML page name of your post, Blogger usually creates it based on the title of your post, separated with dash (-) instead of space or other punctuation marks.
You can also publish your post first to know the link of the post page address, then insert this 'Read More' tags later.
Make sure when you make modification of your 'Template' or your post to always make a backup. Just copy and paste all your code or article to a text file on your hard drive, so you'll have it there as a replacement in case anything goes wrong.
Since the 'Read More' feature here is just to show/hide the rest of the text, the whole content of the post actually is still loaded when the reader open the index page or archive page. So, please don't think it will speed up your blog loading time ;)