Blogger Hacks, Categories, Tips & Tricks

Tuesday, April 11, 2006
Expandable Post Hackery for Blogger
There's an abundance of goodies out there for the blogger who wants to get a bit of show / hide action going on their blog. Expandable posts are useful if you write long posts and want to tease your readers with a little something but keeep your template looking stylish.

There are a number of strategies available to get this done.... by the end of this post I'll probably wish I was using one of them!

Blogger themselves offer a couple of different strategies for this. The expandable post summaries hack uses conditional tags, wraps the part of your post that you want to hide in a special span tag (which you can add to the post template so that it is always there waiting for you), and only shows it on the post page. The "read more" link is really a link to the post page. Quoting Blogger for the pros & cons:
  • Advantages to this method: Customizable summaries, rather than titles only. Can be applied to some posts and not others (for instance, you might only want this for your longer posts).
  • Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)
The alternative Blogger-endorsed method is the show/hide method, which hides the whole content of the post, and asks the reader to decide whether it is worth a look based solely on the title. As you know, it is tricky to write a post title that will suck in a reader, and so relying on the title alone to suck in your audience may not be the way to go...

Aditya at The Last Word offers an alternative method. It allows for a teaser-section of your post as a supplement to your title, & so stands a better chance of hooking your readers. It works inline too, popping open the post on your main page instead of sending your readers off to the post page. The main upgrade, though, is that the "expand this post" link won't appear on posts that are not abbreviated, and therefore do not require expansion. On the downside, once the post has been expanded, you're not currently able to collapse it again. Aditya offers a script for the head of your template, & asks you to wrap the part of your post that you're hiding in a tag that the script can see. This also requires a minor change to your body tag, & the wrapping of your blog post content in a div tag, so that the script knows where to make its magic happen.

Julie at No Fancy Name offers a hack that has a similar outcome, & being a wordsmith of the first order, lays out the goodies in a way that will make sense to you if you still think Java is an island in the ocean somewhere.... (I read that once....) What is nice (not to say suh-weet) about Julie's hack is that the "read more" button only appears on posts where there is more to read, and it is joined by a "back to the main page" button when it activates itself. This means that even if you're a main page all-post-reading browsing sort of a visitor, all is not lost when you find yourself on a post page. Cool.

So, my advice is to toss the default hacks, & decide whether you want "on-page pop-out" expansion, or "link to the post page & link back" buttons.

Let me know what works, & let me know if you're working this out a different way.

Update: Gaby from Blogger Categories has a cool how-to / demo combination post that lays out another way to do this. Where you see >> links in his post, you can pop out more content. You can also click again to collapse the post. There's a script & some CSS for your template head, and some "use it as often as you like" HTML that could go in Blogger's post template if you were so inclined. All good stuff. Thanks for sharing, Gaby!

Filed in:
Posted at 5:54 PM by John.
<    >
Blogger Gaby de Wilde said...
I find it so funny you didn't find my blog jet. ^__^

You should probably start off here:

Then

Here is another method.

Have fun :-)

<    >
Blogger Triet said...
I modified the blogger hack. I put the CSS and javascript in my template just like they advise to at blogger help:show/hide links but I changed what they did in between the [blogger] tags.

Instead of putting their [span class= yada yada] [/span] stuff in the template, I enclose what I want hidden in my post in that code, changing the "$BlogItemNumber$" stuff to an individual name for my post.

Then I put the link ([a href="javascript:expandcollapse('name here')"] at the end of the post.

What this does is allow an expandable post right on the main page, instead of jumping to a post page. It also shows the link only on the posts that I want to expand, and I can choose how much I want hidden.

One drawback that Aditya noticed was that the link is still present on the post page, when it really isn't needed, and it requires more code to add to your post than just the [hide][/hide] that he is working on.

All in all, however, I find the drawbacks minimal compared to the benefits.

<    >
Blogger Triet said...
also, having looked at gaby's link, I see we're almost identical. Seems like that's the way to do it, without seriously writing code to shorten tags and such.

<    >
Blogger Aditya said...
@Triet: Haha! I guess there wouldn't be much problem if people knew how to code in the first place. Our job as hackers is not to make coders out of people, but make it easier for them to do what they want to do.

We are the interface to the backend, which they don't need to see or understand! :)

@Gaby: Its been a long while since you showed yourself to the world. Roberto and I could do with your hand in these things! Wanna take a look at my code and make something better out of it? Link! :)

<    >
Blogger JM said...
Thanks for the mention, John!

One thing about the process I wrote about is that it is most decidedly used predominantly by people with zero skills in html or javascript or template tags, etc. which is exactly the group of people I aim to help. Doesn't matter if it's not the most cool or hackery way, it's (so far) the one that people's grandmothers can follow--always a good test.

<    >
Blogger Gaby de Wilde said...
One drawback that Aditya noticed was that the link is still present on the post page, when it really isn't needed, and it requires more code to add to your post than just the [hide][/hide] that he is working on.

Intersting suggestion, I didn't care because I have 10 posts per page. But it would be nice to have indeed.

<    >
Blogger Eternity said...
i use a code from here and it works very well. it's a peekaboo show/hide style so it is always on the main page. the hide function works too. check it out here

<    >
Blogger Gaby de Wilde said...
I've found something that makes the expandable post hackery to cool to ignore.

I've hidden a java applet (afternet irc) and some flash films (google video) Now they do-not load if-not expanded! One can add as manny videos to a single post as you want. O_O


<    >
oh cool info, im gonna try it on my blog, thanks

<    >
I have created a friendly tutorial for Blogger expandable post summary, it is new functionality added to the blogger editor. You can head on to this link article: New Expandable Post Summary from new Blogger Editor

Links to this post:

Create a Link

eXTReMe Tracker