Enabling "Read More"

There is an explanation in Blogger's Answer section: How can I create expandable post summaries? It is not the most clear, although it is better than some documentation I have worked with.

Just to know, I use a more modern template for this blog, and this post will use those conventions.

1. Modifying The Post Template
   When you move to make a new post, you have to add a span element named "fullpost".
   It's in that span that the part of your post that you plan to Read More sits. You can try to add this each time, but the easiest way is to put that as part of your default Post Template, which can be modified at:
   Settings << Formatting, toward the bottom of the page.
2. Adding The "Read More" Text
   Now we have to move to editing the template. You find it here: Layout << Edit HTML. You are modifying the Post widget at this point, so you have to check Expand Widget Templates. Look for this line within the Template:

   <data:post.body/>

   I am not sure what the underlying engine is processing this code — I'm sure I could find out without too much trouble, but here we're adding a conditional which adds this chunk of text and a link if the pageType is not item.

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

   This adds a link to the bottom of the page. It does not hide the contents of the element we added to the template. Yet.
3. Changing The Display Here we get into the wonder of Cascading Style Sheets (CSS). CSS is all about controlling how your page looks. The block that holds the CSS looks much like this:

   
   <b:skin><![CDATA[
   ... Large Chunks Removed ...
   ]]></b:skin>
   

   The recommended code to hide the Read More text is as follows:

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

   The problem I have found is that the CSS addition breaks the page a little and doesn't work. What I have found to work is putting a style block right under the generated block and putting the code within that:

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

There we have it; everything you need to add expandable post summaries. Good night and good luck.