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:
- The “more…” signs are display below each post, whether you indict it should be summarized or not.
- 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.
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!
btw, can i put a link to your article in my blog? thank you
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
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
Thanks for useful hack =)
I sat down, overs newborn out, studly against the poor regardless of the tub.
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
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.
“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.
I hope this will make it simpler.
How to create expandable post in Blogger