September 8, 2006

Peek-A-Boo view of posts in label/archive pages

Building upon my earlier hacks for label/archive pages, here is a hack that significantly improves visitor experience. The idea is to show only post titles to start with but also provide a [+/-] toggler for each post. If the visitor clicks the toggler, "Peek-a-boo", (s)he sees the post contents also. He/she can select the posts for peek-a-boo view and read many posts without ever leaving the page. You could present all your posts in the same page for peek-a-booing by increasing the max-results.

Here's an image showing one post expanded and two other collapsed. Note that [+/-] toggler is used for both expanding and collapsing.



Would you like Peek-A-Boo in your blog? Then, search for the term "blog-posts" in your template to find the portion of code shown here in black and insert the lines highlighted in red at appropriate places.

Once you save the changes, you will be able to expand/collapse posts in label/archive pages. It works for the search results page also. Ain't it cool? Have a good weekend!

102 comments:

Avatar said...

great stuff Ramani. as always.

about peek-a-boo:

yeah, he used it too, but Blogger had it before that too.

Raquel said...

Wow, this is really cool. Nice one Ramani!

Ririan said...

i just included it in my blog, it looks and feels great :) thank you

phydeaux3 said...

Another nice one! I had been thinking along similar lines, so I'm glad you've already done the hard work. :-) Good job.

Raquel said...

Hi Ramani, thank you very much.

It works on both browser (IE and firefox). But we have a small problem though in IE. When you see at the left bottom of the page, I can see an error. I don't know if some of my JS installed will be affected with this error.

Please check this test blog in IE. Thanks again.

anniebluesky said...

I'm having problems with this hack. First I had to change:
<script type='text/javascript'src='http://www.anniyalogam.com/widgets/hackosphere.js' />

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

in order for the editor to accept it.

But, the [+/-] does not work for me :-(

Ramani said...

I'm glad that you all like it.

Annie, there should be a space before the 'src' like this.

type='text/javascript' src

I fixed it in the post. once you do this change, it will work for you.

Ramani said...

Raquel, thanks. This IE always expects a (0) after javascript:void. I fixed it. Pick up the code again from here and the error should go away.

Ramani said...

phydeaux3, great hackers think alike, hah :)))

anniebluesky said...

What a difference one little space makes. It is working like a charm. I love it! Thanks!

Vivek Sanghi said...

Good stuff Ramani. This will make the search and label pages look even better, while adding a good functionality as reader do not have to click on the post title and wait for the page to load and then read the article. Congrats on producing another gr8 hack and thanks!

Do check my blog. I have added some good link in my latest post and also used frames in the sidebar. Let me know any suggestions? I also added a cool js based drop down for RSS bookmarks. thus saving lot of space in my sidebar.

Caylynn said...

Works wonderfully. :) Thank you so much. :) I'm so happy I found your site - great job. :D

Ramani said...

Caylynn, Vivek, thank you. The lesser a visitor has to navigate between pages, the more he stays in your blog.

zerotopic said...

It's great, how about Peek-a-boo comment for Blogger beta, is it possible?

Steve said...

Ramani this is great.

Would it be possible to the change the [+/-] bit to a a grapic like the standard windows expand and collapse icons?

Also is it possible to change the [+/-] to either + or - depending on the state of the toggle?

Raquel said...

Ramani,

It's done...woooowtwoooowt. Looking forward for the upcoming hacks.

Keep up the good works Ramani!

Raquel

Jane said...

I was hoping for something like this. Will you be able or willing to add the function of only showing the first paragraph or so of the post and a link to 'Read More'?

Some of the posts I have are court documents, and they are soo long.

I really appreciate you and the other blog hackers jumping on the beta and making it present in the way that people like to read.

I thought I was going to have to wait a time for hacks, but the community was right on it.

It has made my life and my reader's lives so much easier. I'll get a link up my blog back to yours asap.

Ramani said...

