Wednesday, March 11, 2009

Read More! Read More!

I've always wanted to learn how to do expandable summaries for my posts, since (1) I've always had the tendency to be a lengthy writer and (2) my reviews usually have a lot of spoilers. At first, I thought the feature was something readily available at Blogger (like something you just tick in the menu of options in Settings).

Unfortunately, it's much more complicated than that. There is a need to actually do some HTML tweaks. And seeing the entire raw code of my Blogger template really reminded me of how much I sucked at my programming courses in school. But for the love of my blog (LOL), I attempted to figure the whole thing out anyway (and by that I mean follow instructions and doing some copying-pasting). I tried following the instructions on Blogger Help but to no avail. Sorry to say, the whole section wasn't so helpful, Blogger Help. There were some missing steps or tips, and it seemed like it was written under the assumption that everyone is a natural programmer or coder.

Luckily, when the main resource fails, there's always Google. After perusing a couple of sites, I found the one that seemed user-friendly enough in this blog called Coder's Talk (and it is!). I followed the very clearly illustrated instructions (complete with screenshots and highlights) and eventually hacked it! Yey!

To anyone who might be interested in creating their own expandable post summaries, I highly recommend following Coder's Talk. I have three final notes:

  1. Never attempt to tweak your HTML code without saving a back up of your original template. You can do so by automatically saving a back up (this facility is readily available in the Edit HTML page of Blogger). Or copy-paste the entire code to a Word file for easier access because the HTML back-up file needs to be run via a HEX editor or some other non-standard program. Or just do both to be sure. :D
  2. After following Coder's Talk's instructions to the letter (well, sort of), I was still unsuccessful initially. What I did was type in the p tags missing from my original HTML template (and mentioned in the instructions) and viola! It works! Yipee! :D
  3. The final step in the process requires you to edit your post template. Should you wish to post something without the read more link (or whatever it is you wanna call it instead of 'read more'), you would have to delete the code from your post template otherwise your post might have some missing text once published.
Happy expanding and collapsing, bloggers! :D