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:
great stuff Ramani. as always.
about peek-a-boo:
yeah, he used it too, but Blogger had it before that too.
Wow, this is really cool. Nice one Ramani!
i just included it in my blog, it looks and feels great :) thank you
Another nice one! I had been thinking along similar lines, so I'm glad you've already done the hard work. :-) Good job.
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.
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 :-(
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.
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.
phydeaux3, great hackers think alike, hah :)))
What a difference one little space makes. It is working like a charm. I love it! Thanks!
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.
Works wonderfully. :) Thank you so much. :) I'm so happy I found your site - great job. :D
Caylynn, Vivek, thank you. The lesser a visitor has to navigate between pages, the more he stays in your blog.
It's great, how about Peek-a-boo comment for Blogger beta, is it possible?
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?
Ramani,
It's done...woooowtwoooowt. Looking forward for the upcoming hacks.
Keep up the good works Ramani!
Raquel
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.
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.
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.
Another improvement to my beta blog thanks to you! Great work! :)
Loup
'Forward-and-Share'
Great post. Thanks for all the hard work in putting this together and sharing.
Thanks coltrane. I believe in sharing.
Works great! thanks Ramani
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!!
Jessi, did you first make the changes described in my previous hack to show only post titles?
I tried, clicked preview, and tried the label drop down, and it didnt change it to only titles?
hmmm..
jessi, what's your blog?
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!
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.
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!
Ramani!! I got it! I was doing it wrong, user error!
You rock! thanks so much! :)
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
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.
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
Paula, it might be a minor error. If you send me your template through email (rarunach@gmail.com), I will check what's happening.
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
Seiche,
I just checked your blog and peekaboo seems to work fine in label pages. is there any other problem?
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.
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?
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!!!!
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!
Loui$$, if you had saved the previous version of template, revert back to it and see if it works. otherwise, report to Blogger support.
minimicadee, i'm glad i could help you there.
Ramani,i already fix it,it work great man!thanks,and about the sidebar at ur blog....may you teach me?^^
Yes, I will. Louis. Just wait for me.
can't like it anymore, thanks!
Thank you Ramani - you are my hero hacker!
SJ xx
http://skankyjane.blogspot.com/
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?
Anonymous, yes, check the post titled "Expandable posts with peekaboo view".
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.
Protesto, I will get back on this soon.
Hi Ramani,
I have implemented this hack into my blog but...
It is possible to change "[+/-]" to an image icon or other text?
Diario,
yes, you can replace it with any text or image (using img tag).
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.
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.
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.
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.
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).
Thanks for the reply. I will give it a try again and see what happens.
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 :)
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.
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!
Nice hack, thanks :)
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.
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.
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!
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?
Eric,
This hack is only for the new template. For classic template hacks, check out the label called "non-beta hacks".
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?
Ed, that's expected. Peekaboo is only for the posts. For posting comments, you have to goto the post page.
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.
Alex,
when you do so, you have to replace all left arrows with < and right arrows with >
Also alex, for this hack, you only need the toggleIt function. Other functions are for other hacks.
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!
Ramani, Is it possible to get a 'Hierarchy' view in 'Labels' widget just as one gets in 'Archives' widget.
Shrish,
It's difficult because labels don't have a built-in hierarchy.
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!
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.
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.
True life,
It's something to do with the template CSS. Can you try changing the settings for .post-title?
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.
another great one! thanks so much.
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.
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.
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.
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.
Patti, looks like it's working for you now. did you fix it?
ramani this hack is not working.
in your code you said look for
div id='blog-posts'
where as in my blog it is
div class='blog-posts'
Yes Kishor is correct. this is not working.
kishor, I will check this tonight.
ramani i know u r busy with bvibes.com, but still if you can help to get this hack work properly.
kishor,
are you using neo? this used to work perfectly with Blogger's templates.
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'
Yeah, what's the problem? If I click on +/-, it works fine in firefox.
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. :)
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
Mohit,
I have updated the instruction. Please try again.
Hi, great stuff and just what I need for the main page. Is there a way to implement this on the main page?
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
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
Festiva,
Can you try moving the javascript code before /head tag?
Post a Comment