Blogging: Using Expandable Posts

I had some time to spare and I used to apply expandable posts on our blogs. For the meantime, I have applied the required changes both here and in Che's blog.

It took me a while to discover exactly how to do this. So in the spirit of sharing, I might as well include the how-to of expandable posts using the "new" blogger format.

Assumptions:
This is done using the new Blogger; hence this is not a "walkthrough" for other web publishing services, such as WordPress. Regardless of the publisher, when you get down to it, it is all HTML anyway, so while the steps may not exactly be the same (as you will see later on), the principle should be the same.

Outline of Steps:
1. Editing the Conditional CSS
2. Adding the "Read More" links
3. Adding Blog Post template

Important: Regardless of whether you are new to this or not, please BACKUP your current template. For Blogger/Blogspot, this should be in Layout -> Edit HTML, then click on Download Full Template.

Once everything is set, here we go...

Step 1: CONDITIONAL CSS

First of all, we need to define within the template the "fullpost" span class. The behavior of the fullpost class is simple: if it's an item (i.e., one blog post only), display everything; otherwise, do not display the text.

1.1. Locate the </head> tag.

1.2. Immediately above/before the tag, add / modify the following code within the <style> tags

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

1.3. Save the template.


Step 2: READ MORE LINK

You are, of course, not restricted to use the words "Read more". You can opt to use something like "Click here to read the rest of the entry" or as short as "..."

2.1. For blogger users, click on "Expand Widgets".

2.2. Locate the line <data:post.body/>

2.3. Immediately below/after the above tag, add the following code:

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

2.4. Save the template.


Step 3: POST TEMPLATE

Now comes the editing of the actual posts. Each post would have to include <span class="fullpost">. To make life easier, Blogger included the Post Template under Settings > Formatting, so that each new post would include the above tags.

3.1. Go to Settings > Formatting, then scroll down to Post Template.

3.2. Enter the following code:

Summary here <span class="fullpost">
The rest of the post here </span>

3.3. Save Settings.


Just be mindful of the placement of the fullpost tag within your next posts and that's it.

With this, you can highlight more of your most recent posts within the main page. I remember at one point in which I had to limit the posts displayed to five or below, depepnding on the length of my post. With this one in place, your main page will act as the "index", enabling the reader to browse through the contents of your blog without actually going through entire unwanted entries.

In case of questions, just let me know.