Blogger trick #2

You may have noticed that the previous post has some text

For the nitty-gritty details, do like it says and click to see the rest.

that appears on the front page but NOT on the post's "item" page (where it wouldn't make sense).

This is a simple little addition I made to the template modification for expandable posts.
--------------------------------------------
In the template, just before the </head> tag, Vin's guide says to put the code

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

I just added a couple lines:

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

Now, any part of a post that I put between <span class="toppost"> and </span> will appear only on the front page, not on the post's "item" page, which is handy for little summaries that don't make sense when the full post is displayed.

Click here to see the rest of this post...

Blogger trick

The trick to getting expandable blog posts in Blogger is described here and, in even more detail, here. However, a significant drawback is that this approach puts a "Read more..." link at the bottom of every post, whether there's actually more to read or not.

Here's a variation which uses a post label to figure out which posts need "Read more..." links and which don't. It doesn't require publishing to figure out the post link then editing, like some workarounds, and it doesn't require anything more complex than the original post.

You can see it in action on this very post (which has a "Click to see the rest..." link, which is what I decided to call my "Read More..." link) and the previous post (which doesn't have more to show, so the link doesn't come up.)

For the nitty-gritty details, do like it says and click to see the rest.-----------------------------------------------------------

I'm not going to repeat the entire scheme described at the above links -- most people reading this have presumably already read at least one of those. So summarizing, there are three places you have to put code for expandable posts:

1. Include a <style> block in the Blogger template right before the </head> command
2. Include a <b:if cond="..."> block in the Blogger template post widget (have to check "Expand widget templates") to put a "Read More..." link at the end of the post if we're NOT at the post's "item" page (also called the "permalink")
3. Edit the HTML of each expandable post, putting the part that doesn't appear on the front page inside a <span class="fullpost"> block.

My amendment requires changing the code block inserted at step 2, and using a particular post label for expandable posts.

So assume you're at step 2. To get to the code block, in Blogger click the "Layout" tab, the "Edit HTML" subtab, and check the "Expand Widget Templates" box. In the template, find the lines

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

Right before the closing </div>, put this block (instead of the <b:if cond=...> given in the above links):

<b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.name == "summarized"'>
        <p><a expr:href='data:post.url'>Click here to see the rest of this post...</a></p>
      </b:if>
    </b:loop>
  </b:if>
<b:else/>
  <p><a expr:href='data:blog.homepageUrl'>Click here to return to <data:blog.title/> home page</a></p>
</b:if>

This block, like the original solution, first checks to see if we're already at a post "item" page or not. If not, it looks through all the labels of each post, and if it finds the label "summarized", creates a link to the post's "item" page with the text "Click here to see the rest of this post..." (if the post doesn't have that label, it doesn't get a link inserted.)

If we are at the post's "item" page already, a "go back" link gets inserted which goes to the home page of the blog, with the text "Click here to return to [blog name] home page". I put this in so a blog reader, after "expanding" the post, has a parallel link to "contract" it again, and go back to seeing all the current posts.

If you want to use a different label (such as "expandable") or different text for your "Read more..." link (such as "Read more...") you can just change the appropriate text in the block above.

Note: Blogger will automatically change the double quotes around "summarized" and "item" into " if you go to re-edit the template -- this is normal, and the template will work fine.

The only other change is that when you make an expandable post (step 3), make sure to give it the label "summarized" (or whatever you've changed the required label to). If you don't, the reader won't get a "Read more..." link, so they might not know that there's more to see at the post's item page.

Going Further
The main idea behind this is screening posts based on post label. The potential applications extend far past expandable posts -- you could have posts on different subjects come up in different colors, for example, by using the same sort of conditional block.

Click here to see the rest of this post...

First Post!

This blog, unlike other blogs I play some part in, is about my tech/geek experiences.