Wednesday, February 4, 2009

Creating expandable posts in Blogger

My in-house critic tells me that my last attempt to explain how to publish a few paragraphs of a post on your front page, then put the rest of the post behind a "Read More" link was a "cop out," or something along those lines.

Instead of writing the explanation myself, I found what I *thought* was a good explanation and linked to it. Mark, the in-house critic, says not good enough. The explanation was too techy, he says.

Allrighty then. So here's take two.

First off, this is NOT an easy tip. If you are easily confused by code, or just scared of it, you should dip your toe in the water with some simpler code. I suggest you head on over to Webmonkey and start at the beginning of their HTML lessons.

Webmonkey is a great place to learn all kinds of tech and software stuff, and is a great entry point for medium beginners.

To read take two on creating two-part posts, read on after the jump.

Cool trick, huh? Ok, here's how I did it.

NOTE: Any time you insert code as recommended here, be sure to REMOVE all the spaces I've inserted after the < symbols. If you don't insert those spaces, the code becomes invisible, so I had to alter the code so you can see it.

1. Click on the LAYOUT button in the upper left of your Blogger screen.
2. Click EDIT HTML
3. Click DOWNLOAD FULL TEMPLATE to save your template, just in case you mess something up.
4. Okay, search your HTML code for < /head>
5. paste this code immediately before < /head>

< style>
< b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
< b:else/>
span.fullpost {display:none;}
< /b:if>
< /style>

6. Click Save Template

Congratulations! Step one is done. Take a breather. While you're doing that, I'm going to sample an almond croissant from West Seattle's Bakery Nouveau.

DISCLAIMER: Bakery Nouveau did not pay me to say this. I just really, really love their almond croissants. Damn you Bakery Nouveau! Ruined my diet again!

Okay, ready? Let's go on to step two:

You should still be on LAYOUT > EDIT HTML
1. Right above the code window, to the right, you'll see a checkbox that says Expand Widgets. Make sure this checkbox is checked.
2. Search for < data:post.body>
3. Directly above this code, paste this:

< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url' target='_blank'>Read more!< /a>
< /b:if>

4. Click Save Template

Congrats! Step two is done. Let's move on to step three.

Okay. We're going to leave the HTML Template for this last step.
1. Look at the top of the Blogger page. See the SETTINGS tab? Click it.
2. Now click the FORMATTING tab
3. Scroll all the way down the page to Post Template
4. Paste this text into the Post Template:

Here is the beginning of my post. < class="fullpost">And here is the rest of it.< /span>

5. Save

That's it -- you're done! Now, next time you go to make a post, you'll see this above text in the post template. All you do is type the part you want to appear "above the fold" where you see the text: Here is the beginning of my post.

Everything you want to post after the fold (behind the Read More link) you'd type where you now see the text "And here is the rest of it."

Not easy, but doable. Let me know how it goes!


  1. Much better explanation. Thank you! I especially liked the little croissant break between steps one and two. Delicious, and a good incentive to keep learning.

    But what about the break between steps two and three? Nothing?!? There's a good little pie shop down the street from Bakery Nouveau ...

  2. Thanks. This sounds potentially doable and much clearer than the explanation on the blogger site, which caused my html-savvy Web-page instructor to raise her eyebrows and say, "We'll have to do this another time."

  3. I tried this, but the "read more" link displayed at the beginning of the post and my whole post displayed as normal.

    Any thoughts?

  4. Hi Christopher, Could be WHERE you placed the new code snippet. Did you check your work and make sure you put it in exactly the right place? Did you remove all the spaces I had to add to get the code to display? If you check your work and it all looks fine to you, but still doesn't work, copy and paste your code into a notepad doc and email it to me at, and I'll see if I can figure it out.

  5. I got up to step 3 and when I went to save, I had an error message: Your HTML cannot be accepted: Closing tag has no matching opening tag: < / span>

  6. Also, I had the same issue as Christopher Rock! :)


Note: Only a member of this blog may post a comment.