November 27, 2006

Selective Expandable posts

Translations by other bloggers: Chinese, Thai

Earlier, I had announced Peekaboo posts which shows post summaries in main page and expands them in the main page itself. But, some people would still like to use the classic way of expanding posts which takes the reader to the post page upon clicking "Read more" link. One of them asked me how to display the "read more" link only for some long posts and not others. I gave him a combination of peekaboo and non-peekaboo code that serves this purpose. As I started getting more such requests, I thought I will post the code for everyone who wants to use. Here's what you need to do.

1. Find the
</head>
tag in your template and add all the code from this page before it.

2. Find this div for the post-body and add the portion of code in red color.

<div class='post-body' expr:id='"post-" + data:post.id' >

<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>

<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

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


3. 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. (Please DON'T type these lines yourself because you might introduce some spaces that will break the functionality)

Type your summary here
<span id="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. Please note that you could also divide some or all of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

Note 1: If you are not able to find the lines to change, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.
Note 2: If you click "Older posts" link, the "Read more" link may appear even for the posts which you haven't divided into summary and full post. This is a known problem which we haven't solved yet.

I hope you will link to Hackosphere in your sidebar. That's the only thing I expect in return ;)

150 comments:

Anonymous said...

Ramani thanks for this solid hack (how can Blogger never added it?!?)

But i got a message when i past the code:

our template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Attribute name "post.id" associated with an element type "data:" must be followed by the ' = ' character.

Unknown said...

KCA, I had an extra space between data: and post.id by mistake. I have corrected it in the line that calls the checkFull() function. Can you correct it and retry it?

kameelah said...

this is a great hack but doesn't work for me. i followed all the steps, however when i put in the summary and full text instead of having the summary and read more function, all of the text is displayed. any ideas?

Unknown said...

Kameelah, I found some problems with my instructions. I have corrected this post fixing them. You have to make two changes. First, change the two places that uses .fullpost to #fullpost. Also, the post template in step 3 has changed. Please try again with these changes.

Unknown said...

KCA, you should also make the changes that I asked Kameelah to do.

kameelah said...

still a problem...i made those changes and the 'read more' shows up now, except the text isnt separated..the whole post is shown and the 'read more' is at the very end

huamulan said...

Thank you for this hack! It's just what I was looking for! ^^

~huamulan03

PS I credited you in my sidebar (the "support" section before the Blogger logo ^^)

Unknown said...

Kameelah, I got a chance to check your blog only now. Looks like it's working fine now. If it is not, let me know.

Anonymous said...

Hey, really thanks for the hack, I have use some of them with good results.
Now I have an answer for you: do you now how to put the log in buttons into the layout without going to blogger and then fill the form and go back to my blog? Maybe you can find a way to hack this!!
Thanks again
I´ll keep visiting this blog

frosty said...

Just as I was struggling with your original hack (which was great to begin with) in order to make "Read More..." display conditionally, I came across this post. All your instructions are feature rich and user friendly. Thank you very much for sharing this valuable tidbit with the community!

Paula M. Lawhon said...

Ramani - I have been using this hack (and the revised steps too). Although it seems to work fine, it has made formatting in each of my new posts crazy. Each time I create a new post, everything looks fine, so I publish. Then when I view it on the weblog, either all of my paragraph spaces have disappeared or my text is so miniaturized that I can't read it. I have to re-edit, remove all formatting and try again, which doesn't usually work until I've done this three or four times. Then, if I finally get it to work right but I later discover I want to change something in the post, I have to go through the same routine. Can you help please? Thank you!

LB said...

Grateful thanks from me too.
I have tried it when posting in my own language (Italian) about Expandable posts.
My post links yours, but Italian-only readers may wish to find an Italian translation of yor suggested procedure.
I could use a Google Docs page with a two column layout ... with your post in one column and my translation in the other one.
I may try this as an exercise in using Google Docs & Spreadsheets for multilingual collaboration ...
Will see :)

Unknown said...

Luigi, thanks for translating this. It helps in reaching a wider audience.

LB said...

My translation has been started in this Google docs draft, linked by my post.
It's an experimental bilingual doc linking your post, which should be kept in sync with any updates might crop up .. i have no idea of how this could be achieved .. RSS?
Should the use of Google docs turn out to be useful for multilingual hacks .. i could invite you to edit the English text when required and i woul then update the italian ... but that approach might become difficult to manage ... when hacks increase.
I noted that your notification of my previous comment's reply did not reach me ... may be because i have no email address in my profile ? .. I'm going to add it and ... i'll get a load od spam.
I look forward to try your "Author comment highlighting and notification" asap.
Ciao from Italy :)

Uffe H said...

Hallo Ramani,

Thanks' for the help thou I must have done something wrong, the line - expr:id='"post-" + data:post.id' > - appears at the top of every posts? How comes?

Unknown said...

Luigi, I haven't used google docs. so, can you keep it updated on my behalf. And yes, notification will work only if you have email address in profile.

Uffe, I don't see this happening now in your blog. Did you get it resolved?

Uffe H said...

That's because you probably look at the old one still running. I'm working besides with a dummy not yet published. Maybe I can send you a screenshot?

Unknown said...

Uffe, screenshot is not enough. I need to look at the template code of the blog which has the issue. Before sending it to me, can you recheck one more time if you applied the hack correctly?

FbL said...

I've been enjoying installing your hacks to my update, but I'm having trouble with this one. It's appearing in ALL posts, even the short ones. Do you have any tips for fixing it?

Anonymous said...

Hi Ramani,

How can we customize the css for the Read more link or adding an icone near this link?

Unknown said...

Ka, you can add the customization like follows in your css:
#showlink a {
color:#F00;
}

L. Marie Joseph said...

did everything verbatum as u said

when I click on "read more" my page is blank

what I'm doing wrong?

please help

Enrique said...

i always get an error when i open the page
how can i solve this

LB said...

I have been inserting the code required for older posts to become expandable; it worked fine until i came across a post which did not like my changes: after their insertion the post did not load and seemed to be looping ... no other modifications could made becaused the editor box went blank, both for writing in rich format and for HTML editing ... only Previewing worked and the post looked normal.
So, I deleted the old post and republished it as new ... taking advantage of the automatic insertion of your hack: i can now see the post expandable ... however, modifications are not allowed because the post editing box gets blank in this case as well ..
I understand this is a Beta Blogger bug ... it seems related with the use of some "image" .... "/image" code ... which worked fine before my attempt to make the post expandable ... but i have no clues about how to get around the blank post editor box problem ...
hope you can suggest something I might try.

Unknown said...

Luigi, if you remove the image does it work fine. If you can confirm what is causing the problem, I will see what I can do.

L. Marie Joseph said...

Thanks for helping me Ramani !!

Web Admin said...

ramani, it works great... see my blog at http://madriyanto.blogspot.com... tks

PhilaFoodie said...

Ramani:

I cannot thank you enough for publishing these instructions. I needed to publish a very long post today in expandable format, and thanks to you I accomplished that goal.

Abraham Lincoln once said that you should speak in such a way that the lowliest man can understand you. Well, sir, believe me when I tell you that, when it comes to CSS and blog codes, I am the lowliest man. And I understood your instructions. Thank you.

All my best,

PhilaFoodie

Unknown said...

PhilaFoodie,

I'm glad you could follow the instructions. Go ahead and pickup other hacks too.

masterymistery said...

Ramani, thank you. I spent 12 hours trying to figure it myself before finding your comment.

Works great, except for one tiny thing:

Under the heading of each post the following code appears:
expr:id='"post-" + data:post.id' >
How can I get rid of it?

Also, another question: How do I ensure that a particular post remains on the home page?

Unknown said...

SRS,

