Friday, February 18, 2005

Short and Long Posts

I've been asked by a couple people about the "Read the whole post" links that I use on my long rambling posts.

It is nothing special, just a combination of the Blogger Help article about making expandable posts, Brenden's method for hiding the link on short posts, an extra tag I use for hiding the middle of a post (The difference between this post and its version on the archive page), and an extra anchor tag to hop right to the correct location in the second page.

Even though it is not ground-breaking, I thought I would post about it in the hopes it helps someone someday.

The whole post thing is basically just a CSS trick. Here is how you do it:

Edit your blog template and include these items in the CSS section at the top of the page (I have mine after the footer classes):

<MainOrArchivePage>
span.fullpost {display:none;}
span.fullpromo {display:inline;}
</MainOrArchivePage>

span.shortpost {display:none;}


Then, inside the <ItemPage> section, add these CSS entries:

span.fullpost {display:inline;}
span.fullpromo {display:none;}


That defines three spans "fullpost", "shortpost" and "fullpromo", that are visible or not visible depending on the type of page you are looking at. Fullpost will be used to hide the bulk of the post on the main page. Shortpost is used when you write something...short...and don't need a 'Read the Whole Post' link. Fullpromo is more complicated, I use it when I want to have the beginning and end of a post on the front page, but the middle only on the full page.

Next, you add a "Read the whole post" link in the main section of the template, after the $BlogItemBody$ tag. Mine looks like this (with a little context so you can see where to put it):

<div class="post-body">
<p><$BlogItemBody$><MainOrArchivePage><br /><a href="<$BlogItemPermalinkURL$>#full">Read the whole post.</a></MainOrArchivePage></span></p>
</div>


The #full on the end of the permapost link is an anchor so that when you follow the link it will pull up the second page right to where the first page had ended.

Anyways, that takes care of the template, so you can save it, and republish the blog.

Next, what I did was setup my default post template (in Settings under 'Formatting') to have this text:
<span class="shortpost">
<span class="fullpost"><a name="full"></a></span><span>


[ Incidentally, this was legal as a post template when I did it last summer. Now it appears to be disallowed. I asked Blogger Support about it, but haven't heard anything back. It is just a convenience to have it already in the post, you can do this without it. ]

Now when you post, you add some extra tags to what you would have written before, to control where the post is split (if at all). The changes will be in blue.

If you want to write something short you would do this:
blah blah blah blah
<span class="shortpost">

The shortpost span will encompass the Read Whole Post link, and make it hidden on both the main and post pages.

If you want to post something long you do this:

blah blah blah this is on the front page
<span class="fullpost"><a name="full"></a>
Blah blah, this is the rest of the story
</span><span>

In this case, the fullpost span will be hidden on the main page, but visible on the post page. The ending <span> is to match the Read Whole Post link span that is in the post template. The <a name="full"></a> is the anchor that the "#full" on the Read Whole Post link jumps to.

Finally, when I want the beginning and end of a post to show on the main page, but not the middle I do this:

blah blah front page
<span class="fullpromo">
<span style="color: grey;">... ...</span>
</span><span class="fullpost">
blah blah middle section
</span>
blah blah end section
<span>

That will put the beginning and end on the front page, with grey "... ..." replacing the middle section that is only on the full post page. Complicated yes, and I can't ever remember how to do it without looking up another post where I did it, but it has come in handy a few times.

The only bad thing about doing this is that your old posts that don't have <span class="shortpost"> at the end will show the whole post link even though there is no whole post to read.

When I originally implemented this, I went back and updated some of the old posts, but eventually it got annoying and I just left it alone. That is why my real old posts all show a link that goes nowhere.

For a while I was putting off doing expandable posts because I didn't want to have to mess with the shortpost span at the end of each of my posts, but it hasn't been difficult to remember at all. And I am very happy with the shortened front page.

Hope it helps!

No comments: