Expanding Posts in Blogger

This is how I have implemented Expanding Posts. These are posts which have an introduction on the mainpage of the blog, linked to the entire presentation at an individual post page.

My approach allows for individual preferences. You can have anything on the mainpage, followed by anything on the postpage.

As an example, you might see this on the main page to a blog:

I found a great store today and would like to tell you all about it. It is a long post, but worth it. Read More ....

And you would see this at the individual postpage by clicking on the "Read More" link:

I found a great store today and would like to tell you all about it. The store is Great Foods for All, and it was a wonderful experience to see the color and variety on the shelves. [and the story goes on]

Continued at the Post Page . . .

Placing the Code

You will need to edit the HTML template code for your blog on Blogger. These are the instructions for a blog using the new "layout" template, not the older "classic" template. See the references below for the classic template.

From your blog page, click "Sign In".
Go to the Layout tab. Click "Edit HTML" in the second heading bar. Under "Edit Template", Check the box "Expand Widget Templates" at the top-right of the HTML code box.

Save a copy of your template by clicking "Download Full Template" at the link above under the heading "Backup / Restore Template". You can later reload this template file if you (unlikely) make some horrible mistake.

See the pop up box "File Download". Choose "Save"

See the pop up box "Save As". Navigate to a folder where you would like to save this XML file. Change the name to something short like "MyBlog". Click "Save".

You are back to the "Edit HTML" page. Click within the html text box to select it, and use Ctl-F (or Edit menu: Find on this page) to pop up the Find box. Enter the find text as "post.body" and click Next.

You should see the following part of the HTML template, but without the code in green.

---------------------------------------
<div class='post-header-line-1'/>

    <!-- Displays blogpage on the blog page,
         postpage on the post page -->
    <b:if cond='data:blog.pageType == "item"'> 
      <style>  div.postpage {display:inline;} 
               div.blogpage {display:none  ;} 
      </style>
    <b:else/>
      <style>  div.postpage {display:none  ;} 
               div.blogpage {display:inline;}
      </style>
    </b:if>

    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
      <!-- clear for photos floats -->
    </div>
---------------------------------------

This code defines two <div> classes to use in your blog posts.

• <div class=blogpage> displays when your post shows on the main page of your blog.
• <div class=postpage> displays when your post shows in its individual page.

Cut and paste the green text into the HTML template where it is shown above. Click the orange "Save Template" button at the lower-right corner of the html text box. You should see an orange box at the top middle of the Edit HTML page saying "Your changes have been saved. View Blog".

You can view your blog, and should not see any differences yet.
 

Using the Div Classes

Here is how to write the example page we started with. I assume your post has the URL   http://myblog.blogspot.com/2008/10/great-restaurant.html

----------------------------
I found a great store today and would like to tell you all about it.
<div class=blogpage>
It is a long post, but worth it.
<a href="/2008/10/great-restaurant.html">
Read More ....</a>
</div>

<div class=postpage>
The store is Great Foods for All, and it was a wonderful experience to see the color and variety on the shelves. [and the story goes on]
</div>
----------------------------

The html within the <div class=blogpage>. . .</div> tags displays only on the main blog page, so the comment about the long post and the link "Read More..." only shows on that page.

The html within the <div class=postpage>. . .</div> tags displays only on the individual post page, so the rest of the story only appears there.

Unlike other solutions, the link "Read More..." does not appear on every blog page, as it is not part of the template. You can include and use whatever text you want, individually by page.
 

Update 06 2011

This post used to use <span> as the tag for enclosing blogpage and postpage text. I have changed everything to use <div>.   <span> doesn't work correctly in the recent Firefox 4 browser. Actually, it now breaks because it works as intended in Firefox 4.

<span> is an inline tag, intended to enclose and apply styles to text within a paragraph. According to HTML specifications, it cannot enclose a block level tag like <h3> heading, <p> paragraph, or <div>. Internet Explorer and older Firefox versions did not enforce this rule. Now, Firefox terminates a <span> when any following block level tag appears.

<div> is itself block level and can enclose everything which follows, including other <div> and <span> tags. This makes <div> stable as newer browsers conform more closely to HTML standards.
 

Sources

How can I create expandable post summaries?
Blogger help page. Their code did not have the <style> tags and so did not work directly as shown. They have a more complicated approach that places everything into the template. They give information about the classic template.

How To Add The Blogger “Read More” Expandable Posts Link
Another explanation for inserting the full template code.