September 12, 2006

Expandable post summaries with Beta

[UPDATE: I came up with two better versions later. Use one of them instead of this older version.
1. One with which you can selectively make some of the old posts expandable i.e. only summaries will show up for them and clicking a "read more..." link will take you to the post page.
2. One that expands posts in the main page itself - Peekaboo style.]

Jornada left a comment in my blog that he found a blog which explained how to show expandable post summaries with Beta. Good thing about showing only post summary in the main page is that your readers can quickly find all that you have written about. Also, your blog gets an 'online journal'-like neat look. A "Read more" link is provided which takes them to the post page to read the entire post. Please note that you, as the author, have the flexibility to choose the portion of your post that appears as summary.


This hack is only an adaptation of Blogger's original instructions for expandable post summaries to Beta template. You can find Jornada's post about this here. I thought I will re-post the instructions with minor modifications for my readers.

Step 1. Search for "post-header-line" to find this portion of code in your template and add the lines in red as shown.

<div class='post-header-line-1'/>

<div class='post-body'>

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

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Step 2. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Follow the format and only summary will show up in your main page. Please note that you also need to divide your old posts like this (atleast the ones showing up in main page) into summary and full portions by editing them.

82 comments:

Anonymous said...

This is very nice. do you know how this guy this effect on his blog?

Example of button reveal

lucy tartan said...

Ramani,
thank you for this, and for your blog in general. I'm having trouble, though - those bits of code don't appear to be in my template, which is one of the new ones added in Beta (Denim).

Jigar Shah said...

i think blogger is coming up with this feature in next version.
http://help.blogger.com/?page=wishlist

Alex said...

What a hacker...

Ramani said...

Lucy, all the templates are alike except for the CSS. Look for the lines in black (use the search term 'post-header-line' to get there). Lines in red have to be inserted.

Kate said...

LOVING your blog. I'm new to html and even I can do this stuff! Question: Is there a way to do this and have certain posts NOT have the "Read more" link? I'm having some trouble - when I did this ALL of my previous posts have a Read More link and there's nothing more to read! I also don't want to go back and modify each one separately. Did that make sense?

Ramani said...

Kate, yes, I make my instructions simple so that any blogger can use my hacks, not just the techies. The "read more" link will only appear in the main page. If you don't want to change all your posts, you could just divide the posts that currently appear in your main page into summary part and remaining part. That's what I have done. Going forward, all your new posts will have this separation.

Kate said...

Thanks! But, what if I want the option of having the "Read More" link? I want some posts to have the link but not all... Also: is there a way to keep the link in the archived post as well and not just on the main page? I can find ways to do this on the classic blogger, but not with beta blogger... Thanks again for your wonderfully informative blog.

lucy tartan said...

Thanks, Ramani. I found the spot in the template - my problem was that I had not ticked the box to expand widgets.

kca said...

Hrrrr, just a question... i think u guess which:

How can i make the comments appears on the main page?
:O(

Ramani said...

kca, you seem to have a fixation on main page comments :) Unfortunately, Beta doesn't provide the comment data for main page. So, there's no straight forward way. Check with stephen (http://singpolyma-tech.blogspot.com) who developed peekaboo comments for old Blogger, if he has figured out another way.

kca said...

:O(

So I will not up grade my blog until i found a way to see my comment bubble on the main page.

Raquel said...

This is nice but is it possible for you to make this as a collapse/expandable? I've seen like this from blogger help http://help.blogger.com/bin/answer.py?answer=42214. It's a user friendly.

Thanks Ramani, I'm gonna share this to my friends.

A Nawty Mouz said...

Ramani,

Thank you so much for your hack. It clued me to what I wanted.

I have a different variant for expandable posts.

I use <span class="summarypost"> for the portion of the post on the main or archive page to be displayed (and only on the main/archive page). You can use this class to customize the "Read More". And, the <span class="fullpost"> is used as before. Any text outside of these two classes will show on either page types.

I would note also that I place the style definition within the <head> section of the web page. Placing the style definition inside the post body definition repeats the styles unnecessarily.

The drawback is that I manually include a link to "Read more" within the post (which needs to refer to the post link). But, this way, I can choose which posts have a "Read more" and have a custom blurb that only shows on the Archive/Main page. On the other hand, you won't get a "Read more" link on every post, even the ones that don't need it.

So, a post using this would look like -

~ ~ ~ example post body ~ ~ ~
<-- Introduction Text (this is part of the full post display) here -->
<span class="summarypost">
Want to know more?
<-- Teaser or Disclaimer Text here -->
There is more <a href="{your -post-link-manually-entered}">here>
</a></span>
<span class="fullpost">
<-- Full Post Text here -->
</span>
~ ~ ~ /example post body ~ ~ ~


Here is the template hack. This goes after all of the CSS styles but before the </head>

~ ~ ~ Template hack ~ ~ ~
]]></b:skin>

