Blogger Tip: Expandable Posts

Today I added the ability to display expandable posts on my blog.  What's an expandable post?  Let's take a step back and talk about posts.  A blog post is another name for an article written for a blog.  Normally all articles, or posts, appear in full on the main page.  An expandable post is a post that displays a summary on the main page, and offers a link to another page for the full article.  For example;

Expandable posts keep things cleaner on the main page.  I plan to use them for the larger posts (articles).

For my fellow Google-Blogger blog users out there, here is how I built my expandable post capability;

1. From the Layout Tab of your Blogger Dashboard, Select Edit HTML.

2. Make a backup copy your Template.  This is critical.  Changing your template incorrectly can be detrimental to the health of your blog!

3. Check the Expand Widget Templates box.

See the graphic below for a summary of Steps 1-3.

4. Within the HTML, find the code;
</head>

5. Right before the </head> tag, past the the code from <THIS PAGE>.

6. Look for the code <data:post.body/>.

7. Replace it with;

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p>

       <span id='showlink'>
        <a expr:href='data:post.url'>Read More...</a>
       </span>
       <script type='text/javascript'>
         checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
       </script>
     </b:if>

8. If you are using a standard blogger template, you may need to perform this step.

- Find <div class='post-body'>

- and change to <div class='post-body'  expr:id='"post-" + data:post.id'>

9. Lastly, from the Setting, Formatting menu, add this code to the Post Template Box

Type Your Post Summary Here
<span id="fullpost">
The Remainder of Your Post Goes Here
</span>

For example;

Now each new post will be ready for a Post Summary section and a Post Remainder section.

Special thanks to Ramani at Hackosphere.com for this tip!  If you decide to use this tip on your blogger blog, be sure to add a link to Hackosphere to your sidebar in return.