dinsdag 15 september 2009

Read More links: a text block toggle hack for Blogger

What is a "Read More" link? On lots and lots of blogs, you will see a short piece of text usually with a teaser or a summary, and if you want to read more of that story, you click the "Read More" link. Why do this?

There is a very easy Read More hack for Blogger, but there are a few things wrong with it. It reloads the one post in the current window so the view on other posts is lost, the screen will flicker, and if you have a rotating banner like me, the banner will change. I didn't want that.

I wanted several additional texts that the reader can toggle on and off independently. Like so.

The solution is to use javascript. Being a newbie at Javascript, I first tried this hack here. It works, but you need to put in a dedicated on/off function in your template for each block that you want to turn on or off ('toggle', in the lingo). This is not very elegant, of course, plus it slows down your blog considerably.

I figured there had to be a better way: just one javascript function that you call with parameters. So I created one and it worked just beautifully in Chrome, and in IE as well.

But not in Firefox.

Well, Shit, as we say in Dutch.

Nevertheless, a decent Blog isn't worth that name if it doesn't show properly in the Big Three. So after some analysis & trial & error, I came up with a nice little script to put into your template one time and then call it lots of times from within any number of Blogger posts. Tried and tested in Chrome, Firefox and Internet Exploder.

You can see it in action above. The only thing you have to remember now is that each toggable text block must have a pair of link- and text-ID's that is unique across all of your blog. And yes, it does require a bit more code in the blog post itself. Who said Javascript was easy?

Click on the picture top right to get a screenshot of the code, or download the code snippets in a text file. There is a fair bit of explanatory comment. See for yourself!

Note: Loket Diversen is normally in Dutch only. This post is in English to accomodate the wider audience of Blogger users. And to attract readers. Ho hum.

12 October 2009: improved code snippet to show IDs and link texts in a more comprehensive way.

12 August 2010: updated link to code snippets.

7 opmerkingen:

MarPan zei

Thank you very much for this. I tried to use google solutions but yours is simplier in use and simplier to understand :) I used your function (and referenced to your site) here: tabmar.blogspot.com (unfortunately - for you - its in Polish, but still I felt like I should mention it :) )

Rolf Blijleven zei

Hi MarPan, I'm glad you like it. And your blog being in Polish, is no problem..

Erin zei

Hello there. I really want to use this code but the code snippet link isn't working :( Please help! Thanks!

Rolf Blijleven zei

Hi Erin, thanks for signalling that. Please try again, it should work now.

mr.Poneis zei

Dank U!

That I presume you speak Dutch more than English, cause you're German and not because a aesthetic option

The thing is that code really solved the priority matter that I was having in my blog... that worked very well

Auf Wiedersehen
mr.poneis

ps.: and now I see my mistake with Dutch and German(Deustch?) languages... sorry...

Rolf Blijleven zei

Por favor, mr. Poneis
I'm glad you liked it!

(and yes, Dutch is from Holland, Deutsch is from Germany)

Lisa zei

Thank you from this Canadian blogger for this very useful bit of script.

Mogelijk gemaakt door Blogger.