/* Custom - Begin
----------------------------------------------- */

<b:if cond='data:blog.pageType == "item"'>
    /* ItemPage */
    <style type='text/css'>
    .fullpost {display:inline;}
    .summarypost {display:none;}
    </style>
<b:else/>
    /* MainOrArchivePage */
    <style type='text/css'>
    .fullpost {display:none;}
    .summarypost {display:inline;}
    </style>
</b:if>

/* Custom - End
----------------------------------------------- */

</head>
~ ~ ~ /Template hack ~ ~ ~

-ANM

Honey Cakes said...

If I hadn't seen Lucy's comments, I would have been just as confused as she was initially. The only problem, if you could call it that, that I did discover was that the new code for post template only applies to new posts. You have to copy/paste the code into HTML for all the older posts if you want to edit what is already on your homepage.

But otherwise, it works great, thanks!

Honey Cakes said...

I needed to add that the 'read more' link appears on the bottom of every entry on the home page, but until I added copy/pasted the post template code into the older entries to get the full effect.

Ramani said...

Raquel,

Do you really want to hide the entire post in main page? Did you see my previous post on peekaboo view for label pages? If you like that, I can tell you how to use it in main page also.

and I didn't know that Blogger had a help page for expand/collapse for classic template!

Ramani said...

Honeycakes, I added a note about editing old posts now.

Ramani said...

Kate, it is not possible to show "Read more" link selectively. And this should work for archive pages, unless you have installed my Peekaboo hack also.

Ramani said...

A nawty mouz, your implementation looks nice. Kate, pls check that comment.

nayj said...

would you look at my blog and tell me how I can hide the tags from the main page? I don't want all this on my page! I don't know what I did wrong.....

Subscribe to Post Comments [Atom]
>
0 Comments:

Post a Comment

<< Home
Trackback
Wednesday, September 13, 2006

and then if there are comments, all of them now show on my main page, and I think it looks crappy.

Ramani said...

nayj, can you send me your template through email? I will check what happened. and I am surprised how you got comments showing up in main page!!

Raquel said...

"Do you really want to hide the entire post in main page? "No Ramani, what I meant was when you click the "read more...", it's nice if you will add an effect like collapse/expand.

Anyway, how did you control your label tabs on navigation and how did you add the home? Please share it with us. I asked the author about this, but, he doesn't know yet.

Ramani said...

Raquel, gotcha. you want peekaboo view with summary in main page :) I was thinking about it. will check if it is doable without changing too much code.

Shaun said...

Ohh a bloggerwishlist? That's awesome... I've got a bunch of ideas I need to have updated.

(Glad do see your site runs well under the new version!)

Thomas said...

Hello Ramani,

I have a few questions.

1. I inserted the code for the Expandable Post, but it's showing the whole posting rather than just a summary. At the end of the post it says "Read more..". How can I shrink it down to about a paragraph?

2. I'm using the same template as your site, the "Scribe" template. I see that you've expanded the width of your page, but I can't figure out how to do it on mine. I've tried increasing the width number on the Layout section of the template, but things just become disjointed. How did you do it?

My blog is at http://tommyatkins5.blogspot.com/

Any help you can give me will be appreciated. Thanks!

Thomas

Ramani said...

Thomas,

After you add this hack, only new posts will use the post template. You have to manually edit your old posts to divide it into summary and full post sections.

Expanding the template may have some side effects. If you are not familiar with CSS, I would suggest you to not to try it. Do you want to expand it to make into 3 columns?

Thomas said...

Hello Ramani,

I tried a test run by making a new post. When I opened the page for a new post, it went directly to html format.

I inserted a summary over where it said "Type your summary here", and I inserted the rest of the post where it said "Type rest of the post here". The result was that nothing appeared on the main page but the title.

Then I went to the Compose format and inserted my entire blog there. After which I returned to the html format to insert the Summary. The result was a full posting of my blog with "Read More..." at the very end.

