[Misadventures in Taiwan]

12/31/2004

 

expandable post summaries

i finally figured out how to make expandable post summaries for Blogger! hurrah!!
i was about ready to cry but i finally figured it out. yeah.

warning: i didn't include full instructions in this post. so if you want to create expandable post summaries too you have to click on either the Blogger Help link or the link to the other workaround and view the full thing. the tags and steps i included here were only the ones relevant to my post so they're pretty incomplete. so you're not gonna get anywhere if you only follow them and not read the complete instructions and steps from the links i gave.

by the way, you have to enable "Post Pages" to be able to have expandable post summaries. (Settings--->Archiving--->"Enable Post Pages": Yes)


Livejournal users should be familiar with expandable post summaries. there's the very nifty [lj-cut][/lj-cut] tag that hides everything you put between those tags from your main journal page .

what's shown instead on your main page is "read more" or some other text that you can personalize.

clicking on the "read more" link will lead you to the permalink for that post. this is really cool since very long posts won't end up cluttering your main page (and your livejournal subscribers'/ friends' pages).



read more




Blogger also has a similar [lj-cut] kind of hack.
Read: Blogger Help--- How can I create expandable post summaries?

If you want to try making expandable post summaries, you can try that tip from Blogger, it's pretty easy to do.

just wrap whatever you want to "hide" from the main page with this:

[span class="fullpost"] [/span]


the problem is that the "read more" (or whatever words you choose to replace "read more") text appears in EVERY post, even in the non-truncated ones because the tag that will create the "read more" is in your [body] template (see below for tag).

[MainOrArchivePage][br /]
[a href="<$BlogItemPermalinkURL$>"]Read more![/a]
[/MainOrArchivePage]

(wherein "[ ]" is "< >" in real life.)


in blog entries where you actually used the "read more" thing, "Read More" appears at the end of the part you chose to show on the main page and hides the text you put in between the [span class="fullpost"] [/span] tags. clicking "Read More" will take you to the post's permalink page where the complete entry is shown.

in blog entries where you didn't use the "read more" thing, "Read More" still appears at the end of the post except it doesn't hide anything. clicking it will lead you to the post's permalink page.
but it doesn't hide anything since you didn't use it. and i don't want to show a "read more" link when there's nothing more to read; when the full post is already shown on the main page anyway.

actually this probably doesn't pose a problem to millions of other people out there but it really bothers me. it really does. i'm anal like that. i really don't want to show a "read more" link when the full post is already shown on the main page anyway. see i'm repeating myself already.

i wanted something like the [lj-cut] for Livejournal. the "read more" link only appears when you used it for that post. not for each blessed one.





i then turned to Google and searched for some ways to get around that. i don't want "read more" to appear in every post after all. only in posts that i think are too long for the main page.

i chanced upon this guy's workaround for that.
Read: Link

it was pretty cool, the only thing you have to add to the template is between the [style] tags. nothing in the body part of the template, which means "read more" won't show up on every post. only in posts that you want them to show up in.

after adding the tags he wrote to your [style] part, all you have to do is wrap this around the part of your post that you want to "hide" from the main page.

(wherein "[ ]" is "< >" in real life.)

[teaser]
[span class="show-fullpost"][a href="[permalink]"]~> read more[/a][/span][span class="fullpost"]
[fullpost]
[/span]

Replace [teaser], [permalink] and [fullpost].

source: link to his blog


Since I'm pretty dumb, i didn't really know what he what he was pertaining to when he said "replace [permalink]". did he mean replace it with this Blogger tag for permalink? ------> "<$BlogItemPermalinkURL$>"

or did he mean you have to replace it with the real permalink (not a code, but the real specific one for each post) whenever you post?

he probably meant the latter because when i tried replacing [permalink] with "<$BlogItemPermalinkURL$>" the links were wrong. the post just linked it to a non-existent page named "<$BlogItemPermalinkURL$>.html" . not the real permalink page.

again, since i'm not very smart, i didn't really know how to easily obtain (like a source where you can copy and paste) the permalink before publishing your post.

i was thinking, everytime i want to do the "read more" thing do i have to publish my post every time, and then copy the permalink link and then go back to Blogger and edit my post and paste the name of the link in?

right. so anyway, i finally figured out that the permalinks get their names from the year you posted then slash month then slash words in the TITLE of each post, except its hyphenated.

so if the title of your post is "i have an orange phone" posted november 2004, your permalink is "2004/11/i-have-an-orange-phone.html".

yeah well the point is i figured out how the bloody permalinks get their name. so i just copied and pasted his tip .....

[teaser]
[span class="show-fullpost"]
[a href="[permalink]"]~> read more[/a]
[/span]
[span class="fullpost"]
[fullpost]
[/span]

(wherein "[ ]" is "< >" in real life.)

....into the blog post template except i replaced [permalink] with a similar phrase to "2004/11/i-have-an-orange-phone.html". that way if i need that tag all i have to do is change the year, month, and the words between the hyphens.


background text blah blah blah
[span class="show-fullpost"]
[a href="2004/11/i-have-an-orange-phone.html"]read more[/a]
[/span]
[span class="fullpost"]
the long long post you want to hide from the main page
[/span]




in a nutshell whatever you write in the blog post template will show up in the little box where you type your blog entries. to get there: Settings--->Formatting--->Post Template is at the very bottom.

i put his tag there because i sure as hell can't memorize everything that goes in the tag every time i want to make "read more" links. if you don't want/ need that tag you can just delete it from your little typing box.


anyway i still wish i had a more efficient/ automatic way of inputting the permalink. hope to find one soon.

 
Comments (留言€):
Hi there,

If you can make do with supporting Firefox and not IE (at the moment), there's an automatic way of doing this. I've linked to it from my site:

Expandable post summaries (CSS2)

Cheers,

Mal.
 
hi mal! =)

thanks for the link. (but actually i got a 404 error when i clicked it..)

but it's okay. my expandable post summaries work now. works in both IE and Firefox too (also Opera i think). i haven't changed the template code in months because i could hardly remember how i got the expandable post summaries to work in the first place heheh..

thanks a lot again. =)
 
Post a Comment

<< Home
Contact Me
簽名簿€
links
Technorati
is the page illegible?
button links
blogroll