jump to navigation

A better way to create expandable post summaries in Blogger December 11, 2005

Posted by wangyin in Uncategorized.
trackback

The Blogger help contains a way to create expandable post summaries, but the result is not quite satisfactory. There are two shortcomings:

  1. The “more…” signs are display below each post, whether you indict it should be summarized or not.
  2. Users should enter there text in such an ugly way:


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

To get rid of the “more…” indicator from unwanted places. We can use a feature of CSS called “adjacent sibling selectors”. We put an anchor with class “more” after our <span class=”fullpost”></pre>. So the final HTML of the post looks like:


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

To achieve this goal, we first modify the template so that the area around <$BlogItemBody$> looks like this:


<div>
<$BlogItemBody$></span><a class="more" href="<$BlogItemPermalinkUrl$>" title="read the full article...">more...</a>
</div>

Note that I’ve added an ending <pre></span></pre> so that we don’t need to enter manually into our post.

Second, add the following into your style sheet:


a.more{display:none;}
<MainOrArchivePage>
span.fp {display:none;}
span.fp + a.more{display:inline;}
span.fp + div + a.more{display:inline;}
</MainOrArchivePage>

<ItemPage>
span.fp {display:inline;}
</ItemPage>

When writing a new post, insert <span class=”fullpost”> wherever you need “more…”

Done.

Advertisements

Comments»

1. mela - January 22, 2006

i’ve been searching how to make a better way than blogger provide to create expandable post summaries [though the writer of that article has put the better way as exercise for readers to found out, i still couldn’t do it ^_^; ]
thank you very much for your article!

2. mela - January 22, 2006

btw, can i put a link to your article in my blog? thank you

3. Colin - August 24, 2007

i swear, why the hell am i having so much trouble with this stuff. When I revert to classic template mode (which you need to do in order to input these codes correctly), it totally messes up my blog. My widgets and such in the side bar are all messed up. HELP

4. edward - September 10, 2007

I’m having quite a bit of trouble with this. I can’t find the style sheet section to put the first bit in. Do I need to revert to Classic template mode? Please help.
Template Style
Name: Minima Stretch
Designer: Douglas Bowman / Darren Delaye
URL: http://www.stopdesign.com
Date: 26 Feb 2004

5. Blink44 - November 12, 2007

Thanks for useful hack =)

6. Quatfand - February 19, 2008

I sat down, overs newborn out, studly against the poor regardless of the tub.

7. bob - April 28, 2009

I found a simpler solution to adding post summaries that uses PURE CSS (no javascript). It seems to fix a lot of the problems that i was getting with the other solutions. Might be worth taking a look at this solution as well.
http://simplerthanyouthink.blogspot.com/2009/04/blogger-expandable-post-summary.html

8. Mkcoy - May 15, 2009

You need to make sure the css is inbetween the style tags

like so

Does the “more” link open a new page still or does it expand open on the page like option 2 does yet for option 2 you can only have a title only no snippet!

That is something I found out and I’ve tried both ways now and they both have there pwn pros and cons. Need to expand your template use the right code for classic or layout. But still searching for something better.

9. kyle - May 28, 2009

“Note that I’ve added an ending


so that we don’t need to enter manually into our post.”

where is this ending that you added? please tell me, coz i dont see it in your post.

10. sara - October 24, 2009

I hope this will make it simpler.

How to create expandable post in Blogger

11. online backup reviews - July 14, 2013

It is also important for the laboratory instruments while generator takes
some time. If you want to put all the files that are open and/or locked.
A portion of the hospital’s power distribution circuits, which direct the generated electricity out into various areas of the hospital where online backup reviews power is an ongoing operational requirement for telecom operators. However it may not be the man to improve iOS.

12. salinacruz76434 - April 8, 2016

An added complication with NetBeans that I didn’t notice while testing previously is that it does *not* work with IronPython 2.6b1, because 2.6b1 is missing the “code” and “codeop” modules (although it does seem that simply copying them into the Lib folder works). I’ve tried to find out why these have vanished, but haven’t been able to do far. Come on http://tropaadet.dk/salinacruz76434081815


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: