September 16, 2006

Blogger hack: Expandable posts with Peekaboo view

Translations by other bloggers: Spanish, Indonesian, Chinese, Malaysian

Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!! I got some requests to do such a hack and I managed to get it working. Later, Hans improved it by adding a "Summary only" link with which you can collapse the post back to summary. Together, we also made the "Read more" link to show up only for the posts that have a summary. This is an amazing hack but you need to be careful while changing your template. If you are not familiar with HTML, I strongly suggest you to get help from somebody who knows HTML while applying this hack. Here are the steps to follow.

Step 0: Download and save your template so that you can go back to it if there is any problem with this hack (Important!)

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

Step 2: Find the includable called 'post'
and copy/paste the changes highlighted in red in this page (Be very careful and avoid mistakes. Note that the word "uncustomized-post-template" may not appear in your template but that's fine.). To find the includable, you could search for the term id='post'. If you are not able to find it, 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.

Step 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. It is important to make sure that the /span tag above is at the end of the post. To ensure this, use Edit Html tab instead of Compose tab while typing the post. After typing, you can go to compose mode and change fonts/colors etc. 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.

[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog - bvibes.com.
2. AJAX-driven fast template - Neo ]

Important notes:
Note 1: Please don't forget to add a link to Hackosphere in your sidebar. That's the only thing I am expecting in return :)
Note 2: If you would like some fade in/fade out special effect for this hack, you can have it by making the few changes described in this other post.
Note 3: If you would like the "Read more" link to take you to the post page instead of expanding in the main page itself, use this other hack.
Note 4: 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.

316 comments:

1 – 200 of 316   Newer›   Newest»
Raquel said...

Wow, thank you very much Ramani. This is what I've been waiting for.

I can't wait to apply all of your hacks since I can't switch to beta yet. All of your hacks are waiting...lol.

Ramani said...

oh really. Raquel, wait for Hackosphere templates then. I am planning to release some templates with all my hacks built-in.

Need a feedback from you. Would you like this kind of summary with peekaboo view in label/archive pages or would you like to hide the entire post?

DarkUFO said...

How do you do that "Sticky Note" at the top of the page. That looks very neat.

Vivek Sanghi said...

This is good stuff man! thanks for this gr8 hack. I will apply it asap and get back with feedback.

Shaun said...

I'm loving the expandable post view. Great for tons of content.. I'd love to roll that out into my site.. because I've got tons of scrolling now *sigh*

** Shaun **
My awesome blog: ohpunk.blogspot.com

-

Honey Cakes said...

When I followed the first set of instructions for the expandables, and I added the older code to my post template, there were arrows around "Type your summary here" so that when I clicked on 'create' those words didn't show up in 'Compose' mode.

I added the < ! -- to my new template code and the words don't show up anymore. (I had to seperate them for the comment to go through, it is think it is html.)

Bravery Onions said...

Ramani,

I am not using any of the "Read More..." hacks, because my posts are usually not very long. But, I think this hack would be better if there was some way to un-expand the post. Right now, if you want to make it just show the summary again, you have to press refresh in your browser.

Bravery Onions

Honey Cakes said...

I'm so ignorant, please disregard my last comment.

Hans said...

Hi Ramani, your excellent hack on peekaboo posts inspired me to make a peekaboo-post that can be expanded and collapsed again. See my post at Beautiful Beta.

This hack - and yours too I am afraid to say - also leads to a bug when clicking the Older Posts link at the bottom of the screen. I noticed this bug on my Blog, and on yours as well.
See my post on this bug. I checked it with two versions of the template: 1 with normal posts, and 1 with peekaboo-posts. Removing the peekaboo posts solves the bug.
I do not understand why this happens, as your code looks clean.

Ramani said...

Hans, thanks for reporting this issue. I will get it fixed soon.

Good work on collapsing the post back! When I tried collapsing back, I found that I suddenly end up in some other summary. But this may not be a big issue compared to the flexibility.

Ramani said...

darkufo, just add a new text element and move it above the Blog element.

Shaun, thanks. Please wait until I fix some problems reported on this hack.

Waz said...

bro
is there a hack that hides the navbar but shows it when the cursor is on top of it!?!
thanks for all the hacks!
really awesome stuffs!!!!!

Raquel said...

Hi Ramani, I like this one better. I am not going to use this hack though on my blog because my entries are not long but this is really good for my photoblog.

Sounds great you'll provide templates with your hacks in it. I just wish when you put all together the hacks, the layout will be light to download. You know, when we put a lot of effects on our layout the page is heavy to download.

Good luck Ramani, I really appreciate for sharing your ideas to everybody.

Kate said...

Sweeeet. Just added the sticky note feature to my blog!

Ramani said...

waz, yes i managed to get the hovering navbar working. Avatar is planning to announce it in Bloggeratto. Let me check with him.

Hoctro said...

Ramani,

About the problem with the hack, I don't think it's from your hack. Back about 2 weeks ago, I experienced the same thing w/ one of my longer text post. I couldn't go to that post at all without going in with the archived list.

Anyway, I think this is a great hack. I install it on my test site and it works great.

A question. In lieu of the newfound JavaScript treasure from one of your post, I was thinking about using the String.substr() command to chop off, say 300 chars to show the viewer a taste of the post, and then do the read more. This way bloggers whom have lots of posts don't have to go back to every one of his/her posts and modify. What do you think. Could you write/hack sth like that? That'll be great.

Avatar said...

I see everything ramani, so, yeah it will be posted this week, stay tuned.

Ramani said...

Hoctro, I did think about using substr but remember there could be some html in the post and if they are not handled properly, things might look really wierd. So, I thought its better the author decides about the summary.

Ramani said...

Thanks Avatar.

Ramani said...

Hoctro, yes i also realized that the bug has nothing to do with my hack.

Waz said...

thanks Ramani! :)
but i think i got it figured out as well...
let us know when u fix the bug with expandable posts!

Hoctro said...

Ramani,

You're right on about the html tags! I didn't even think about it, and it's true. Deep thinking there, man.

I'll install this hack on my offcial one today, I tested yesterday on another one and it works so cool!

Many thanks,

Ankit Sud said...

Excellent Blog , No wonder you were Featured , But i was a little bit apprehensive about switching to beta, but your blog has opened my eyes , Rock On

Hans said...

Hi Ramani, I tried to think up a trick to remove the 'Read more...' link when a user doesn't use the fullpost-div in his post.

This is what I came up with.
If the fullpost div is used, your javascript-variable fullpost[0].id will contain the value "fullpost", and otherwise it is empty.

If it is empty, there is no "fullpost"-div, only the 'read more' div, and its display-style should be set to 'none'.

So I wrote a js-function checkFullPost, that tests for fullpost-div, and acts accordingly.
This js-function is called from the widget using the call <script "text/javascript">checkFullPost("post-"+data:post.id)</script>

However, this does not work, the function seemed not to be called at all.

I guess this is a case of insufficient java-knowledge with me, so could you help me with this coding please?

Thx,
Hans

Ramani said...

Hans, I will check it out today evening and reply to you. Your idea sounds nice!

Hans said...

Ramani, I dug a little deeper into it, and it seems that my problem is passing the post-id to the function. It is something like "post-" followed by the data:post.id, but I can't pass it succesfully to the function when it is not in an onclick-expression.

If you could help me with that, I think I can figure it out.

extinction!! said...

Great blog man...i have implemented most of the hacks that you created. I havent thank you before because my english kinda sucks but i always read you and your help its awesome.

Keep up the good work ^^

Ps: Is there a way to replace the comments style to a new one with ajax? (like in some templates of wordpress[like k2]and the older blogger)

extinction!! said...

I added a "mini" hack to change the cursor in the blog but its in spanish....maybe you can retype it here in your blog for the u.s readers ^^

Cyber-Buff said...

sorry, it shows some probs! pls check it again!

Ramani said...

cyber-buff, what kind of problem? did you try the hack?

Ramani said...

cyber-buff,

looks like you have gone ahead and applied the hack already. (did you not see my warning at the top?) I have changed the code to fix a problem. If you apply the new version, it will work.

tomh said...

can anyone re-program this for the COMMENT function?I'd really like to use the old PEEK-A-BOO comment hack on the beta version!

Ramani said...

Tom, Stephen
is working on it.

Debra said...

Ramani,

Thank you. I have instituted almost all of your hacks and am very happy with the results. I love the Peekaboo styles and my only request would be the ability to collapse the post on the main page after reading it. I really like the plus/minus thing. It helps those readers who aren't good at logic.

I don't get enough comments, but the ability to see them on the main page would be nice. I use Cooliris previews (FF ext.)so I don't have to go to another page, but if you move your mouse the wrong way the page is gone and you have to start all over again.

Thanks for all the great work, I started out looking for a three column template and you showed me how to do it. Thank goodness I can plug and play. :)

Waz said...

hi Ramani,
thanks for the update!!!! :)

Ramani said...

I'm glad you like my hacks, Debra. Would you like to have +/- instead of "read more..." link in main page?

Debra said...

Ramani,

That would be great. I like the read more, but would also like to be able to shrink back to small without refreshing.

Once again, thanks for all your work, you are making me look good.

Ramani said...

Debra, Hans is working on collapsing back. I will announce it once he is done.

Debra said...

Implemented SuperPeekaBoo and it seems to be operational, now if I could have one teensy little thing she asks sheepishly. A plus or minus sign just like on the label pages? It would make everything match and it might encourage the lazy to click.

Thanks for all the work, you know there is always one person who just has to push it. :)

Ramani said...

So, where will the +/- appear after expanding? below the post or to the side?

Ramani said...

Debra, actually I thought about +/- before, but I thought it's not a good idea in the main page since we are showing post summary (unlike label pages). Reader may not notice the +/- (more so if it appears to the left side of the title) and incorrectly think that there is nothing more to read.

Ririan said...

I have a problem, after introducing this improved hack, on my archive pahe or label page every post is open and +/- don't work. had to change back to the old hack

Ramani said...

Ririan, this really shouldn't have anything to do with label pages because that is controlled by a different includable. Both work fine in my blog. can you check whether you made the changes at the right place?

Angelo said...

When I input the code in my post
<span id="fullpost">
</span>

it seems not working when I alreay have a lot of </span> in the HTML,

Ramani said...

Angelo,

it should work even if there are lot of spans because i have given the unique id "fullpost". Can you check if you made the changes correctly?

Angelo said...

I think I find the mistake with the code when I change the word's color.
for example:
I cnahge the color to ABCE
the HTML become <span style="color: rgb(255, 0, 0);">ABCD </span>
If I put the <span id="fullpost"> before it,some words disappear between the <span id="fullpost"> and first </span> but others display.

Anonymous said...

hi ramani. I'm a newbie and i'm learning all by myself. I applied your latest posts on the sidebar hack andi just loved it. But i have difficulty trying this one. i can't seem to decide where to put the codes. I am using the dots dark template. Please advise me on this. Thanks and keep it up!

Pixelle said...

Okay,this just totally rocks!! You are the god! I loved this and it worked perfectly first time out. I so wish you were the instructor in my debugging class...you apparently can get the point across!

Manang said...

You are heaven-sent! You rock! I have made the 3-column and the peekaboo hacks, and they work wonderfully! I love the expandable posts where the full posts appear on the same page, then reverts back to summary without affecting the rest, and then it also applies to the labels as well! Keep 'em coming!

Ramani said...

Thank you Pixelle and Manang.

Karma said...

Hi, I used your code to make my "blogger in beta" posts expandable. I just followed the instructions as given on http://hackosphere.blogspot.com/2006/09/expandable-posts-with-peekaboo-view.html
It kind of dint work properly then I discovered that there is this little error or maybe not error , but I had to tweak this portion of the code to make it work for me :)

I have included the screenshots of the code that I tweaked here
http://iagenerd.blogspot.com/2006/10/fix-for-expandable-posts-on-blogger-in.html

Cuauhtémoc Amox said...

Hi Ramani

Based on this hack I've managed to get a feature to have multi-language content in as post, as I need it in a blog. By now I'm only using it on post pages, as I need a merge with peak-a-boo for the multi-post pages. You can view an example here:
http://amox-blogger.blogspot.com/2006/10/post-in-translation-yo-hablo-espaol-de.html
It's still in beta as I need a wider audience to validate. Also, still translating implementation to english.

Anonymous said...

i have added this hack to my blog but i didn't get how to edit the older posts and make summaries for them

Ramani said...

Nice work, Amox.

Anonymous, is there any problem in following step 3?

True Life said...

I installed the hack on my blog, but nothing happens when I click the Read More link. Can you help?

Ramani said...

True life,

did you divide the post into summary and rest of the post as I explained in step 3?

True Life said...

Yeah, I did everything from the first to the last point. I don't know what's wrong.

I installed the PeekABoo for Label/Archive too and that one worked fine, but later when I tried to make the first PeekABoo hack right, I couldn't upload the xml anymore because he said in the id: Blog1 are at least to incluadables with the id: PeekABooPost but there can only be one. So I edited both hacks out again and redid the one for the main page (so this one) but still doesn't work.

Ramani said...

True Life,

I am not able to figure out what's going wrong from your explanation. All these hacks work for so many people, so it must be a small mistake somewhere. Can you retry again taking care to make the right changes?

Alice said...

Hi. Do you know that this guy is giving away templates filled with your hacks? This peek a boo post being one of them.

http://allblogtemplates.blogspot.com/2006/10/download-free-fully-customizable-beta.html

Alice said...

See this forum post about it if you want to.

http://groups.google.com/group/blogger-help-share/browse_thread/thread/29a1fa4194eae4e0/#

Ramani said...

Alice, Nope, I didn't know until you told me. He is distributing my Hacked Minima template with a different name. What a shameless moron! My code was totally free. I would have been happy if he just had a link to my blog as the source.

Ramani said...

Alice, did he steal stuff from you too? hah, what a crappy fellow.

Alice said...

He stole some css from me and added it to his amazingly ugly, and by the way doesn't even work, template.

I think he's a giant disgusting scumbag.

I am right now writing up some papers to send to google to hopefully get this removed. It has to be sent snail mail...

The decent thing to do is link to other people's work, not steal it.

Tony Parrish47 said...

Hi, i am sure that the peekaboo posts are really good. but they are just not working for me. how can i remove the code from the template and what do i put back in its place, just to get straightforward posts? i might come back to peekaboo eventually but foir the moment i would like to concentrate on other things... can you help me get back to simple posts?

Ramani said...

Tony, did you not save the template (my step 0) before starting? This is why I had mentioned that specifically.

paul g. mattiuzzi, ph.d. said...

Ramani:

I wanted to let you know that I have implemented your three column hack, and also your pop-up code.

Simply elegant! Worked like a charm.

Thank you.

I have some requests for additional code/features ... will be in touch soon.

paul.

politischer said...

Thanks. Like it. See.

Frank said...

Hi there,

when I copy your hack then my template gives the following notice
"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 copied it excactly like yours, so I don+t know what I am doing wrong?

paul g. mattiuzzi, ph.d. said...

Ramani:

As much as I think the peekaboo feature is really cool, I am somewhat disconcerted by the way the screen jumps when you collapse the post. It is a a little bit jarring and requires the reader to have to reorient a bit.

Also, I have noticed that the contextually based adsense ads and links can change when you go to the permalink, if the content of the post is different than the content on the homepage. And having them change seems to be a good thing.

So I'm thinking it would be nice if the "read more..." button would retrieve the permalink, rather than expanding the post ... and it would be nice if the read more offered a choice of either the same window or a new window.

In other words: "Read more ... in this window (permalink) or in a new window (permalink)"

And then, rather than having the "collapse" button, it would be good to have a "close window" button if it's a new window or "return" button if it's the same window.

I know this might be a lot to ask of you, but if you could provide the code it would be greatly appreciated.

Thanks. paul.

Ramani said...

Paul,

My original post about expandable posts actually does what you are asking for. Check this post.

Opening in new window is a possible improvement. But one can always right-click any link and choose "Open in new window" in any browser.

paul g. mattiuzzi, ph.d. said...

Ramani:

Thanks! I replaced the peekaboo with your earlier hack.

It's getting closer to what I want.

You can see it here: http://everydaypsychology.blogspot.com/

You were right about using a right click for a new window, but I use a one button mouse, which means that you can't do it and drink coffee at the same time ... takes two hands.

I tried spacing out the words, but couldn't get the "ammpersand nbsp semi-colon" to stick. Could you tell me how?

Also, I know this must be basic, but is there any way I can add a "back" button and/or a "close window" button to the permalink page?

Thanks again.

paul.

Ramani said...

Paul,

Any ampersand should be replaced with "&" for the Beta template to accept it. Back and close buttons usually apply to browser and not to page. But, it would be useful to have to it somewhere in the blog too.

gcooke said...

Ramani,

Thanks for all your tips. I tried this hack in a test blog and it worked fine.

I backed up my real blog's template (thanks for the suggestion) and then tried the hack, but it did not work.

The language is a bit different in my template. It reads:


div class='post'


Is there something I am missing?

So, for example, there is no "uncustomized" langauge in my template.

Thanks, gcooke

Ramani said...

gcooke,

That shouldn't make any difference. I think something else is not correct. Can you recheck if you applied all the red portions of code at right places?

Jeremy Seminoff said...

Hi Ramani. I really like this hack. Thank you. I'm getting some strange behavior though. Everything works as expected on my main page but when I click "Older Posts" at the bottom of the main page, the older posts have the "Read More" link whether there is more to read or not. Did I do something wrong?

Ramani said...

Jeremy, that's a known issue. Looks like it happens because of the way Older posts feature works. We haven't yet figured out a solution.

Chicken Feed said...

Thank you so much! This is just what I needed.

Jeremy Seminoff said...

Thank you for the quick response, Ramani. For the time being, I put all my posts on the main page. (It's not so long now that I have most of the posts collapsed.)

Adam said...

Many, many heartfelt thanks for this wonderful hack!

Tim said...

I've lost track of how many of your hacks I've used. It looks great, thanks!

Iknownotwhattodo said...

truly a great hack site, but I have a couple of "duh" type questions:
I thought I had implimented the peekaboo posts on a three column hacked beta templete and there is no evidence of them. Is it only new ones that a peekabooed. Second, I have been doing this all in Firefox but just checked my blog on safri and horror of horrors, its totally screwed. Label cloud, layout all gone pantward. Anywork work arounds for my mac friends? I love the three column thang and all the other hacks. Just don't want to piss off a proportion of viewers.

Ramani said...

Yes, you have to go back and add the post template lines to your old posts.

mm.. Safari.. haven't gone on one. i mean i haven't used a mac so far. so, i am not sure if I can help you there. I wonder why it should not work in Safari when it is all standard compliant code.

Chip Maxwell said...

I'm a trained ape with this technology, but your code has allowed me to have expandable posts again. Question about links. I often put links to other URLs in my posts. When I return to my blog from those links, I am returned to a seemingly random place on the main page of my blog, not the place where I was when I left. Is there a code to bring me back to where I was, or a code to open the linked URL in a new window/page so that I can click back to the original page and resume where I left off in my blog? Thanks in advance.

guarachon63 & friends said...

Maestro:

I am using the "minima" template and I'll be darned if I can find the word "includable" anywhere in the html, even copied into MS word and searched . So I'm stumped.

Thanks for your help!

Ramani said...

Are you using a Beta template or classic template?

guarachon63 & friends said...

beta template, sorry, should have specified...

Jeremy said...

Guarachon, Did you check the "Expand Widget Templates" box at the top of the page? You need to do that.

webweaver said...

Awesome! Thanks heaps for this great hack Ramani! It works perfectly. I tested it on my Mac in Firefox, Safari, Netscape and opera and it works just fine in all of them. Ditto for IE7, IE6 and IE5.5 on a PC.

I've blogged about this hack, it's so good, (I just switched over to beta today) and I'll be linking to this site from my blogroll.

Yaaay! More! More!

Ramani said...

Thank you Webweaver for testing it in so many browsers!

Kerux said...

These expandable posts look great. Tu for the hacks, but I can't find the lines in my code and I can't list them here because the "Tag is not allowed." I have the "Expand widget templates" on.

What am I missing?

Thanks so much

guarachon63 & friends said...

Thanks Jeremy. No I didn't have that done. I did it and now it works fine. Did I miss that in the instructions somewhere?

I am going back through old posts and it works fine in some but not in others. I must be doing somethign wrong, I will keep working on it.

Ramani said...

guarachon,

I have that instruction as a sticky note at the top of my blog because I don't want to repeat it for each post. Thanks Jeremy for helping out. Regarding Older posts page, you might see "read more" links even for those posts without summary. It's a known issue which we haven't solved yet.

Ramani said...

Kerux,

It should definitely be there. search for the term "id='post'"

Kerux said...

I found "id='post'" no prob, but it's followed by

"div class='post'
a expr:name='data:post.id'/

not "div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'"

as in your example.

What's up with that?

Thanks.

Ramani said...

Kerux,

That's ok. Just add
expr:id='"post-" + data:post.id'"
and the rest of the code in red.

blonde said...

Ramani,

Awesome work. This is a great hack. One of many you have developed. Thanks very much.

Kerux said...

Ramani, you state:

"Please note that you could also divide some or all of your old posts into summary and full post by editing them."

What meaneth, 'by editing them?"

By inserting

Type your summary here
"span id="fullpost"
Type rest of the post here
/span"?

Tyou so much. I'm almost there, I think.

K

Kerux said...

Not sure if my prev comment made it in or not. My question is what do you mean by editing posts to get peekaboo /summary post?

Edit HTML? or the post?

Tu, I'm getting closer.

Ramani said...

Kerux, you're right. Just edit the post to insert those lines which mark the full post.

Kerux said...

I too, like another poster, have nothing happen when I click on

Read more..

Anybody ever figure out why?

Closer every hour...

Jesse, Eryn, Ian, and Benjamin said...

Thanks Ramani! I've been trying to figure this out for a long time and Beta was making it tough...but you solved the riddle! Kudos!

Cam said...

I can't find id=post on the "edit template" html in beta blogger? Am I looking in the wrong place? Where can I find it?

Ramani said...

Cam, did you click "expand widget templates"? see the sticky note at the top.

ben c. said...

Ramani, this worked for me. I've been searching for this kind of hack for a month now. Thank you very much! Here's where I used your hack: http://macswitched.blogspot.com

Kerux said...

Nothing happens when I click on Read more...

Any ideas anyone?

thanks

Ramani said...

Kerux, it's almost always some minor error while copying. Can you try redoing the steps? If you have already done so, tell me which blog has the problem. I will look at it later.

Midnighter said...

hi, I've been trying to get this peekaboo posts thing working. I know i have the code right, because I actually downloaded the template from you. The problem I am having is I don't see where to post and cut it up. In the blogger beta posting interface nothing has changed, and I don't know of any code to include.
http://comicopia.blogspot.com

Ramani said...

Midnighter, you have to follow the code in step 3 explained in this post to divide up your old posts ie. one line with span tag before the start of the fullpost and one at the end.

frantic said...

Hello, I've been messing around with various post expanding hacks, and you have some nice ones here. I'm actually currently using the simple one from the official Blogger hacks site, however I was wondering if anyone knows of a hack that would do the following: I would like a button that expands/collapses ALL posts when clicked. Thx for the help...

Kerux said...

I've spent quite a bit of time trying to fix my problem. I think it must stem from the difference in the code - mine says this:

"div class='post'
a expr:name='data:post.id'/

and not this: "div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'"

Could that be the problem?

TU.

Ramani said...

Kerux,

That expr:id... is something that you have to add. I sent you an email to your gmail address. check it.

Kerux said...

I just checked and it works and is absolutely beautiful.

Now I can start on the next hacks....

Can't thank you enough.

K

Anonymous said...

Hello, thank you for a relly nice piece of code. It works, but one prob though: When I have a longer piece of text in the summary bit, the "read more..." -link moves down from the summary text, way below it, leaving an awkward empty space in between.. It's fine when expanded, but not when collapsed.. I have a text in 2 languages, and I use this code to have one language as the summary bit and another language as the full text bit. So the two texts are equally long, and quite long they are.. Anyway, does anyone have a fix for that? Thank you in advance!

cntry said...

hello, im a newbie and switched to beta already. i copied the codes, and it works good only that the first time the page loads, i have full post display and "read more" below. but the next steps are ok. how will it be done so that it shows only my summary? ty.

Ramani said...

cntry, when you added expr:id ... did you leave a space before that?

cntry said...

yes i left a space before that (after template'). something must be wrong somewhere in my codes. can you pls look at it? cntry.blogspot.com.. ty.

Ramani said...

cntry, change the line which says
.fullpost {display:none}
to
#fullpost {display:none}
It should work then.

cntry said...

YES!! It works now!
thank you so much ramani,
youre brilliant!
great!

ispf said...

Thanks for the hacks !

I have incorporated the expand/collapse code in my blog. Is there some way to list the posts in a reverse-chronological order when the label is clicked ? TIA

oromulo said...

Hi Ramani! Will this work with images only insted o text?? (Sorry my ignorance!!)

romulo

Ramani said...

Oromulo, If there's no text, do you mean, you will have some images in the summary and some others in full post? It should work that way too.

anaspirant said...

OMG! At nmolinaropost.blogspot.com, this worked marvellously. I applied your hack according to your instructions and I am very pleased with the results. My readers (both of them) have much greater flexiblility to toggle between summary and full post. Thanks so much.

hy said...

Thanks! I used your hack, it's great!

Fables said...

this is great. i know pretty much nothing on html but i took my time and closely followed your directions and it worked. i was wondering if you have any html to create a side menu down the side where i can divide my blog into different topics. does that make sense?

Ramani said...

Fables, actually its not clear to me what you are asking. can you explain?

Ramanathan said...

Ramani, you rock man!! You and Hans are so good in technical and teaching as well. Rock guys!!

oromulo said...

Ramani
Thanks for your site and tutorials, just great!! Though I have been desperate to use your hack in my template….can’t seem to find a way…So:
Is this the bit of code in my template where I should apply the code you’r giving??
‘cause if not I have no idea where !!

div class="entry" id="post-<$BlogItemNumber$>">
h3 class="entry-header"><$BlogItemTitle$>../h3

div class="entry-content"
div class="entry-body"


p<$BlogItemBody$>/p

p class="entry-footer"

Ramani said...

Thanks Ramanathan.

Oromulo, you seem to be referring to some old Blogger template. This hack will only work with Beta template. If you need it for non-Beta blog, check out this post.

http://beautifulbeta.blogspot.com/2006/09/non-beta-super-peek-boo-posts.html

oromulo said...

Thanks Ramani I 've just try the non-Beta hack from Hans,work just
fine!
Do you know if there is a way to prevent people from copying images posted in a blog ?!
Thanks very much for your work and dedication!

romulo

John Figth said...

Hi Ramani,

great blog, great blog - just discovered it today (thru gg groups), and I believe u'll be getting the whole beta.blogger coming over :-)
So many comments, congratulations (am getting lost though)...

I tried to put your displayed hack - haven't tried it yet on the new posts, but for the older ones it does not seem to work out (there is no even "read more" button appearing) - any idea why and how I could make it up ?

Your former hack (summary) works great - the problem is ppl would not intuitively know to click on the title to expand the post.

Thanks for these codes though,
Best,
John

One Who Webs Weirdly said...

Ramani,

Thanks for the outstanding hack!

A question: Is there a relatively simple way to text-format just the "Read more" and "Back to summary" links -- specifically, I'd like to bold and right-justify them, while leaving the body of the post as is.

Ramani said...

John, thanks for your kind words. yes, everyone in the Beta world is welcome :). I will look into your blog. I need some time though.

Amy said...

Worked great! You rock. Thanks.

John said...

I am currently using the old expandable hack. When I tried inputtin the new hack, it didn't work because the old way to call the function was span class="fullpost" and the new one is span id="fullpost". Is there any way to change the code somehow so that it will work, so I don't have to change each individual post.

John Figth said...

Hey Ramani,

Thanks for your kind help. Actually, I think I managed to find a solution today (if it was not from your side).
The problem seemed to lye in the html code of the message.
it is all about closing "div" tags for the summary (usually font wise) and opening ones for the main text (font wise as well).

Thanks again - will now have a look to the banners things (seems interesting) - put as well the 3 columns thing on my main blog (Rounder template) (capitalrisque.blogspot.com))

Eager to read your next hack,
best,
John

Ramani said...

John,

Unfortunately, you have to use the new way to get it working with this hack. There's no other way.

Ramani said...

John Figth,

Good that you got it working. Can you write a post about how you got 3 column Rounders working (all the details that you gave in your big comment)? If you do so, I will link to your post so that my other readers can follow your instructions.

Jared said...

The hack works beautifully! Thanks a million!

Olivier Leroy said...

Thanks, Ramani. This works great!

I hacked into your hack to make "Read more..." appear on the last line of the body of the post, not after a paragraph break. I think it's prettier. You can see for yourself here:

http://olivierzyx.blogspot.com/

John Figth said...

sure !
thanks !
will send you an email, as soon it is done...
Best,

John

Alain said...

Hi,

Cool and useful hacks your Peekaboo posts in label/archive pages and Peekaboo posts with summary in main page.

I would like to take advantage of these features for my blogs in the making and I’d like to know more about their potentials and limits.

I'm a new beta Blogger. It's my first experience with managing a blog. I'm presently exploring your Peekaboo features (and others) on this French blog with the Minima Strech template http://bancdessai.blogspot.com called Banc d’Essai d’Alain [Sorry for the French, I’m French Canadian and I just thought; “ If I can make the feature works in French first, I won’t have any problem to do it in English after!” The basic seems to works just fine when I apply a unique font and/or a single format to all the post content [ex. Essais 3-9, 13 and some more], but I don't seem to be able to format the different parts of single post the way I was able to do before. Weird things keep happening like:
1) Texts and images integrated in the «Read more...» portion only are also shown in the «Summary only...» portion [ex. Essai Image 14];
2) Titles, subtitles and subtexts in other font are not displayed properly, [Essais 10- 12];
3) Email form integrated in the «Read more…» portion is also shown in the «Summary only...» portion [ex Essai 18];
4) and more…