Can you help me find out what I'm doing wrong?

Thomas

Ramani said...

Thomas,

You should only be using HTML mode and not compose mode. The line "span class=fullpost" should be after your summary. did you make sure of that?

Thomas said...

Hell Ramani,

Yes, I just followed the format from your hack. Where it said, "Type your summary here", I inserted my summary. I did the same thing for where it said, "Type rest of the post here" for my full post.

Am I just not getting it?

Thomas

Ramani said...

hmm.. It works for others, Thomas. Can you send me your template through email?

lucy tartan said...

Ramani, I wondered if you'd seen this post on No Fancy Name - instructions I followed when I set up the expandable post on my classic blog but don't work with the beta blogger, obviously.

http://nofancyname.blogspot.com/2005/02/making-expandable-blog-posts-in.html


Doing it this way, you can choose form post to post whether to make it expandable or not.

Thomas said...

Hello Ramani,

I figured out what I have been doing wrong and now it's working wonderfully. Thanks for all your help!

Thomas

KCA said...

Hi Ramani,

I dont' know if you were aware about these
folks
who made a java hack to blend some sidenotes into Worpress posts. Side
notes that readers could hide if they want.

So it gave me the idea to make a similar for Blogger, easy to do when you
think about the "quotes". Maybe you might take a

look at my blog.
'cause my english is so so.
But the point is that I don' t know how we can show/hide it,... basically
this is where you should act like a Superman.
:O)
ps: I got a question... do have any idea how can I... ;)

Ramani said...

KCA, I will take your idea and check it out when I get more free time. thanks.

Sun Dawtah said...

I'm a newbie to blogging and have had limited success with "expandable post
summaries". My problem is that I only want the "read more" link with long entries. Currently it affixes to ALL my entries. How do I use this for only lengthy entries?

Ramani said...

Sun,

Did you check out my other post titled "Expandable posts with peekaboo view"? with that version, read more link can be controlled your way.

Rangga said...

OMG this is totally awesome, somothing that I cannot do on my classic blogger but I can! Thanks Ramani =)

into GOSSIP said...

I keep getting this error message when I try to upload the new editted template:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "HEAD" must be terminated by the matching end-tag ""."

Paul A. said...

Thanks Ramani for the hack. Great site, I will be periodically checking it out. I was wondering if it's possible to remove the read more links on posts that are not summarized. I know the improved versions are controllable. But this one creates more page impressions.

Ramani said...

Paul,

Can you send me an email? I will reply with some modified code that I gave to somebody who had the same concern. If you test and it works, I will update this post.

Azizul Ameir said...

Ramani thanks for sharing. I've try it out and work like champ.

Lempuyangan [Crew] said...

Thx Ramani your code for expandable summaries is works for my beta blogger account. But the problem is this things is affect for all of my post,i don't wanna use the expandable summaries for all of my post, because not all of my post is long, some of them is just a short post

Can u give me a solution....???]

Thx Before

Ramani said...

Lempuyangan,

I came up with a version to do that. I will write about it in my next post.

Guillermo Acuña Muga said...

Ramani, I've used your code in my blog, but I keep getting the same error that I had with the old blogger, it happens when I open my blog on Internet Explorer. It only shows the first paragraph of the first post, no sidebar, no "read more" link.
If I use firefox, there are no problems, things wotks just fine.
Please help me because a lot of old folks only use IE and there's no way I will get them to change to firefox, I've already get them to read the blog and that was a big step, enough for me.
Thanks,

http://seremieconomiaviregion.blogspot.com

Ramani said...

Guillermo, I do see something similar to read more links in your blog in IE.

Raghavendra Prasad said...

Hi,

I made the code changes completely and things work if I type directly into the create post window. But I use Google Docs to compose my messages. Can I integrate it to appear in the expandable type option. If not what do I need to do in the Edit Post section to choose the summary and detail sections.

Raghu

Ramani said...

Raghavendra, I haven't tried google docs yet. Basically, you need to use the same span tags before and after the full post. Does it not work?

Adrian Syah said...

Hi, Ramani

I've tried it, and it worked. But there's a new problem. I figured that I should have could write my post in "Compose" mode (because of the complex-formatting), then doing some minor-edit in HTML mode using span class="fullpost" to enable "Read More" magic.

But now the "Compose" mode completely disappear from my dashboard. What's wrong?