Zerotopic, peekaboo comments in main page is not straight forward in Blogger Beta. I don't want to enter that area because Stephen (who originally implemented it) might be working on it.

Steve, I tried to do what you want. But there were technical issues that I couldn't resolve. will try later when I get time.

Ramani said...

Jane, I am happy that my hacks are making a difference for you!

Yes, expandable post summaries (the one you are talking about) can be achieved with a slight variation of this hack. I will work on it next since I had other people also ask for it before.

loup.dargent said...

Another improvement to my beta blog thanks to you! Great work! :)

Loup

'Forward-and-Share'

Coltrane Jenkins said...

Great post. Thanks for all the hard work in putting this together and sharing.

Ramani said...

Thanks coltrane. I believe in sharing.

indy said...

Works great! thanks Ramani

Jessi said...

so im trying to do the peek-a-boo for labels (clever name there) so i followed the instructions and went to go do the first portion of the hack, and after changing this code on my blog, nothing happened? I'm not clear on what the first step is, if you could help me out a bit?

Thanks so much! You rock!!

Ramani said...

Jessi, did you first make the changes described in my previous hack to show only post titles?

jessi said...

I tried, clicked preview, and tried the label drop down, and it didnt change it to only titles?

hmmm..

Ramani said...

jessi, what's your blog?

jessi said...

http://jessi-otherwise-engaged.blogspot.com

its a work in progress! LOL!

whats driving me crazy the most, is i cant find where to changed the text from black?

thanks a million Ramani!

Ramani said...

Jessi, I will get back to you with different (simpler) instructions soon, since you haven't installed my previous hacks. It will be helpful for others also.

jessi said...

dont go out of your way for me! the previous hack didnt work for me, but it could have very well been a user error, im going to try it again when i get home this evening.

again, thanks so much!

Jessi said...

Ramani!! I got it! I was doing it wrong, user error!

You rock! thanks so much! :)

Thomas said...

Hello Ramani,

I tried your "Peek-A-Boo" for my post and I'm afraid it isn't working out very well. Could you help me with it?

Here is my blog:

http://tommyatkins5.blogspot.com/

Any help you can give me will be wonderful!

Thanks,

Tommy

Ramani said...

Thomas, I have a modified set of instructions for people like you who haven't picked up my earlier hack. Please re-read this post and try again.

Paula M. Lawhon said...

I tried to do this one, but it's not working. It results in each blog entry showing up twice under the same title. I keep going back to follow both sets of instructions. For some reason, the codes are not staying where I put them even after saving. My brain hurts. Can you help?
http://sfmediation.blogspot.com

Ramani said...

Paula, it might be a minor error. If you send me your template through email (rarunach@gmail.com), I will check what's happening.

Seiche said...

Ramani,

This is exactly the hack I want for my blog. The problem is, I have not been able to get it to work after 3 days of trying.

Granted, I'm on a pretty steep learning curve with HTML, but I'm learning.

Now, before I attempted this particular hack, I (somewhat) successfully installed phydeaux3's hack for a label cloud. Now, when trying this Peel-A-Boo hack I get an error message stating that Blog1 has multiple widget id's named PeekABoo.

Any idea what's going on? This thing has been driving me nuts all weekend.

Seiche
http://half-guard-pass.blogspot.com

Ramani said...

Seiche,

I just checked your blog and peekaboo seems to work fine in label pages. is there any other problem?

Seiche said...

Ramani,

I had an epiphany early this morning, gave it another shot, and everything works as it should.

And I just want to thank you for all the time and effort you and everybody else invlolved have put into this. Thanks again.

LOUI$$ said...

sorry guys,when i put on those codes,i follow ramani instruction,but all my content disappear.any can help me?do i make any mistake?

LOUI$$ said...

thanks 1st to you,romani,for sharing this thing.but now i m stuck,all my content gone when i put in the codes!only content gone!!!please help me!!!!

Minimicadee said...