There's a right arrow between 'post-body' and expr:id in the template. remove it and it should go away.

For making a post sticky, you can follow the method described here

HaHa UK said...

Hiya, thanks for this excellent hack and simple explanation! Has made my life a heck of a lot easier.

Check it in action: http://hahauk.com

I have one problem though, if a post has either italic/underline/bold or hyperlinks in the body, the expandable option doesn't work and it still shows the whole post, any idea how to fix this problem?

Thanks a lot!

Unknown said...

UK, can you check if you are using the correct post template as shown in step 3? note that it is different from the one given by Blogger.

HaHa UK said...

Ramani: Yes, Im using the span=full post in the template. The reason it gets messed up is because when I bold/italic/underline something it also uses span=design etc, so it cancels the peekaboo script.

Unknown said...

It shouldn't matter because I am looking for the unique id of the span. If you tell me which particular post is having this problem, I will check.

HaHa UK said...

Ramani, this is the post that it doesn't work with:

http://hahuk.blogspot.com/2006/12/xbox-360-backward-compatibility-vga.html

Thanks

Matthew Pianalto said...

Thanks. This was exactly what I was looking for and easy enough to implement.

Anonymous said...

Thanks a lot! This is exactly what I've been looking for and it worked like a charm.

masterymistery said...

is there a way to post text content such that it cannot be copied or cut?

Unknown said...

srs, you can make it into an image maybe.

Blog Bloke said...

Hi Ramani. I'm the "One of them" who asked you how to display the read more link only for some long posts and not others.

Please accept my apologies for not getting back to you sooner. I got ill shortly after we talked and I only just remembered about this so I thought I would take it for a spin.

I'm happy to say that it works exactly as advertised right out of the box. Well done and thanks so much for coming through for me.

Cheers!

...BB

Unknown said...

BlogBloke,

I am happy it worked for you. I hope you recovered now from your illness.

Fenway said...

I need something like this for my blog as I have some very long entries

I have searched everywhere for the div tags and can not find them

I am using this template supplied by blogger
Blogger Template Style
Name: Harbor
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 24 Feb 2004
Updated by: Blogger Team


Thanks in advance

Fenway said...

disregard my previous post

however it seems to be working fine on new posts but I can't seem to edit my older ones

When I edit an old post nothing shows to allow me to divide

blog is http://www.charlieonthembta.blogspot.com

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. Please note that you could also divide some or all of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

Thanks

Ruth said...

Let me add my thanks to the many others taking advantage of this hack! It worked great for me.

masterymistery said...

Regarding Adsense, where is the best place to paste the code in the "choose a new page element" window? Is it:

"HTML/JavaScript
Add third-party functionality or other code to your blog."

or is it:

"AdSense
Display AdSense ads targeted to your blog."

What is the difference between the two?

Unknown said...

srs, I would suggest you to use Adsense page element though HTML element also worked fine for me.

Jonathan said...

Thank you Ramani for your help. It took a few attempts, but it seems to work. I do have one question:
What is the purpose or function of this first command we enter before the "head" tag?:

...script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js'...

Unknown said...

It is the javascript file that contains the definitions of functions used in this hack.

Benson Hines said...

I noticed that with the normal blogger hack as well as this one, Firefox doesn't get it - it places the "Read more" part in, but only at the end of the post. Any hope for me?

Hopeful Spirit said...

I COULD KISS YOU!!!

Unknown said...

College,

When I checked your blog in Firefox, Read more link seems to work find except for your latest post.

Taoknitter said...

Just wanted to say thanks. I know nothing and I finally figured it out with your help. I appreciate your time and expertise.

Ryo said...

This works only for me if i replace

id="fullpost"

with

class="fullpost"

in the postings.

Rick Itzkowich said...

Ramani,

Your instructions are easy to follow and the hack works perfectly with Firefox. Unfortunately it doesn't work nearly as well with IE - and since the vast majority of people coming to my blog still use IE, this is not a good thing.

What happens in IE is that the my 3rd column disappears and also the are are only 1-3 posts showing on the blog.

Suggestions? My blog is http://xtraordinaryliving.blogspot.com/

I have removed the hack for now until I can hopefully get some suggestions from you.

Thanking you in advance.

Rick

PS- You can contact me directly at rick@productivelearning.com

Unknown said...

Rick,

If you remove the hack, I can't understand what's happening.

Rick Itzkowich said...

Ramani,

Sorry about that. I thought that maybe you had other people who had had this problem before and that you were aware of it. I didn't want to include the hack and have by blog not be accessible to the people with IE.

Anyway, I have re-loaded the template with the hack in it. If you view it with IE you will see the problem. It works perfectly with Firefox.

Thanks.

Unknown said...

Rick,

You seem to be missing the /span tag at the end of your post template. I see only one /span tag which matches with your technorati tags span. You need another one that matches "span id=fullpost".

Rick Itzkowich said...

Ramani,

I've added the span tag and while better, I'm still having problems. The right column's content is still not showing.

Also at the footer, I have a sitemeter counter that you can't see and neither can you see the link to click on for older posts.

Thanks for your help.

Rick

Pulchritude said...

hello, id like to have that expand/collapse in the same page, i followed ur codes, but somehow i coudnt get it right. can you please look at my code, there must be something wrong in there. ty.

Cicolita said...

