Blogger: selectively add 'click to read rest of entry' to long entries

Wordpress has a handy feature where long posts can be broken into two parts: when viewing the full blog you only see the first few paragraphs of long items, with a link along the lines of 'full post' or 'click here to read rest of entry'. I assumed it would be as easy as adding a tag [previewBreak] to any blogger post, but blogger does not seem to have this feature built in, so as best I can tell you have to hack it. Read on to learn how.

A technology commonly used for selectively hiding content is CSS. CSS lets you sepearate the content from how it is displayed: and one common display parameter is whether something is hidden or not. CSS lets you change display parameters based on type (table, link) and based on arbitrary tags you have assigned to content within the page.

Basic solution:

A basic solution can be found at here but it has one major drawback: it adds a "click here for rest of entry" link to *every* post. Short posts can be displayed in full on your blog and don't need a "full post" link.

Here is how the basic solution works:

Step 1 adds a definition to your template, so that any part of your post marked 'fullpost' will be hidden on your main blog page, but visible when viewing the full post.

Step 2 adds a definition to your template, adding a 'full post' link to the end of *every* post. This is bad, because short posts don't need a 'full post' link.

Step 3 shows you how to tag each post to determine what part of the post is hidden on main blog page.

I'm sure someone has posted a better solution, but google didn't find it so here is a modified version:

Better solution:

Step 1: rather than pasting in a single style to hide bulk of post, add two styles: one hidden in preview but visible in full post (used for the bulk of long posts), the other style visible in preview but hidden in full post (used for the 'full post' link). You can follow instructions from link above, but paste in the following (note the added 'notfullpost' case):

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

Save your template!

Skip Step 2: we don't want the link in the template, because we don't want it applied to every post. HOWEVER, do be sure to save your template after Step 1.

Step 3: add the fullscreen div tag within each post where you want the post to break:

<div class="fullpost">

At the bottom of the post, *after* closing the div tag, add a link to the blogger URL for this post, eg instead of

</div>

paste

</div><div class="notfullpost">
<b><a href="http://interfaceoff.blogspot.com/2009/04/blogger-add-click-to-read-rest-of-entry.html">Continue Entry»</a></b>
</div>

Because you are manually adding the link only to posts which you are manually splitting, it won't infect short posts. Because the 'full post' links are tagged 'notfullpost' they won't be visible in the full post.

Notes:

Tips:

* tags like <div> imply newlines; More generally, whitespace will be collapsed unless there are line-level tags within it. If you have extra whitespace in your full post, remove blank links around such tags. Note that in our modified Step 3, the initial closing div and opening div tags are on one line; that is to cut down on unnecessry whitespace.

Shortcomings:

* you have to hard-code the link to full post. It would be better to use 'data:post.url' but I couldn't figure out a way to access that variable from code within blogger's post edit screen. I suspect that if you change the post date, the link might break. However if the canonical link changes any 3rd party links into your blog posts will break as well. Therefore the problem goes far beyond your 'full post' links; it is in blogger's interest to preserve the canoncal link to your post, and in your interest to avoid anything that might cause blogger to change the canonical link to your post. And as expected, changing the title of a post *does not* change the canonical link.

Possible improvements:

* A way to use 'data:post.url' within the code of your post.

* A way to add a link to 'data:post.url' within the template, but set a piece of data withing your post to indicate whether there is a break, and have the link in template only visible when there is a break.

Please comment if you have found a more elegant solution!

Click to read rest of entry»