Hi Ramani,

I really appreciate your work in doing the blog hacks! I've been trying for days !!!! to make expandable posts and the include several in the main page. I followed some of the help on Blogger Help but to no avail (too many I lost count). Yours was the only one that worked! I attribute that to your very clearcut, concise, simple instructions! Thank you very much!

Ramani said...

Loui$$, if you had saved the previous version of template, revert back to it and see if it works. otherwise, report to Blogger support.

Ramani said...

minimicadee, i'm glad i could help you there.

louislim2 said...

Ramani,i already fix it,it work great man!thanks,and about the sidebar at ur blog....may you teach me?^^

Ramani said...

Yes, I will. Louis. Just wait for me.

Refr. said...

can't like it anymore, thanks!

Skanky Jane said...

Thank you Ramani - you are my hero hacker!

SJ xx

http://skankyjane.blogspot.com/

Anonymous said...

Great hacks!

I may have missed it on another one of your posts but is there a way to apply the peek-a-boo to all of my posts?

Ramani said...

Anonymous, yes, check the post titled "Expandable posts with peekaboo view".

protesto said...

Hi ramani,

Thanks for this hack. I've have a problem with it. It show peekaboo posts, when I click older posts link on the main page. I want to show peekoboo post only in archive and label pages. I would be glad, if you can check it : instant-messengers.blogspot.com
Thanks again.

Ramani said...

Protesto, I will get back on this soon.

Diario de un burgense said...

Hi Ramani,

I have implemented this hack into my blog but...

It is possible to change "[+/-]" to an image icon or other text?

Ramani said...

Diario,

yes, you can replace it with any text or image (using img tag).

protesto said...

Ramani,

Could you find an explanition to my problem? I'm seeing peekaboo posts when I click to older page link on the main page.

Thanks again.

Ramani said...

Protesto, As per the code that I have given for this hack, it is supposed to work that way. If you don't want it in older posts page, I have to come up with a different hack.

protesto said...

Thanks for the reply Ramani. But, you're using the same hack on your page and your older post pages are not showing peekaboo posts.

Raven said...

Hi. i did the hack where only the post titles are displayed and it worked great, but it changed the first page to titles only also. i was wondering if there is a way to keep all my articles in full content on the first page, but when someone clicked on the labels or categories it would just come up as titles only. Hope that makes sense.

Ramani said...

Raven, I'm surprised why it affected the main page. This hack is not supposed to affect main page (as you can see in my blog).

Raven said...

Thanks for the reply. I will give it a try again and see what happens.

Raven said...

Works great!!! don't know what went wrong the first time, but i am good to go now, is just what i was looking for. Thanks :)

1977 said...

What should I do to apply this hack to my main page also? I don't want summaries, read more and all that. Just the +/- functionality.

David said...

I've trying a long time to get it i just can't....can i e mail you my template i think I'm missing something...
thank you!

PurpleMoggy said...

Nice hack, thanks :)

Ben C. said...

Ramani, Thanks again for sharing the hacks. I have implemented a few on my blog including the peek-a-boo for labels and archives which was built into the Minima template on your site.

There are a few things I'd like to correct and wonder if the fix is out there already?

1. When I navigate away from an expanded peek-a-boo post within the same window and return to the page using the left arrow the view of the page is different. Sometimes it will show the collapsed version and not the expanded view.

2. Also the pencil for quick editing doesn't appear when I use the archives to access a previous post.

Thanks again!

Ben C.

Ramani said...

Ben, these are the behaviors caused by this hack. I don't think I can tweak it further. If you don't like these behavior, you can reconsider using this.

Ben C. said...

Thanks for the quick reply. I'll resolve the problem with #1 by using target="_blank" for all links and #2 is resolved by going straight to the dashboard.

Thanks again!

Eric Shawn said...

There is no "blog-posts" term nor any of the text shown in black in my classic Blogger template... nor any others I have viewed source on. I'm stuck right on step 2... where do I insert the red code?