My specific needs that I’m trying to satisfy.

For me it is important to be able to format my posts. As part of my blog project, I’m planning to publish a long post each month. Each long post is going to be like a kind of book chapter on a single column [in English and in French on separated blogs]. I would like to have a small summary section of a few lines like what is possible with your «Summary only…» portion and a main text development section that would be displayed with titles, subtitles in different fonts and formats of texts, images, links, etc…
I don’t seem to be able to do all these things with your Peekaboo posts with summary in main page feature.
I can’t figure out if I don’t understand how works your Peakaboo feature or if your hack is just not appropriate for my needs? Can you help me to clarify the situation please? Am I trying to push the potential and limits of your feature to far?

Thank you!

PS. I have read some of the 140 comments or so on this topic but I didn’t read them all to fin a potential answer to my concerns.

John Figth said...

done (quite tricky in order to post html or JavaScript code).
you can view it on
http://capitalrisque.blogspot.com/2006/12/3-columns-layout-for-beta-blogger.html

Best,
John

PS : if you want, you can delete my former long comment (feel free)

Alain said...

Hi again!

C’est merveilleux! The Peekaboo posts with summary in main page can be edited and formatted in many creative ways.

I’m not exactly sure why the Peakaboo posts with summary in main page wasn’t working properly when I sent my previous comment entitled “Can I edit and/or format the texts and images in a post when taking advantage of your Peekaboo posts with summary in main page?”. I don’t know what I didn’t understand or what I did wrong but after a few intuitive experiments now everything seems to work perfectly well for my needs. The flexibility of editing and/or formatting the images, the texts, links, email form, etc... in different parts of a unique post seems to be the same as in the original version of my template.
I still have some minor adjustments to figure out like how to present more of my posts in the same page for peek-a-booing by increasing the max-results, but so far the general displayed posts are just totally amazing. I will definitely try to integrate the Peekaboo view features to my main blogs.

Thank You!

I can’t wait to try your other hacked features like the Author comment highlighting and notification for example but now I need a break. I just can’t concentrate anymore.

I’m in awe in front of your ingenuity!

When I will have finished creating and testing my hacked Minima Stretch Template with your Peakaboo hacked features and some others on my Test Blog, will there be a way to simply transfer this hacked template to my other main blogs that are already using the Minima Stretch Template without having to go through all the delicate steps of integrating your hacked codes one by one to all my blogs? If a template transfer is possible, will it affect the other features already installed in the section “Template » Page elements” that I have integrated to my main blogs in the making (for example List links, Site Meter button, PayPal button, Bravenet webring navbar, Hackosphere drop-down menus, Beautiful Beta search engine, and so on)?

A warm "Merci!" from a new Hackosphere member

Alain said...

Hi Ramani,

Thanks for the hacks and the clarification about the best way to implement them in my main blogs.
Thanks for the links on your website. They have opened me to a fascinating world.

PS: I have given the URL of a Test Blog in my pervious comment. Just want to say that I may delete this Test Blog at anytime.

Alain Cloutier

Kerux said...

Ramani,

As much as I don't want to be here, I'm back because I opened a new Minima 3 column blog and tried to install your great peekaboo expandable hack thinking it would be a snap because I did it once already, but alas, it is not to be as the existing code is different. Same problem you helped me with last time. Won't expand with a click on Read More...

Can you help? Please.......

Ramani said...

Kerux,

Looks like you haven't added the change in red that starts with expr:id. Can you check again? If you follow the instructions exactly, it does work. Also, don't use compose mode but instead Edit HTML mode while creating new post.

Kerux said...

It was, I guess, the omission of the

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

Duh.

Thanks again.

death_metal said...

