How to add Read More to your Blogger

This is an official article from Blogger.
And I'd like to show how I implemented to this blog.

1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.

2. Paste the following code in your header. I add it just before </head> tag.


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

3. Adding "Read More" Links

Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:


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

You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.

4. Post Modifications

Go to Posting and create a new article. And wrap your article which you want to hide with the following code.


<span class="fullpost">

Your main article here

</span>

That's it folks. Thank you for reading.

Web Development Sandpit