Show Post Summary using "Read More" Link

In order to maintain the good professional look of blogs, most of the bloggers use the "Read More Link" or " Continue Reading link". It helps a lot when you have got quite lengthy blog posts, you simply show short summaries of the blog posts and hide the remaining part with a simple link "Continue Reading" or "Read more" or Whatever you wish you can add (will get to that part later in customizing the read more link). Lets say if there are 5-6 long posts on the homepage of the blog, it would seen very awkward and secondly it would take more and more time to load your page.

        Steps to add the "Read More" Link to your blog:

• First and the Most Important step is to backup your Template.
• Now tick the "Expand Widgets Template" at the top right corner of your Edit HTML page.
• Next, find this code ]]></b:skin>

(Tip: press ctrl + F or F3 to find the code)

• Just after ]]></b:skin> copy paste the code below

(Tip: press ctrl + C to copy and Ctrl + V to paste:

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

• Now find this code <data:post.body/>

And just after <data:post.body/> add the code below,

1. 
   <!--MBN-READ-MORE-STARTS-->
   <b:if cond='data:blog.pageType != "item"'> 
   <a expr:href='data:post.url'>
   <div style="text-align: right;">Read More ->></div></a> 
   </b:if>
   <!--MBN-READ-MORE-STOPS-->
   

If you like you can replace text in red (Read More->>) with any word e.g Continue Reading.

If you need to shift the "Read More" to left side then use this code below instead of the one above:

1. 
   
   <!-- MBN-READ-MORE-STARTS-->
   
   <b:if cond='data:blog.pageType != "item"'> 
   <a expr:href='data:post.url'>
   
   <div style="text-align: left;">Read More ->></div></a> 
   
   </b:if>
   
   <!--MBN-READ-MORE-STOPS-->
   
   
   

• Save your template and you are Done!

       HTML Code to be Used with Post:

In order to hide a portion of you blog post using this link, you would have to add a short HTML code within every post.

The HTML code is:

1. 
   
   <span class="fullpost">
   The part which you want to hide.</span>
   
   

add the code as shown below.

Enjoy!

Peace and Happy Blogging!