Hi, thanks for this hack. I find it useful. Unfortunately, my site is full of old style "expandable" post from Blogger and with Blogger Beta, they came up with an updated article: http://help.blogger.com/bin/answer.py?answer=42215&topic=8932

However, I can't seem to complete it becaus as soon as I hit "save template, I am getting an error that the "a href" must not have the "<" character (but the I just copied/paste codes). I tried to use < but it doesn't seem to help. Can you asist?

I like the Peekaboo hack, it's just that all my other postings uses the "span class" instead of "span id"

I'd appreciate it if you can help me get around the "a href" not allowing the "<" char, or if there's a way I can use my "span class" instead of "span id".

I am sorry if I sound dumb, I am not so technical with web stuff.

Escaper said...

Hi Ramani,

When i add flash files (swf) to see only on post pages by using your method, they weren't seen on main pages, that is good but i hear flash's sounds, when i refresh the pages. How can i do flash files not working on main pages (homepage, label pages, archive pages).

Sory for my poor English, but hope you understand me;)

Thanks.

Amy said...

I'm so excited to use this... thanks for this! But, *every* time I try to do it, I get 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 "/>"."

Any ideas? I'm just copying and pasting, so I'm not deleting any code like that...

Thanks for your help!!

oromulo said...

Hi Ramani
Can you tell me if this bit of code is from beta or non-beta??
thx
-- START POST


div class="divlog"



div class="titlepost"
div class="datepost"> BlogDateHeader <$BlogDateHeaderDate$> ../div
<$BlogItemTitle$>../div


div clas="text"><$BlogItemBody$>../div


 

Ramani said...

Oromulo,

That code is for non-beta. anytime, you see something starting with $Blog.. its for non-beta.

oromulo said...

Thanks Ramani!
I tried over and over but ..…do not seem to work!! Can you help me on this and tell me were it goes the id="<$BlogItemNumber$>1"> in this bit of code??


-- START POST


div class="divlog"



div class="titlepost"
div class="datepost"> BlogDateHeader <$BlogDateHeaderDate$> ../div
<$BlogItemTitle$>../div


div clas="text"><$BlogItemBody$>../div

Ferran Garriga said...

Hi, I like to use your resume post hack but I'm using Blogger Beta [now not beta] and I can't find id='post' word and not anything else similary. Only tags with .post ...

Thanks !

Ramani said...

death_metal,

You need to replace the left arrow with &lt; and right arrow with &gt;

Ramani said...

Escaper, I really don't have much experience with flash. so, I don't have an answer.

Oromulo, are you using Hans' peekaboo hack for non-beta? Looks like you got it working already.

Don't Call Me Ishmael said...

THANK YOU....

I have been struggling with this for the past week... your instructions saved my sanity. Thanks again.

Sherry said...

Ramani,
A big thank you from me also. I wrote a post to pass the information on for others to use. You made the instructions very clear and simple to use.

yeti said...

Thanx guys, your instructions have been invaluable. Keep up the marvelous work!

a boy said...

i did a find for id='post' in my template/html and it was unable to find anything. please help!

vjack said...

The hack seems to work well except that the Technorati Link Count Widget doesn't want to work with it. Any ideas?

Alan said...

beautiful...i tried following instructions from a few other sites with no luck...since I'm not the best with HTML and such. You made it simple and easy. Love it. Thanks

admirim said...

It's not working for my blog.

Alice said...

FYI, this person is giving away templates with your hacks already added. Do they have your permission to distribute your work?

http://web-messengers.blogspot.com/2006/12/3-column-minima-templates-modded-for.html

Ramani said...

Thanks for the info, Alice. But it's ok to distribute templates with my hacks.

Gregg Scott GWEGGY said...

Like Amy previous, using the Minima Black template I am repeatedly getting the 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 "/>"."

I am copying and pasting accurately and have tried it a number of times.

Any thoughts? Can you help??

Gregg
www.GWEGGY.com

Ramani said...

Gregg, this hack works for so many people. So, it's probably a copy/paste mistake only. I know you have tried many times. I will see if I can find the problem.

Gregg Scott www.GWEGGY.com said...

Thanks Ramani. I am thinking that it may be unique to Minima Black template.

Gregg

Ramani said...

Gregg,

When you added the portion of code starting with expr:id, did you make sure that the right arrow remains at the end of that line?

srs said...

At the bottom of each post I get "Hotlinks: DiggIt! Del.icio.us" but I don't know how they got there. I also don't know a) what a hotlink is; b) what purpose they serve; why those two particular hotlinks appear; c)how to get rid of them; d) should I get rid of them?

Ramani said...

Srs, are you using my hacked template? They all have that feature. Digg and Delicious are famous social bookmarking websites. If somebody likes your posts, they can use these links to add your post to those websites. so, it's useful.

Gregg Scott www.GWEGGY.com said...

Yes I did. I did it according to your instructions a number of times.

I am using Minima Dark.

I will try it with a different browser and see. I think I was using Camino or Safari.

That my make a difference. In the meantime, if you had a blog with that template perhaps you could try it.

I would be compelled to make a PayPal donation if you got it working!

Gregg

julie williams said...

You're a genius, its people like you who make a difference and take the effort out of me trying to work around the huge transition from old blogger to new. Your "how to" is very clear. Good stuff

Ramani said...

Julie, thanks for your kind words.

Gregg, the main portion of code is the same for all templates, I thought. let me check.

Ramani said...

Gregg,

I created a blog with Minima Dark and got this hack working there. Please check this test blog. I think you are removing a "/div" tag while copying the code. Every div tag should have a matching /div tag. By the way, I don't expect any donation for using my hacks. I am happy about sharing what I created.

archiwei said...

Where can I put those code?...I can't find includable id='post' in template. I looked trough 3 times. Thanks

Atunu said...

