Note: This article assumes you are using a classic template
(without the Layouts features).
This is a trick that's particularly useful on blogs with very long posts.
What happens is that a reader will only see the titles of your posts at first,
so they can skim through and see what they want to read. Then, when they want to
read a post, they can click a link to see the full text. The text can then be
hidden again when they're done reading. This all happens on one page, so there
is no extra navigating to or loading of other pages.
You can give it a try here:
This is a Long Post
Well, okay, it's not really all that
long, since I don't have a whole lot to say here. But I ought to put at
least a decent paragraph here so you can get an idea of how this will all
work. Anybody know any good jokes? C'mon, somebody must. Do I have to do
this all myself? I guess so. Not that it really matters, of course, since
there's no point in carrying on too long. Go back and read the rest of the
article! (You can click the link below to hide this entry again.)
[+/-] show/hide this post
There are three ingredients that go into this feature: CSS, Javascript, and
of course, Blogger template tags. So let's go through it step by step.
CSS
This is the simplest part. We need a couple classes that either hide posts or
show posts, so you can just paste these two lines into your style sheet:
.posthidden {display:none}
.postshown {display:inline}
Your style sheet is usually near the top of your template, between the
<style></style> tags. If you have your style sheet in a
separate file, you'll just add these lines to that file instead of to your
template.
Javascript
Add the following code to your template, between the <head></head>
tags:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
This is the function that we'll use below to show or hide the post. We just
give it the ID number of a particular post, and it changes that post from one
CSS style to another.
Blogger Tags
Now that we've got our tools in place, we can actually apply them to our
posts. In between the <Blogger></Blogger> tags in your template,
you'll see the section where the posts are displayed. The code we'll use here
looks like this:
<BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber$>1">
<$BlogItemBody$><br />
</span>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a>
You can, of course, modify this to suit your template. For instance, you may
want to have other formatting tags in there, and probably other code for your
byline, or comments. The "[+/-] show/hide this post" text can be changed as
well.
The most important part of this code is the <span> wrapper
around the <$BlogItemBody$> tag. You can see that this section
starts out being hidden, and it uses <$BlogItemNumber$>1 to create
a unique ID. (The extra "1" is to make sure it is unique, in case your template
is already using the blog item number for something else, like a permalink.) The
Javascript link uses the same ID number to make sure that we show or hide the
correct post.
Once you've got everything in your template, just save the changes and
republish. The new format will automatically be applied to all of your posts,
without having to change anything else.
Notes:
- As with any template modifications, you should be sure to save a backup
copy of your template before you start. Just copy and paste all your code to
a text file on your hard drive, so you'll have it there as a replacement in
case anything goes wrong. - An alternative to the show/hide method is to use post summaries. Each
method has its own advantages and disadvantages. - Advantages to this method: Only the template needs to change, with no
modification required for your posts. - Disadvantages: Only the title of each post is displayed, with no summary
information. The feature is applied to all posts, rather than letting you
selectively apply it (for instance, only on long posts).
Read more!
