How to Add Read More in Blogger

By default the posts in your blogger home page does not contain provision for commenting. User must click on the title and go to the particular posts page and then post comments. This may not be known to new users and might cause unnecessary tension while searching for “Post a comment” link. You might miss out valuable comments.

One solution for this problem is to display a select 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 the post, they can click a Read More.. link to see the full post.

This is also very handy if you have lots of long articles all on one page. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Adding Read more in Blogger posts is pretty difficult compared to WordPress. Since we don’t have a more tag on Blogger, we need to implement a template hack for getting this done.

This is how it is done:

1. Please Login to your Blogger Account, and go to Dashboard, Layout, and Edit HTML.
2. Check Expand Widget Template
3. Add this code before this tag </head> or exactly after this code ]]></b:skin> like this:
   

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

4. Search the code <p><data:post.body/></p> in the template and add this code below:
   

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

   Feel free to change the Read More.. text to whatever you want the link to look like. Be careful not to delete any other code during this process.

5. Click Save Template
6. Now, in order the cut posting work, each time you posted, just click right where you want the Read More.. appear, and thickin this <span class=”fullpost”> and the remnant of your post till the end </span>. In order to adding this code, you should go in HTML Edit mode not Compose. You can easily add this feature to your default HTML Edit mode by using Post Template feature of blogger.

Example:
This part will be visible by default <span class=”fullpost”> And the part will appear when the Read More.. is clicked</span>