umm.. Hi Ramani, I think my question is a bit out of context, but here goes. I've made the switch to blogger beta, but still retain the old way of editing templates and stuff. I still use blogger's orginal "Post Summery Hack" that deals with the "fullpost" span class and etc. But I've never managed to successfully use this trick to hide my entire post in firefox; to tell the truth, the blogger hack doesn't work on firefox for me. I can always see the full post even if I try to hide it with the fullpost span class. But the strange thing is that this hack 'does' work with IE and Opera. Is this an old bug? Can you take a look at my template and say if I'm missing something?

my blog: http://atunu.blogspot.com

Ramani said...

Archiwei, did you select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.

Atunu, I don't know much about old template. It maybe a bug.

quiproquo said...

Hi Ramani!
First of all, I'd like to thank you for your useful tips...

Then: do you think it could be possible to have a read more link that links directly to the permalink of the post, instead of having a simple hiding of the rest of the article?

Thanks a lot!

Ramani said...

Yes, check my other post titled "Selective expandable posts".

The.Digital.Life said...

my template doesnt seem to have an includable post

Veronica Thomas said...

I have tried literally for HOURS to get this working. However, my skills just aren't up to speed and I have no idea how to get this right. Would anyone be able to give me a tip as to how to install this on my particular blog? I need to know the total baby steps. Any advice would be greatly appreciated.

Ramani said...

Veronica,

What's the exact problem you are facing? Does Blogger show some error when you save the changes?

beto said...

Hi, thanks for this excellent hack.
I was able to install it, however I think I may have found a small bug.
It works perfectly on the blog homepage, however pages with older posts show the 'read more' at the bottom for every post and not only the ones tagged with [span id="fullpost"]. I am really clueless as to why this happens.
Check out the problem here: http://volutabro.blogspot.com/
Click the 'Anterior' link at the right to see that all posts have the problem.
Thanks for your help.

Ramani said...

Yes, this is a known issue. see Update No.2.

audacious said...

when i'm ready to convert my old blog that i used the common method with ( span class="fullpost" /span ) ect.
will your peekaboo convert my older posts? if not any ideas on how to convert older posts?

Ramani said...

Audacious,

No, old posts will not be converted automatically. You have manually edit all old posts to use span id="fullpost" instead of span class="fullpost".

audacious said...

thanks for the info ...
btw, good resource page

Ian Angus said...

First I must warn you that I'm very new at blogging, so I may be doing something totally stupid.

I have been trying to add your Peek-A-Boo view feature to my brand new blog at http://climateandcapitalism.blogspot.com/

The page looks right when the code is added -- "Read More" appears at it should. But I get "Error on Page" and the Expandable post doesn't expand. Help much appreciated.

Jenni said...

Hi Ramani,

I applied this hack before I changed my template and it worked beautifully. The hack is working fine in my new template, but there is a huge space under the first post (regardless of what the first post is) that wasn't there until I applied this hack. Any advice?

Thanks

Ramani said...

Ian,

Looks like you have switched to the non-peekaboo version. are you settled with that?

buttascotch said...

id='post' is not in the code when I edit HTML in the template tab on blogger beta. However, when I 'view' 'code' through the browser I see it. I tried to copy and paste that code and I get the error:

We were unable to save your template
Please correct the error below, and submit your template again.
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 "Variable" must be terminated by the matching end-tag "".

Please help, thanks in advance.

Elsie said...

Hi Ramani,

I applied your hack to my new blog and I just love the way the post opens up when I click on the peekaboo link. Cool!!

I am looking for a "print this page" code as a reader complained that she cannot copy and paste recipes. I do not have any right click option disabled on this blog, so maybe I should give them the option to only print a specific post/recipe and not the whole webpage as so often happen when you use the print options in the toolbars or in the File menu.

Where can I find a code like that? Would appreciate it if you can help me on this one.

Thanks
PS-Love your blog and all the links to other info.

Ian Angus said...

Hi Ramani:
Thank you for checking my site. Yes I settled on the non-Peekaboo version, but it was a complex process for me.

First I tried to implement the solution described in Blogger Help, but it didn't work -- I got repeated "XML Error" messages.

So i searched the wb for information and found your site. Tried to implement your instructions and got a different set of error messages. So I wrote the comment you received on Wednesday.

While waiting for your reply, I went back to the Blogger instructions and tried again. Same error messages. So I went through the blogger-recommended code line by line, trying variations. After 10 or so tries, I found the error in the code Blogger recommended and fixed it. I don't know whether their code is wrong for all cases, or only for the template i'm using.

Anyway, it's working for me now and I'll stay with it -- at least until I decide whether to switch to Neo, which looks fantastic!

Thanks again

choice said...

Got stuck on Step 2 but saw your Update 1 and managed to get it working on my site. Very helpful hack. Thanks a million Ramani.

Rick Itzkowich said...

Ramani,

I tried your hack and it worked great with Firefox. However when viewed with ID, the content on my right hand column - I'm using the 3-column Scribe template - disappears. My blog URL is http://xtraordinaryliving.blogspot.com/

I had to remove the hack but would like to put it back on if there is a solution to this problem. Suggestions?

Ps you can contact me directly if you prefer at rick@productivelearning.com

Ivan Huynh said...

Hi thanks for this post but i am having problems with this. My template does not appear to have the text you are talking about in your second step can you please take a look at my template by downloading his link.
http://d.turboupload.com/d/1497436/template1.txt.html
Thankyou so much for your help

Jenni said...

I found my mistake, somehow I duplicated the code. Thanks for a great hack!

Chris said...

I implemement your code, which is working fine, except that the exapndable portion appears as a large white space with lines (mini text?) after the summary and before the "Read more" text.

Chris

The Goat said...

Much love to you. Great addition.

«Oldest ‹Older   1 – 200 of 316   Newer› Newest»