Ramani said...

Eric,

This hack is only for the new template. For classic template hacks, check out the label called "non-beta hacks".

Ed said...

Hi,

When I use your hack, when I go to the label/archive pages it only displays the posts and nothing underneath - no listing of comments, no place to post comments, no label areas, etc.

I've disabled it for now on my blog (http://edofthefu.blogspot.com), but is this supposed to happen or did I mess up somewhere?

Ramani said...

Ed, that's expected. Peekaboo is only for the posts. For posting comments, you have to goto the post page.

Alex said...

Ramani,

i try to put the codes of the hackosphere.js file in the template directly,
because 'http://www.anniyalogam.com/widgets/hackosphere.js'  is always blocked in our country(China),and i can't find a stable place to store it.

i just open the hackosphere.js file using Notepad,and copy the whole codes, paste them between 
<script type='text/javascript'> and </script>,just like below:

------------------
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

function showFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}


function hideFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'none';
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == "fullpost")
                 found = 1;
             if ((spans[i].id == "showlink") && (found == 0))
                 spans[i].style.display = 'none';
        }
}

function commentDisplay(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
    alturl = alturl.replace("#", "#comment-");

    if (entry.content) {
      comment = entry.content.$t;
      var re = /<\S[^>]*>/g; 
      comment = comment.replace(re, ""); 
      document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
      if (comment.length < numchars)
         document.write(comment + '<br/><br/>');
      else
         document.write(comment.substring(0, numchars) + '...<br/><br/>');
   }
  }
  document.write('<span style="font-size:80%">Widget by: <a href="http://hackosphere.blogspot.com">Hackosphere</a></span>');
}

 </script>

---------------
then put the whole codes in the <head> tag.


but when i try to save the template,an error message showed that:

"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 content of elements must consist of well-formed character data or markup."

what's the matter?
Please do help me to find the reason, Ramani.just because i like this hack so much.

Ramani said...

Alex,

when you do so, you have to replace all left arrows with &lt; and right arrows with &gt;

Ramani said...

Also alex, for this hack, you only need the toggleIt function. Other functions are for other hacks.

witnwisdumb said...

This is a great hack (as are all your others). I've been trying to get Blogger's Hierarchy Archives widget to work within a POST, so that I can create an "Archives Page" of sorts. This is mainly because I do not like how the hierarchical post listing takes up so much space on my sidebar and makes it long. But I would love to have all my posts listed on a page, but it's cumbersome to do it manually. I was wondering if you might be able to help me with this. Your assistance would be greatly appreciated! Thanks for all the great hacks. Keep hacking!

Shrish said...

Ramani, Is it possible to get a 'Hierarchy' view in 'Labels' widget just as one gets in 'Archives' widget.

Ramani said...

Shrish,

It's difficult because labels don't have a built-in hierarchy.

Rachel Michaela aka Stylebites said...

Hi Ramani. Thank you so much for your hacks. Without them my site would still be lurking in the old "template" form.

You can see the 1.0 version of the new Stylebites here: http://stylebites.blogspot.com/

My only wish for a future hack would be to see the footer options (comments, trackback, etc.) under the posts in the archive peekaboo view. I bet this is something you or Hans have in the works, no?

Again thanks!

Ramani said...

Thank you Rachel. Looks like you have used many hacks. As far as footer options are considered, I don't have plans to add it because it required lot of code duplication.

True Life said...

Is there a way to use it only on the label pages and leave the archive in accordance with the main page?

And some fine tweaking would be cool. If you look at my blog:
http://truelife200iv.blogspot.com/search/label/Ibaadah?max-results=100

The spaces between the date header and the post titles below are too big and the spaces between post titles of the same date too. I would rather like to see everything closer with the exception with a nice space above every date header and at very bottom a little space would be nice, too. Or even better I want the usual navigation at the bottom back... just in case I step over the 100 items limit.