grazie mille Ramani con il tuo aiuto sono riuscita a migliorare il blog di un mio amico. (http://manageriando.blogspot.com/). mille grazie ciao da cicolita

Alchemist Sashi said...

I've added your mod to my blog, but the Javascript file is throwing errors. On page load it puts out three errors, all the same:

Error: post has no properties
Source File: http://www.anniyalogam.com/widgets/hackosphere.js
Line: 52

Then when you click on the link, instead of taking you to the full thing, it throws this error in my error console:

Error: post has no properties
Source File: http://www.anniyalogam.com/widgets/hackosphere.js
Line: 24

Not sure if I messed up somewhere, or if maybe there is something up with the JS file. Any help would be appreciated.

You can find my blog at http://the-shining-path.blogspot.com, and test it with the most recent post. If you need anything else, just tell me and I'll see what I can do.

သစၥာ | သ​စ္စာ said...

it is not working in IE and just working in FF. what should I change in your code to see in IE.Pls let me know and Thank you for your codes.

Ownaville said...

im HTML illiterite is there an easier way to add hacks

Unknown said...

Hi Ramani, first I'd like to congratulate and to say thank you for creating this. I have a little problem though. I've checked my template and I can't find the "div class='post-body'" tag. Instead, I found this

"b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'"


Any advices on how i go about it? Thanks a lot.

Unknown said...

I'm sorry, My Bad! I didn't check the Expand widgets checkbox. It's working like a charm now! Thank you Ramani.

သစၥာ | သ​စ္စာ said...

code did not work. it is any other way...?:(

Anonymous said...

Hi Rammi,

I have tried both your codes for this and am unable to get it. It says that the code is not formatted properly and as I don't know a great deal about it i wont touch it.

Gail

BowvyR said...

Thank you for your hack.
useful for member in thailand and me also. i try to transalate to thai about your post .

In this blog (Thai leanage)

http://siamblogspot.blogspot.com/2007/04/blog-post.html

Unknown said...

MeOmee, Thank you. That's a very nice post with illustrations.

M said...

hey, i tried it out and everything seemed to work (so no errors when saving it in the template) but when i tryed to post something it said:
"URL should end in a valid domain extension, such as .com or .net"
do you know what the problem is?

M said...

hey, i wrote a comment before.
now i just come back from work (and didnt change anything) - i posted something again and guess what - it worked!!! i dont know what was wrong but that means you can delete my comments (or better dont publish them).
anyway your page is great and i will definitely try out some more stuff from it. keep on your wonderful work!
thanks and greets.

Unknown said...

Makai,

I'm glad it worked for you. I published both your comments now.

ilker said...

Lovely hack! I'm using it in:

www.thethinkingblog.com

I will make a post soon with all the hacks I use on my blog with a link back here for the expandable posts! ;)

Benjamin Defoort said...

Hi ! Thanx for all your advices. I'm a complete beginner in html langage. I use the globber beta version for only a month and I wanted badly to make expandable posts

However, I tried your code but when I try to "preview" my blog I have some error messages:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>"."

Can you tell me what to do?

Thanx a lot

Sketch said...

I can't find this line:

"div class='post-body'...."

why?

Unknown said...

sketch, did you click on "expand widget templates"?

Yan said...

thanks for sharing this hack. it has been really helpful.

please do update us when you've solved the problem you've mentioned by the end of the entry.

thanks :D

KaBuhaYan said...

when i have tpyed the summary under "type your summary here". do i need to erase "type your summary here" afterwards?? and the same thing with "type rest of the post here"...

Unknown said...

Yes, please erase it.

Jodi said...

Ramani,
Thanks for posting all these hacks!
I am having the same error msg when I try to save template changes that Benjamin posted on April 29:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>"."

I did not see a reply from you posted anywhere.
Any suggestions?
Thanks,
jodi

Unknown said...

Jodi, can you check if you made the code changes correctly? For ex. check if you have two right arrows by mistake in the first line starting with div class='post-body'.

Jodi said...

The third time must have been the charm...it seems to be working now. I must have cut and pasted wrong...thanks again!

Guru said...

Hello there,
I have a question which is really important for me, before my blog gets bigger.
I am using your hack for about a month. Today I found this hack on blogger:
http://help.blogger.com/bin/answer.py?answer=42215&topic=8932
It seems that it is using your hack, but the question is "where is the .js file?"
What the .js file does? I tried the hack which is listed on blogger, and found it working, except i should change -a href="-data:post.url/-"- (changes < to - because blogger did not let me post it)Read more!-/a- to the one which you wrote on this site.
I downloaded the javascript but I could not really understand why it is important to use it when the hack will work without it. Can you please explain little bit more about the file, and please also tell me what is the advantages of using the hack with the way listed here and the way listed on blogger.
It is important for me, because blogger's hack seems cleaner and smaller than yours. I would of course go after the advantages, and not how big the script is.
Thank you in advance,
I appreciate it if you answer asap.
Mobilguru

Unknown said...

MobilGuru,

The reason I keep all my javascript in a .js file is so that I can incorporate bug fixes there and it will work in all the blogs using the hack. Otherwise, everybody has to change their template.

Difference between Blogger's hack and mine is that you can select which posts are expandable. With Blogger's hack, even single paragraph posts will have a Read more link.

Guru said...

Hello Ramani,
Thank you very much for your answer.
I appreciate your hard work and the answer to my question.
Have a nice weekend.
Regards,
Mobilguru

WoOm said...

hi guys, when I copy ramani's code " (quotes)turns to " soon as I save my template!

I try typing manually but did not help at all.

Albanian Times said...

Thank you, thank you, thank you, thank you, thank you. god bless you, i have tried soooooo many times and finally now works. i have been looking for this for weeks, and have tried so many times and got it working just when i was about to give up!! thanks again.
check it out
www.albaniantimes.blogspot.com

Nospheratt said...

Check this out, I think this guy (maybe) is stealing your work:

show post preview into home page with google blogger

Just a heads up, I could be wrong. If I'm wrong, just delete this comment, ok? Bye.

Unknown said...

yes, he IS stealing my work without any credits to me! I left a comment in his blog asking him not to plagiarize... thanks for informing :)

Julie Jacobson said...

this is wonderful, thank you!

Amanda Kennedy said...

