For all you Non-Beta users: we now present our Improved Super Peek-A-Boo Post for Non-Beta. It has autoscrollback, so that after collapsing the post it scrolls back to the top of the post.
You can see it in action at Xenofon.
Step 0:
Backup your template.
Step 1:
Add Ramani's Javascript-code to the head of your template, just below the <head>:
<script type="text/javascript" src="http://www.anniyalogam.com/widgets/hackosphere.js"></script>
Step 2:
Look up the post class in your template, and add the red code:
<!-- Begin .post -->
<div class="post" id="<$BlogItemNumber$>1" ><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">>
<div>
<MainOrArchivePage>
<style>#fullpost {display: none}</style>
</MainOrArchivePage>
<$BlogItemBody$>
<MainOrArchivePage>
<span id="showlink"><a href="javascript:showFull('<$BlogItemNumber$>1')">Read More...</a></span>
<span id="hidelink" style="display: none"><a href="javascript:hideFull('<$BlogItemNumber$>1')">Collapse...</a></span>
<script type="text/javascript">checkFull('<$BlogItemNumber$>1');</script>
</MainOrArchivePage>
</div>
</div>
Now save your template.
Step 3:
In your settings, add the following lines to the post template:
Type summary here
<span id="fullpost">
Type rest of post here
</span>
Posts
4 New Gadgets from Blogger Buster
3 days ago
This is what people say:
Hans, it doesn't work on my end. I am using tictac template.
I don't know where to insert your code, I tried but its not working good.
Hans, I got it now. I just noticed you forgot to close the < s p a n >, like this < / s p a n >
Nice hack - thanks!
@raquel: glad you figured out how to install the bug! And thanks for the feedback, I corrected the </span>-tag.
@don: thanks!
hi hans,
great work again esp. for non beta bloggers! but i can't seem to make it work.
you can check my site http://technonews2day.blogspot.com for reference.how do i make the articles collapsible?i already installed all the script you posted but it is not showing as collapsible..
thanks
See Hans?, everyone loves peek-a-boo stuff.. :D
@chllout_lev: I took a look at your blog, and I can't find the javascript-file from hackoshere in your source. Are you sure you followed the instrcutions?
@avatar: thanks, and yes it's overwhelming!
I can't get it to work. I have tripple checked the code. Hans, you mentioned that in chllout_lev's blog you didn't see the hackosphere file. Just where is that suppose to be. My blog is
hathor-sehkmet.blogspot.com
hathor, I can't find your blog at the address you provided.
To answer your question: the hackosphere.js file should be loaded into your template from the <head> of your template.
I'm sorry I transposed some letters in my address. This might sound stupid, but do I download the file and put the actual code in my template. I have the reference in the template just under head.
hathor-sekhmet.blogspot.com
@hathor: I think you need to insert a space in front of the post-body id, between the closing quotes of the class and the id: <div class="post-body"_id="<$BlogItemNumber$>1">
I put an underscore at the place where the space should be, just to clarify it for you.
Hans,
I put the space in, but didn't solve problem. Could it be the single quotes aroud $BlogItemNumber$
@hathor: I looked further into the source of your published pages, and would like you to check a few things.
When you call the showFull and hideFull-functions, you have to use round brackets, (...) and not {...}. It seems you used the wrong brackets. Please check this.
Between those brackets you have to put the following: '<$BlogItemNumber$>1' Check the quotes in front and at the end. Check the opening and closing brackets < and > (I think the first one is missing from your template in the call to the hideFull and checkFull function).
And also check your post. The part of the post you want to collapse has to be between a <span id="fullpost"> tag at the beginning and a </span> tag at the end.
Hope it helps.
Hans,
Thanks very much for the help and being patient. The way your code displayed, I could not tell if they were braces or parentheses.
font is too small for me.
thanks for always answering questions here.
yes, i removed this script because i couldn't make it work and it messed up my site.but i will try again today, because i have much more time to spend perfecting it.
thanks
@hathor: good to read that you succeeded now!
@chllout_lev: I had this mess-up too. There seems to be a difference between old blogger and blogger beta in how you add the javascript to the head.
I first put it in old blogger in the same way that I did in beta:
<script blablabla />
This messed up all my css, the blog seemed to be without any css styling.
So I changed it to <script blablabla></script> and then it did work. Maybe this helps you too.
@all readers: the post has been updated, and now covers autoscrollback.
thanks again hans,
it works now on my site, but i have a problem with the featured post of the day from archive,which i also installed,it is displaying the fullpost html.
i hope you make a fix for this.thank you.
@chllout_lev: please leave a link to your blog here so that I can take a look.
Hi Hans,
I followed your instructions to put codes in my Blogger template. But in result the show/hide post function didn't work. I post a test article at my site. Hope you can give me some suggestions. Thank you very much.
Niner, in your post template you have to put <span id="fullpost">, not <span class="fullpost">
The hack uses the id to check if it is collapsable or not. The way you have it now, the hack sees no fullpost in your post, so it prints the entire post body and it hides the links.
Thank you very much, Hans. I did not notice the typo. Now the Peekaboo post works very well in my blogger. You saved my life. Much Appreciate !
Niner, you're welcome!
thanks hans. it works beautifully. i was looking at Ramani's blog rather jealously. now we're even :P.
Hans..you're genius. Your hack worked like a charm. After all the research and testing I have been doing, I only wish I had found your hack first. Thanks a mill!
@metalheadhunter, chick: thanks!
Hans,
Pardon the absolute newbie question but where exactly do I insert the lines mentioned in Step 3 ?
Milind again.I figured out where Step 3 goes finally but I can't get this to work for me. I must be doing something wrong but I can't figure out what. I'll try again , perhaps over the weekend when I have more time.
@milind: if you leave a link to your blog here I can take a look and maybe help you out.
Hey Hans, I'm having difficulty placing in the bug. Could you please help me? Thanks in advance!
My site is: http://wanderingeater.blogspot.com/
Never mind; I figured it out. But thanks anyways for the bug.
Hans,
This is my blog address :
http://chakaatyaa.blogspot.com/
I'll be grateful for any help or hints you can give.
Thanks in advance,
Milind
@Milind: if you write a post, the text that you don't want to show at first has to be between <span>-tags like this:
First line of your post
<span id="fullpost">
The rest of yor post
</span>
If these spans are omitted from the post, the javascript-code thinks: "Well okay, there is no fullpost-span, so I don't have to show the Read-more-link".
Hope this helps.
Yeah.. works great for me
Thanks a lot..Took such a loooong time for a slow-coach like me
THANKS
Deepa
http://horizonwitinus.blogspot.com
Hans,
Thanks a lot. It's working like a charm now.I hadn't realised that it wouldn't apply to the already existing blog entries. Apologies again for the absolute beginner queries.
@Deepa: it works nicely!
@Milind: it is good to see that you have solved the problem now. Please feel free to ask adviced as often as you need it!
Hans,
I have inserted the code in my blog template and tried to troubleshoot using your answers to everyone elses problems, but still cant get it to work. I get the "Read More" option on the posts, but the post is already expanded and so the link does nothing. Any chance you could tell me where I've gone wrong?
Blog is: prawnheadtv.blogspot.com
Thanks
Prawnhead
Hans,
I am a total newbie at this and just to add to my issues, it appears that my posts seem to get narrower and narrower as they go down the page.
HELP!
Prawnhead
@Prawnhead: the calls you make to the javascript-function use {} brackets in stead of () parentheses. That's why the code doesn't work.
The tapering of your post width is still a mistery to me.
@Prawnhead: The posts are tapering because there is 1 closing </div>-tag missing ath the end of your post. Because it is missing, the template thinks that each post is embedded inside the previous one: the padding of post 1 makes the width of post 2 smaller, and so on.
So add a </div> at the end of the post.
Hans,
Thanks for that, it fixed both problems!
I had no idea why the javascript function wasnt working, but I was starting to reach the conclusion on the column, but was just making it up as I go along!
Thanks again, I really appreciate it!
Shameless plug for prawnheadtv.blogspot.com
Prawnhead
@Prawn: Glad you solved it! Always count your divs! ;)
Hans, can the "Read More..." be changed and vary in each different entry like in lj?
@Mo: No Mo, in this hack that is not possible. A solution to this (and a new hack) would be to randomize this text using a javascript function. We'll put it onto the ideas list
Hi again Hans!
The Peekaboo feature continues to work well; I've added an explicit link to this article (and to your site's homepage) to my "Credits" section.
I do have one very minor issue: The "autoscrollback" feature, while it works nicely, scrolls back only to the beginning of the article text; the article's title is still invisible above the top of the visible page. I believe that the feature would be even more "user-friendly" if the autoscrollback made the article's title visible. Is that a "do-able" change? If so, is there anything I can do to implement it, or is it something you'd need to change at your end?
Thanks in advance for any advice you can offer - you're doing good work!
-Don
@Don: you have inserted the id at the class="post-body". Move it up several lines to the class="post", and autoscroll will scroll to the top of the post in stead of to the top of the article.
Thanks, Hans! You're correct, of course - and apparently I just wasn't looking carefully enough when I made that one little code insertion. Not very good aim for someone who's supposed to be a (volunteer) police sniper!
I've made the change and it works perfectly. Consider me embarassed but happy.
-Don
@Don: when typing code and/or sniping: relax, breath easily, hold still, and let go. ;)
Thanks Hans!
FYI, this hack also works on the "classic" beta versions, which is what I'm using.
Although I did have to tweak it a little bit, I was going to be doing that anyway.
@Chris: thanks!
Hans I have a template I downloaded and the coding is very different from wahat I should be looking for the address is http://thegrazingcanine.blogspot.com/ When you get the time Id appreciate it to tell me if there is an alternative or am I SOL.
Also great job on the Pannasmontata Angel or Evil template. I swear you'd prolly make some nice pocket change converting those templates over to beta. Id pay. Anyways please help out if you can.
@Capius: could you post a link to the template itself so that I can take a better look?
Thanks for this, Hans, it's something I've been looking for for ages. I have a slight problem, though. I have an extension installed with blogger that allows me to add techorati tags to a post. When I publish a post, the tags appear above the Read More link. While not fatal, it just doesn't look right, and some may miss the link. Is there any way I can get the tags under the link? If you have chance to look, my blog is at www.aeowolf.blogspot.com. Any help you can give will be gratefully received...
Hey hans, I found yr blog on google search and since then i am quite hooked on to it. I have a question that may seem a bit silly to you, but since you have been answering all queries, I thought let me try as well.
I wanted to try out the pee-a-boo post, but already my template html is quite messed up as I have done other hacks as well. So I can't figure out where to add your script now. (The < div class= "post"... is a bit different now on my template)Could you please have a look at the site and give me yr input? The site's http://indiapr.blogspot.com
Also, do you think all these hacks and java scripts will be bad for SEO?
Many thanks.
@aeowulf: as far as I can see you have added a <div class="tag-list"> to your template a few lines above the <span id="showlink">. That is why your technorati-tags are above the readmore link. Move it down and you'll be okay.
@hobbit: put the id-code at the post-class, and add the javascript in the head, just above </head>
Hans, can you take a look at my template here and let me know where to insert these codes? I'd really appreciate it! Thank you.
Btw, I'm at http://bitchingandthoughts.blogspot.com
In step 2 of my tutorial it says you have to look for a <div class="post">. In your template this is called <div class="entry">. And in the same way post-body is called entry-body. So that's the place to put the code.
Hi, Hans
It is working very good on my blog, thanks. The only detail that does not comforts me is that the read more link -or the collapse- would be perfect at the end of the post, just on the same line of the final paragraph (so we can save a little bit of space). Is it posible?
I want you to know that there is a ">" extra on the second part of step two, if you didnot notice...
Sorry about my broken english...
and cheers
:)
ooopss!! Sorry the coment before this one is mine, but with the id of my blogger-beta account, which it is not in use by now...
:-p
Well, gives me the chance to ask you to put on your blog a non-beta-user-hacks-label, for all of us!!!
cheers again!!
Hi Hans, sorry to bother you again.. I'm quite confuse because in my template there's also a 'id="post...." after 'div class="entry"', where do I insert 'id="<$BlogItemNumber$>1"'?
Thank you so much in advance!
Hey Hans... this is very strange, but the Author comment notifier button appears in the comment i made signed as "..." (from my blogger beta acount), i know this is not supposed to happend, but i wanted you to know... i will not notify myself that i responded to my own comment!!
:)
cheers
hi hans,
i applied the hack to my blog. its working for the new posts im creating and the old posts are as it is . they are not collapsing or nothing
this is my blog address
http://ramsworldiitm.blogspot.com/
@Ram: you have to edit all your old posts and add the <span>-tags to them.
Thanks for the reply, sorry it's taken so long to get back to you. The div class="tag-list" code must be put in by the script I use to add the tags, as it doesn't appear in the blogger template. When I'm adding the tags in the post, the html appears under the end of the full post code, and doesn't include the tag-list code. I've tried using a tag generator instead and cutting and pasting the code but get the same result, the tags appear above the "read more" link. Guess I'll just have to live with it.....
This is great, but one concern: when I add the code to my template, I get the peek-a-boo at the end of previous, undivided posts. Is there any way to apply the peek-a-boo divider only to posts I choose to divide?
Thanks!
@English Major: the hack should only display the Read More link if you have used the fullpost span in the postcontent. I checked your Blog, and as far as I can see the hack works properly.
i dont know why the peekaboo's not working on my site. this is my template.
i have used this with my old blogger. perhaps do you know how i can convert the new blogger to allow the expand/collapse on my older posts too?
txs
Hi Hans, i am very interested in adding this hack in my blog my blog but i have no idea how to do it as i am using a diff template from blogger-templates.blogspot. Here is my template my template.
Can you please have a look? thanks!
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.