If this was possible, it would be a great help.

Ramani said...

True life,

It's something to do with the template CSS. Can you try changing the settings for .post-title?

True Life said...

Thanks. Not only could I know fix that, but as well notch the design of my post headings up a little to my likings and go even further away from the usual thisawaygreen layout.

Jeremy said...

another great one! thanks so much.

Maeven said...

Dear Ramani,

I added it thinking it was something else, that it would do something else, but to my surprise it does something that I didn't even know that I wanted (until I saw it in action).

This is an elegant hack. Thank you.

I'm left, however, with my original "want," and that is a way to turn my "labels"-list (see left sidebar here - for example, several of the labels would or could expandORcollapse under a broader label) into an expandable/collapsible, like my archives-list.

Have you run across anything like that?

P.S. Your instructions are superb.

Ramani said...

Thank you Maeven. If you are asking some kind of sub-labels, I am not
aware of any hack like that. But, if you want a better space usage for
labels, you can try Phydeaux3's label clouds or my drop-down labels
hack.

Maeven said...

if you want a better space usage for
labels, you can try Phydeaux3's label clouds or my drop-down labels hack.


I have other (and bigger) plans for your drop-down labels hack. I really like what you did, but I haven't fully conceptualized how and where they will be implemented.

Phydeaux3's label clouds, while charming, are not quite the organizational tool I'm hoping for from a 'label-hack.' I'm actually looking to do this, but (I guess) in widget form?

This xml/widgets switchover on Blogger has really thrown me for a loop. I took a couple of classes in html, xhtml, css, just so I could design and manage my own sites. I'd hoped to have had them up and running by now - I didn't plan on Blogger switching "languages" on me.

Oh well, enough of my whining.

Thank you again - you've been a great help.

Patti O'Driscoll said...

I just added the script and code for this hack ... double checked it and even triple checked it, but it doesn't seem to work on the blog I'm tweaking (www.herbodriscoll.com). It looks like a great hack. Sure wish I could get it to work.

Ramani said...

Patti, looks like it's working for you now. did you fix it?

kishor said...

ramani this hack is not working.

kishor said...

in your code you said look for
div id='blog-posts'

where as in my blog it is

div class='blog-posts'

Online Wealth Administry said...

Yes Kishor is correct. this is not working.

Ramani said...

kishor, I will check this tonight.

kishor said...

ramani i know u r busy with bvibes.com, but still if you can help to get this hack work properly.

Ramani said...

kishor,

are you using neo? this used to work perfectly with Blogger's templates.

kishor said...

No ramani am not using neo. Check this
http://milllllan.blogspot.com/

all the post will will be seen.
Now in 'Blogarchieeve' click '2007' or 'June'

Ramani said...

Yeah, what's the problem? If I click on +/-, it works fine in firefox.

Caylynn said...

Ramani, any chance of getting the code for this posted again? I'm wanting to implement this in a new blog, and no longer have the code I need to modify. Thanks so much. :)

Mohit Kumar said...

Hi Ramani, i am using Tekka 3 column template and i'd like to use +/- peek a boo on my labels page but the link from where u asked us to copy the code is not available, its sending me 404 error, saying url no more exist

Ramani said...

Mohit,

I have updated the instruction. Please try again.

Phil said...

Hi, great stuff and just what I need for the main page. Is there a way to implement this on the main page?

Hiến Hà said...

Thank you Ramani for the hack. I implemented it on my blog according to the instructions but when I click on the post title my post is shown on a new page instead of the main page. See URL http://hbtrung.blogspot.com/2007_04_01_archive.html.

Hien Ha

festiva said...

Hi Ramani,

I did exactly as your layout but received this error message
"The widget with id "Blog1" cannot contain element: "script". A widget can only contain b:includable elements."

Please advice.

festiva

Ramani said...

Festiva,

Can you try moving the javascript code before /head tag?