Ramani, you are a star!
I've been trying variations of this hack all morning, but after copying and pasting your code from this post, it finally works a treat! Many of my posts are quite long, so being able to shorten them to summaries has really helped. Thank you so very very much for sharing this hack!

Съзерцател said...

Hi, Ramani,

I can't find this line:

"div class='post-body'...."

too.
maybe the problem is the template , I am not sure. My template is "Sand Dollar" of Webtalks.

mimz said...

Hi, Ramani. Sorry to bother you but I can't find "div class='post-body" ... I'm using the new blogger, the template style is Rounders.
Thanks.

Unknown said...

Mimz, did you click on "Expand Widget Templates"?

mimz said...

Oh, thanks. That was the problem.

And Is there any way to manually remove the extra "read more..." in posts where it's not needed?

iEn said...

confuse. is it different with peekaboo?

F1 Wolf said...

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 "b:includable" must be terminated by the matching end-tag "".

this is the message I am getting no matter how often I try ...

Sandra Rose said...
This comment has been removed by the author.
F1 Wolf said...

now you can disregard my previous comment. i changed the whole template and included your hack in it... works perfect... thanks

Tal Benisty said...

Thank you so much, I've spend an hour browsing the net, looking for exactly this!!!

Thanks,

Tal

Lyle Hopwood said...

Ramani, this hack stopped working on my blog today. It's been working fine for months. I didn't change anything to do with the template, so I wonder if your Javascript has changed? I will leave it 24 hours before I start changing things at my end.

The symptom is that posts that were not originally expandable are all now showing a "read more" at the bottom.

Unknown said...

Peromyscus,

Did you see the notice at the top of this page? If you read my lastest post and copy the script to your template, it will work again.

Pablo said...

nice!! thanks for your hard work. keep it up!

Qtheconqueror said...

Hey Ramani, Thanks for making such a great hack :D

Added you to my links. :D

sahdeV said...

Thanks for the code I was looking for. However, there's a small problem (I must have goofed up somewhere:().

1. Only titles of the posts are appearing on my blog and

2. there's no "Read More" option. "Read more" options are there on all posts when you click on them but not where they are supposed to be, i.e. the main blog.

3. There is no division of text into "summary" and "rest of the text"
e.g. On http://vedhaspandit.blogspot.com/2007/07/selective-expandable-posts.html
text before "But oops!" was summary and later part was "the rest".

Please help!!!!

AndjarAdji said...

Thanks man. You've been very helpful for other bloggers. Keep the good work man. Thanks again.

4ndj4r
http://4ndj4r.blogspot.com/

ps:
Link to this blog has been added in my blog. I will be grateful if you can linking back into my blog. Thanks

sahdeV said...

Hey did u forget to reply to that query???

Unknown said...

This hack works for so many people. Check again if you have followed the instructions. Unfortunately, I don't have time to check every blog that has problems.

LadyNoor said...

Hi Ramani, your hacks were recomended by Raquel. I love this expandable/peekaboo posts with fade effect. I applied to my blog and it seems like working well on the main page only. Even though I have edited and divided some of my old posts into summary and full posts, when I click on 'older posts' they appear to be back on full posts only, the peekaboo doesn't work. Is it fixable? I wonder if I made a mistake, but I have followed your steps carefully. I know you're very busy and have lots of fans who would probably ask the same things again and again, I'd really appreciate it if you would look at my problem. Thanks...

Unknown said...

NoorIntan,

As I had mentioned in the note 2, Older posts pages may not work well with this hack. This is because of the way they are implemented with ajax.

Anonymous said...

many thanks for this - it's exactly what I needed!!

Geeky Tai-Tai said...

Hi Ramani,

As you can tell, I've been trying to get this hack to work for a couple of days now due to errors on my part.

I just tried to edit a previous post in my blog, Americans in Singapore "OK, Maybe I'm Not So Smooth", but nothing has changed. No errors show up. Would you mind taking a look to see what I've done wrong?