Ramani said...

Adrian, that's really strange. Are you using the post template?

Ramani said...

Spicc, which blog has this problem?

Spicc said...

the blog is kezdoszolesz.blogspot. The widget is recent comments.

James said...

Thanks ramani, it's terrific.

Ramani said...

Spicc, I have sent you an email. Pls check.

Jim G said...

Thankyou very much for this hack - once I got past not reading everything properly it appears to work just dandy now :)

XShape said...

I like this old one
work great, Thanks

Chus said...

Hi everybody,

Big problem here. I do everything as you say, check the box above the template, add the red lines in their place... but when I try to save the template, the iexplorer window closes! And I lose the work!!!

Benin "Mwangi" said...

Thanks Guys! It works, I am really happy that I can cut down on the bulky appearance of my blog.

There is one question that I have for you. On the old posts that were there prior to me inserting this html-the "read more...." line appears below all of the text. How can I edit those posts, without losing the information that was there and still have the summary style posts?
Thanks again!

Ramani said...

Benin,

I came up with a different version of this hack with which you can selectively make old posts expandable.

Here it is.

Ramani said...

Chus, that's very strange. can you retry the same post, maybe remove some images or special things that you might have.

Chus said...

Useless. Everytime I make the most insignificant change in the "expanded" template, the explore window closes when I hit the Save button...

I had a youtube video in the sidebar, but I removed it to try the whole thing again... and the same result. :-(

My blog is
www.odioelmerengue.blogspot.com

Could be a problem with cookies?

Richard said...

This was a great help , thanks! , oh a tip for the others, you may need to check the little box Expand Widget Templates

Temujin said...

Works perfectly for me.

Thanks dude.

http://meandthecomputer.blogspot.com

dotter said...

Hey thanks for this entry. My question is what if you don't want the "read more" text to show up on EVERY post? Just the ones you break up?

Thanks again.

Ramani said...

dotter, did you not read update no.1?

dotter said...

whoops...I'm a moron...

Thanks again.

kersplebedeb said...

thanks for this - it seems to be working very nicely on my blog.

One question: is there an (easy) way to format the "Read More" link - i'd ideally like it right-aligned and bold so that it stands out more...

Connor said...

Brilliant! Works much better than the "official" Blogger hack, which stuffed up on my blog.

www.stirredherd.blogspot.com

TJ said...

Hi,

This is very nice hack, thank you. And very clear instructions also.

Techsplorer (Eagan, MN) said...

Thank you!

Thank you, thank you, thank you!!!

Brian Blank said...

If I would have read your post first, I could have saved about 3 HOURS of time!

This was done in 5 MINUTES!

Thanks,

Brian

rjramones said...

hola hacko! thanks for this chiko!

Groupster said...

well i couldnt get it to work it shows the readmore and when you click it it goes to the full post but on the front page it doesnt show any of the post

val duncan said...

Thank you thank you thank you...I can't believe I've found your help on this...I was so frustrated that I couldn't do the expandable post.

Albanian Times said...

Hi Ramani,

it seems that is only me that cannot expand the post, i have been trying this for weeks and never asked anyone, as i didn't want to be stupid. I do write long posts and this would be very helpful, but it doesn't wanna work in my blog! I keep getting: ***Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "*** even when i manage to save the template i try to post and it shows read more on the very top of the post but is still showing the whole post. Would you be able to tell where i might be going wrong?

Thank you soo much.

Email address serianlive@hotmail.com

sasieboy said...

Thanks for your tutorial, Blogger help doesn't work for me, but I'm so glad you have this post. Thanks again

nikki said...

thank you very much! I've always wanted to show summary on the first page since i write long blogs.

question though, can it be set to open a new window when clicking the read more link?

Lionel said...

Does your Sep. 12, 2006 expandable posts hack still work?

Just curious.

Wretched,

Me

Lionel said...

Can someone please help with this? I've got to move out in a few weeks and need to get some ad income in or I'm dead meat. Thanks

sumosalesman@aol.com

Ramani said...

Yes, this original hack should work fine.

Lionel said...

If anyone can help me get my blog set up the way it should be I'll have $50.00 PayPaled to them by this coming Thursday, 100% guaranteed.

Sana Lakhani said...

Hi,
This post really helped. I have done this now, and am writing summaries of previous posts.
Thanks for your help.
Visit me on
http://freestuffonly.blogspot.com
San