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.
(PROCEED AT YOUR OWN RISK)
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!