I'd also like to do some sort of "Show/Hide" for my Blogroll. That sidebar is much too long and cluttered.

Thank you!

Geeky Tai-Tai said...

Hi Ramani, thanks for checking it out. I just looked at my template and the first codes are there. Maybe I pasted in the wrong place? I have them just before "head", but after Meta data. Should I paste it at the very top?

Unknown said...

Did I say step 1? Actually I meant step 2 code was missing. I wonder why.

Geeky Tai-Tai said...

Thank you for catching that. I think I've tried this too many times, and thought I had it in there.

After inserting step #2 and saving, I got this error message: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>"."

It must be that I've pasted step 2 incorrectly, but for the life of me, I cannot find the error. I really appreciate your help. I will keep trying. Thanks again!

Unknown said...

Diana,

Unfortunately I cannot fix that problem unless I have access to your account. If you are ok, you can send me your account details through email.

Abi said...

I couldn't find the div class for the post-body

Shaun said...

Hi Ramani!

I'm very excited to get this to work! I cut and pasted it into what I thought was the right spot, but I guess it wasn't. I got a could not be parsed error and then I thought I reverted back to the template before I added this, but now I can't preview my blog on the edit html page. Other functions of the page and blog seem to work. Do you have any ideas what I did wrong and what I need to do to fix it??

Thanks for any help that you can provide!

poosha said...

Dear Ramani,
How do I edit the older posts to include this feature...

Lionel Houde said...

Got it fixed! You are definitely getting a link to Hackosphere put up on my site (slmt.blogspot.com) :D (really messed up the template so I am doing a mirror that I can fix up).

Thank you!

Unknown said...

Lionel,

I am glad that you got it fixed. I was wondering why it wouldn't work.

Macharius said...

As Abi said, i can't find the div class for the post-body (i've checked "Expand Widget templates").

Marina Neira said...

Hey Ramani,

Thanks a lot! It took me over 2 hours but I managed to get this code to work. It was crucial for me to have it as I discuss manga on my blog and wanted a way to hide spoilers. Thanks. It really helps!

Marina

Dryat120 said...

Hello Ramani
Thank you for this hacks.

But I have a problem with automatic translation (Google and Babelfish).
Due to the span tag, beginning of list (ul) or table are not translated and ... empty. Very strange. Example
If I delete the span id="fullpost" code, translation works very well.

I noted that you use these translation links but not "Read more" link ... Is that for this reason?

http://drayt120.blogspot.com

Rian Writer said...

Hi Ramani,
Thanks for the hack and the work,
this is exacly what I was looking for!
:-)

Anonymous said...

WowWW!!! Great hack !!!
your article make me happy :)
Thanks!

-Flickzzz- said...

Thank you!
Opportunity to expand posts is the best thing my site has experienced, because my visitors don't have to scroll down a lot to see next post...
Thank you!

Flickzzz.com

Soulberry said...

Mr.Ramani, thank you for the selective Peek-a-boo hack.

I use it often on my blog - http://tcwj.blogspot.com.

Browsing around after I saw your fading peek-a-boo, ( I do not want to include that effect but noticed the "Summary Only" at the end of the post which I wished to include),I discovered this site - http://beautifulbeta.blogspot.com/2006/09/super-peek-boo-posts.html

So I went ahead and took that segment of code

""<span id='hidelink' style='display:none'>
<p>< a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>""

and added in the appropriate place on my blog. I presumed that the js file linked to in the coding is the same code you put up in your "Hacks broken again: here's the fix" post since the address referred to is the same.(I have it included in my template as you kindly suggested)

But it doesn't seem to work.

I am not a techie and learn along from such wonderful souls as you. My blogs are only as an extention to my hobbies.

Did I do right? Or is there something else I have to do to get the "Summary Only" added to my peek-a-boo code without the special effects?

I want to give an option of Summary Only to my readers in addition to Read More in the simple peek-a-boo format without the special effects.

Thank you Sir, for your time and attention.

Prash

Unknown said...

Soulberry,

Summary only is applicable only to the Peekaboo posts hack that expands in the main page itself. It's not compatible with this hack which takes you to the post page upon clicking "Read more". If you want that, you have to remove the changes for this hack and apply all the changes described in this post.

http://hackosphere.blogspot.com/2006/09/expandable-posts-with-peekaboo-view.html

Callil said...

Hi, I used this hack successfully but then it seems that the code is making something mess up in the latest fire fox, maybe you could check it out or give me advice. Here is a picture:

http://picasaweb.google.com/kwiwiiphotography/3bix/photo?authkey=LzdpEhkaBcE#5110652536470295010

LBIC said...

I don't know what else to say but I love you. I know, I'm "fast" but whatever, I've been trying to figure out how to do that for WEEKS.

Thank you, thank you, thank you, thank you!!!!!

אורי בורנשטיין-Ori Borenstein said...

Thank You Man

Buddy said...

I would like to use this code but "div class='post-body'" doesn't exist.

What i have instead is "div class='post-body entry-content'"

So how do i get around that? Obviously since this hack has been around, Blogger has changed some things.

imbroglioh said...

Ramani, i cant get this to work, i have the whole post published on the main page and then the "read on" link at the bottom. any thoughts?

thanks

imbrglioh.blogspot.com

Azulnauta said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>".


not working :(

MT Virdi said...

This Hack is Not Working with the Myinx Theme (Coverted by the JackBook from the Wordpress).. It Does Not Show the hack..

It is Working with Other Blog Template.

Please Help Me Out

Tiago J. Pavan said...

I would like to use this code but "div class='post-body'" doesn't exist.

Where I insert the code?

The template I'm using now is found in this address:

http://templatesparanovoblogger2.blogspot.com/2008/02/template-hades-ii.html

Thanks in advance.

satish said...

Hi Ramani,
This hack is not working in Safari.Read More is applied only for the first post.Only the summary is visible for other posts.
Can you check this?

Regards
Satish

Ken Wooi said...

This feature is great! I used it with no hassle when I changed my template. However, it was gone when I reverted to my old template, therefore I was lazy to add it again.

Anyway, it's great! Keep up!

Herman said...

It works for some new blogger template. Unfortunately, it hide the date of the post. Can explain me how to show the date?

Transmogrifier said...

This is awesome. I initially tried the instruction on Blogger itself. Those worked but I didn't like that the "Read More..." appears at the end of every post.

I tried both of your hacks and decided to go with the old school - read more takes to post page - hack.

Thank you for posting this.

satish said...

hi,
This is indeed a nice hack.It is not working on Safari.But I found now it is not working properly in firefox also.
Just look at http://bharathsms.blogspot.com/ or http://satishnavada.blogspot.com
You can observe that when I click the read more link for first post or any post in a page ,the last post is expanded.Is there any fix for this?

Regards
Satish
http://satishnavada.blogspot.com

THC said...

Thanks Ramani...

http://enviroinment.blogspot.com/

Work for me!

Unknown said...

Thank u ...it worked perfectly!
If u read carefull the instructions it's all easy.You 're linked in my blogs :D

Jing Jun Ma said...

Hey, my blog template does not seem to have post-body, what can I do?

Here's my blog:

http://life-of-a-new-york-city-asian-teen.blogspot.com/

Skid Vicious said...

i've seen other people ask about this hack in minima black template.

i can't find div class='post-body'. i've expanded widget templates and it still isn't there

any suggestions/solutions?

Unknown said...

I don't know why it is missing in minima template. It's usually present in all templates.

James Groven said...

I've been playing around with similar hacks for the last 24 hours and yours is by far the best. I can't wait to see what else you have.

Thank you for the elegant interface.

Joe Ross said...

A great hack. Thanks for the help and i dropped a link to you on m site.