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

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


«Oldest   ‹Older   201 – 316 of 316
Cindi Dixon said...

I added the code but the "read more" link is not working. My code does not have the id='post' so I am not sure where to put the code. Help please

I host the site elsewhere but it is a blogger site.

Unknown said...

I think you skipped the updates like many others did. Read update 1 and do accordingly.

Cindi Dixon said...

Nothing happens when I click on

Any ideas anyone?


Cindi Dixon said...

I found the problem. I thought I was using the new verison of but I created a new account and found out it is the old verison. Now I have to find out how to switch to the new blogger.

Anonymous said...

You are a lifesaver. I've been struggling with this for days!

Anonymous said...

What does Step 1 do?

K. Stone said...

I'm just curious. I have a lot of trouble with the blogger online posting tool.

If I copy and paste into it, it doesn't hold formatting. And when I format in the tool itself then it messes up the expand/collapse thing.

Is there any trick to making this easier or is blgger just a pain for now? thanks.

Unknown said...

Oh, please use the Edit HTML tab instead of compose tab as explained in this post (last paragraph before updates)

K. Stone said...

Oh, I forgot to explain that I do use the Edit HTML tab and this still happens.

I think the blogger posting tool really is a little kludgy.

blloggger said...

Can you tell me how to implement it. My blog is at

Unknown said...

Don't you think the description in this post is good enough? Try it and if you face any problem, let me know. I suggest you to read each line of instruction carefully.

Anonymous said...

I'm getting this "expr:id='"post-" +'>" before post titles.

Unknown said...


can you recheck if you applied the changes properly? if you think so, let me know which blog it is.

Anonymous said...
I checked several times.

Unknown said...

You have to remove the right arrow before expr:id. It should appear only at the end of that line.

Jer said...

very well done. great usual. thank you!

Sashasretroemporium® said...

i've got a prob' w/the read more link,i did everything as u say but nothing,there's st. quite strange coz' when i turn this one div class='post'> into that one div class='post' expr:id='"post-" + data:'>
all the entries of my site disappear...
maybe if i could send u a html example u could help me out.
Thx a lot 4 ur time

Juan David said...

Thank you so much! I was looking for this so badly!

Mike Coughlin said...

I've had this hack going nicely on my site, Thanks so much. However, I'd like to tweak it and I am not sure if it requires adjusting the HTML or the script code. I hope HTML. I want to also hide the post footer until they click the Read More link. I've fiddled with it but can't quite get it. What should I do?

Lovely said...

Hii Ramani,
I applied this Peekaboo post hack on my blog ( and what i see on my olders post is only +/- "post title Page" not the posts. Can you please check and suggest me what should i do to make it work better ?

Best Regards,
Eliena Andrews

beans said...

hey ramani, thanks for the hack, it really is brilliant.

question: i had it working perfectly on an original blogger beta layout. i then downloaded a 3-column layout to use and went to reinsert the code for your hack. i get the "read more" and the post is divided where appropriate, but the post does not expand...the "fullpost" remains hidden.

any ideas?

beans said...

scratch all of that, the script code was know the very FIRST step. i never said i was good at this.

awesome hack, works beautifully.

thanks for the hard work.

Dave Riley said...

I employ peek-a-boo posts on a couple of my blogs, but these are the beautiful SIMPLA template so that they are still half in old Blogger m,ode without the widgets and stuff.

But the problem is that the "Read more..." is BELOW the Labels.IE:

[----Post body----]
Labels: Trade Unions, Video

When I want it, if I can , for the "Read more..." to be ABOVE the labels. I haven't been able to hack it so that can happen. Is there a work around?

coloredgirlswhohaveconsidered said...

I keep getting the following message after several attempts...what am I doing wrong?

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 "/>".

coloredgirlswhohaveconsidered said...

nevamind, I finally got it.
Hurry back from vacation, now I want some NEO. At this point, I know I'm too cute can't tell me nothing took me 5 times, but still can talk to me...thank You Jesus!

OCDev said...

Thanks. If I want to change the color and font of the link what changes do I need to make to my style sheet?

Andey Layne said...

Thanks for writing this. I wasted a solid hour trying to do it on my own (without success) but yours works like a charm.
*Bowing down before the techie genius*

Dan said...


I put this hack in a while back (many thanks, Ramani, for getting this worked out). Yesterday everything on it was fine, today I can't get any of the posts to expand.

Does anyone know if there's something screwy with blogger today, or did I screw something up?


pommygranate said...

thanks Ramani.

very useful

Anonymous said...

I'm doing something wrong! I keep getting this html code under my post title, and the button doesn't work. I've tried it on both of my blogs with the same results....must be making the same mistakes. :-| Help. I wish you just charged money to fix it!

Bill said...

Many thanks, you're awesome!

verb2be said...

thanks so much Ramani, very happy to have this hack. its working beautifully!

Anonymous said...

Thank you, thank you, thank you...saved me a ton of time and space and it's so much simpler then the 9000 other convoluted ones out there.

Bizzy B said...

Thank you so much! This is an excellent hack!

Craftybernie said...

I love love love this hack. I've seen a similar hack on Classic Blogger but was terrified to try it out.

Thank you for explaining it so clearly. It worked first time. I have also edited some of my previous posts and added the 'span id="fullpost' '/span' tags to make them expandable.

Thanks again!!!

Unknown said...


I am happy whenever somebody gets it working the first time. It will - if you carefully make the code changes as shown. Enjoy!

@beradadisini said...

Ramani, I can't wait for more great widgets and templates from you! Thanks much, for your help! It works really well, and you explain the steps to do it very well in your posting.

Jill said...

I got the hack to work just fine, but once I go to "older posts," all of the posts on the subsequent pages have jumps on them, even if the code doesn't appear in the actual entry when I go to edit the post. Please help!

politicalstuff said...

Is there a way to get this to be applied to "existing" posts?

politicalstuff said...

Sorry. Forgot to mention that I previously had the old template format and somehow had a blogger-provided hack that had the same template except where your hack has (I've substituted "[" and "]" for "<" and ">" as I got an error about including html):
[span id="fullpost"]
I had
[span class="fullpost"] and, as I recall, when I installed that it applied retroactively to all the posts. Would like the same to happen again. Thanks.

Unknown said...


As of now, you have to change all the old posts to use "span id=fullpost" for this hack to work. Maybe I can try to accomodate "span class" version also into this hack, but I don't know when I can get it done.

Jill, this known issue is mentioned in the second note in this post.

Anonymous said...

Hi ramani,

Love this hack
I have used it on my blog but there seem that it shows huge gap between the paragraph and the read more.. please see my blog

I follow exactly the instruction and couldn't find any mistake..

Unknown said...


You seem to have span id="fullpost" twice in your posts. can you check why?

Unknown said...

omg thank you thank you thank you!!! I have been looking how to do this for ages. ur guide worked perfectly :D
Thanks so much

Mark said...

THANKS a million!!
I really appreciate this post!
I googled it a couple of times but it didnt really showgood results, and if they showed, they were really hard/not working.

you rock!

Brian J. said...

Sweet, this is great. I am new to blogging and this hack was a piece of cake with your instructions. Nice job.


Unknown said...

It doesn't work. I have the 'full post' code span most of the page, yet only one line in the middle is hidden. Nothing else.

Derek said...

Great post Ramani. It works beautifully for me but with regards to the code below

script src='' type='text/javascript'

It seems to link to a another site. What if the site is to go down? Won't it mean that my blog will be affected?

Unknown said...


Lots of people have been using this hack for several months and they never face this problem. The domain is with yahoo and I pay for it. If you still have concerns, you can download it and move it to your server.

Unknown said...

Superb Hack Bro. I Hated myself for posting large topics on my blog but thanks to you Its a Breeze. Thanks Bro.

Daniel Leão said...

didn't worked for me...
read more link shows a javascript:void(0);

qhat to do ?

Unknown said...


That's what it's supposed to show. You must have made some other mistake. Can you check again(specifically the change of expr:id)?

Derek said...

Hi Ramani,

Thanks. I was wondering if I can actually copy the code into the template directly? I have not been successful though.

Derek said...

Sorry, one more question, how do I edit the color of the "read more" and "summary only"?

crabsallover said...

thanks for the hack. It works!

Anonymous said...

Thanks for creating this very easy-to-follow tut on how to use the Peekaboo posts.

I had to try it a few times to get it working correctly, but only because I wasn't reading/following as carefully as I should have.

Anyway, its a great feature and I wanted to say "Thanks!"

Bloompy le Bonvivant said...

Ramani, thank you for updating this hack. Ever since the upgrade on Blogger, I was frustrated with the loss of truncation.

A note: I was puzzled reading your said blog which only mentioned Step 0 and Step 1. I had to click here and there, and nothing made sense. I was using Safari. Then, I switched to FireFox, and voila, all your steps were there. Weird...

Once again, thanks a whole lot!

AD said...

Just another blogger dropping by to thank you for sharing this hack.

Nicole said...

Thanks for the help! That's much easier to understand than the one Blogger posted in their help section. (Works better, too.)

Hafiz said...

By putting span id fullpost manually in the post editor instead of post template, I find that Read More links only appear in the post that I want to be expandable.

Is it possible to use javascript to create this function/equation. If the text contained in span id fullpost equal to default text ie 'Type rest of the post here', Read More links will disappear? Sorry if this does not make sense, I'm not familiar with javascript :)

Unknown said...


as of now, you have to manually remove the span id=fullpost if you don't want the peekaboo.

Anonymous said...

Very nice hack, installed it with succes, thanks for clear explanation!

Anonymous said...

Well it's great...

I have seen this in a lot of wordpress blogs..

the only thing missing is it's looks and the way it expands...

In other blog when i used to click on read more...the remaining post opened slowly with a good Interface,,,

But using this when i click on read just pops up and i was unaware wht just happened for some time..

same thing is wrong with your Blog's template..The post should open slowly and not just pop up..

m@vi said...

this is a greatest hack ever. works perfectly with firefox, however automatically expands if you use IE.

Linda Richardson said...

Ramani, I just published my first blog at age 64 and I am so proud! However, I cannot add a Comments page element. My settings and archiving are correct, but No Go. I read your explicit reply in the help group and followed your instructions. Once in new page element/feed/ I typed, but this URL is rejected as invalid. What am I doing wrong?? Many thanks. Linda P.S. Why doesn't Blogspot guide the blogger through basics such as this?

Unknown said...


I tried to add the same feed in my test blog and it worked ok. Did you retry adding it? Also, you don't seem to have comments enabled in your blog. do you?

StickyKeys said...

Hello Ramani! This is an excellent tutorial and I thank you for it. I have one request/question.

Normally I use Livejournal which employs the "lj-cut" method. With this function you can employ several lj-cuts to a post looking something like this:

Here is a post

Read More

Here is some more of the post that comes after the part I want cut.

Read More

And here is some more and the end of the post!

Now I've gotten this to work just fine, but for some reason the "Read More" hyperlinks appear at the bottom of the post.

Like so,

Here is a post

Here is some more of the post that comes after the part I want cut.

And here is some more and the end of the post!

Read More
Read More

When I click them they reveal the text in the correct area, but I would like the "Read More" text to be in the correct position.

I hope this makes sense (and hasn't been asked before, I have looked), any tips?

Unknown said...


I am currently out of town. I will check this tomorrow.

StickyKeys said...

No prob R, and thanks for the quick response!

StickyKeys said...

Heh, oh Ramani, hopefully you don't get tired of me very soon!

This hack was working fine, but I'm not sure what happened. It seems now all of my posts are showing in full text, and then only when you click the "read more" button twice does it go back to summary. I haven't made any additional changes except for the fade in/out which has also seemed to stop working.

I undid all of the changes and went back and redid them with no difference in result. I have a post on the first page which will show you what I mean.

Unknown said...


You still seem to have the code given in step 1 of this post. For fade in/fade out, you should replace it with the code in step 1 of that instructions. So, just remove that one line of code and it should work.

Regarding lj-cuts, as I explained earlier, since Blogger doesn't have native support for cuts, you will have to include the "read more" link in your post where the cut is located.

StickyKeys said...

Hello Ramani, thank you again for the response.

Regarding lj-cuts, as I explained earlier, since Blogger doesn't have native support for cuts, you will have to include the "read more" link in your post where the cut is located.

Yes, I've tried that. The cut itself is in the right place, but it moves the "read more" text to the bottom of the post.

I can work around it, I was just wondering if there was a way to have the link in the correct place.

Here's a screencap of what I mean.



Unknown said...

This hack always adds the "read more" link at the end of the post because that code is part of the template, not the post. If you want the link to appear somewhere in the middle, you will have to add some code INSIDE the post (and I am not talking about span id="fullpost", it's a different piece of code). It would be comfortable to explain this over email. But whenever I reply to your livejournal email, it doesn't seem to go through. Can you check what's wrong?

Elz said...

I've recopied your codes a couple times, and triple checked everything just about, and read all your comments on the subject; when I click on the read more link, nothing happens.

Unknown said...


Sorry about it. I have fixed the problem. It works in your blog now.

Elz said...

Thanks so much!

HaHa UK said...

Hi Ramani, I installed this wonderfull peekaboo hack instead of the standard expandable hack, but one problem is, I have one peekaboo thread that is on the second page of my blog, and for some reason it is not minimised.

I increased posts on home page to 15, and the post worked when it was on the first page, and when the post is in the search results, but when it is in the second page, the peekaboo doesnt work.

Check it here: and click older links at the bottom. Post is titled "E3 2007: Super Mario Galaxy"


HaHa UK said...

For some reason, all the home page posts now have the 'read more' link, even if I didnt include the span id in the post. ?

Unknown said...


Please read this post about how to get the hack working again.

Luciano Mucelli said...

Friend. I think this tool is amazing. I use it and it is
wonderful. But today I realize that there is a problem with the "hackosphere.js", because file is not in "" directory. I check that the peek-a-boo in my blog doesn't work, and I started to think that was something wrong in may code. But I check anodhers blogs and I realize that it doesm't work eather. When I check de source of the code, it said that the file was not found. I check the directory and there is not there. So, I don't know if you were the creator of this wonderfull tool, but I leave you this problem.
Thanks for all.

Unknown said...


Thank you! Did you see the blinking notice at the top? The solution for this is in my latest post.

khalel said...

I need help with my templates, i followed all the codes but the peek-a-boo widget is not working for my post and i am geeting this error. please help

Unknown said...

Khalil, you would have got an error when you clicked the link in step 1, right? I fixed it just now. try again.

Faruk Ahmet said...

I'm trying to implement your wonderful hack in my blog but when i click the link in the step 2, i get a "403 Forbidden" error so i can't get the necessary code. Why is that?


Tammy Snyder said...

I have seen other people use this method for their About Me that's in the sidebar. I assume there must be different codes for that since most examples, like yours, say Expandable POST Summaries. I assume that method is only for posts. What do you do for sidebar features like About Me? Thanks.

Unknown said...

Tammy, had some such hack. Can you ask Annie there?

Rick Warren said...

After reading the comments, where can I find the latest version of this hack? It appears that what is at the top of the post is the first version,

Unknown said...


This is the latest version.

Anonymous said...

Your "Blogger hack: Expandable posts with Peekaboo view" works like a charm, even for this html-challenged type. Thanks in large amounts.

Kirhat said...

When I used your codes and tried to review the page, I encountered this 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: The element type "style" must be terminated by the matching end-tag "".

Should I do anything?


Unknown said...

Sparhawk, please recheck the code.

Unknown said...

Hi Ramani, thanks for the tips. But I get confused when I'm trying to edit old post. Where should I put the fullpost tag? Is it when I use Compose or Create HTML? There are a looooot of tag on the second type.
Could you put additional information on how to edit the old post?

And, why do I get so many empty spaces when I did tried to put
fullpost after the first paragraph?
Btw, I applied you hack in my office blog at

STeV3N said...

i want to change spans from id='fullpost' to class='fullpost', what i have to do to the code?

おにぎりまん said...


MARKS said...

Thanks a lot ramani. Thats made my blog posts look professional now and saves a lot of time wasting scrolling down the page.


Michael said...

Thanks a million!

Andy Glover said...

Ramani, this is awesome!!! I've been searcing for hours to find a decent hack, and this is the best one yet.

Expect a link to your site.



ေတာက္တီး ေတာက္တဲ့ said...

Like everyone else, I thank you very much and will add your site on my blog.

Anonymous said...


i applied your hack to my template and everything seems fine except that when i post, the summary is viewable but under it there is no link to expand. how can i fix this? i would greatly appreciate the assistance. thank you.

Kyle and Svet Keeton said...

Me and my wife want to thank you! This is exactly what we needed. Sometimes we have posts that extend the page very far. Now we can keep more than 2 posts on the front page.

Thank you again very much.

Kyle & Svet

~ said...


I didn't think I had the lines in correctly, as the code in my template had slight variations in the lines BUT
I got it and I did it the very first time! It looks so great and I'm completely thrilled. My little blog is starting to look pretty professional!
(will I be able to update my older posts?)
Am posting your link to my sidebar thank you thank you thank you SVS

tiamotiodio said...

Thanks for this hack!

Does it work for Internet Explorer?
It seems it doesn't work very well...

There's an italian translation of the tip here:

Thank you very much!
I found the same problem with the "no-borders" hack about emoticons (doesn't work with IE)

Panos K. said...

i tried it. it works. i had to copy paste not only the red text though but all of it since there were code differences in the black coloured text as well.
i didnt like the peekaboo feature and i removed it but i wanted you to know that you are the only one in the internet that managed it to work and thats great. not even the beautiful beta guy made the code right...
keep up the good work!

lulu said...

I'm getting an error message trying to access the page with the code:
The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal.

Can you fix this please? I'd really like to use your workaround.

Thanks so much.

lulu said...

The link to the code is offline. It generates a page with this error message:
The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal.

Can you put it back online please? I'd really like to use your workaround.


Unknown said...


I tried the link just now and it worked fine. It is hosted at google pages and sometimes, it shows that error.

Thrice-Great Elizabeth said...

is there anyway to cut some posts and not others? when i used this code it worked but it kept formatting all my following posts the same way when i only wanted some to be cut. what should i do? i am completely clueless.

Second Blossoming said...

I love you man! Thanks heaps for it!

Sufi Zikr said...

Hi Ramani

I just uploaded the changes for expandable posts. It seems to have left the following on my previous posts:

expr:id='"post-" +'

this is shown at the top, do you know how to remove this?

Thanks again


Loke Yew said...

Hi Ramani,

Thanks a lot for your hack. It works GREAT!

ELLA said...

Hi Ramani.
Stumbled upon your site, while I was looking for widgets to use for my blogger.
I applied the Peekaboo function that you shared, and religiously tried to follow your instructions. But what could be the reason for my "Read More" link be actually linked to javascript:void(0).
Please help.

I would like to think I got the codes in their places. Except that I did not add the "uncustomized-post-template" words, as it is not present in my template and you said it was okay. Could this be the reason why it did not work? Thanks!

TheLight said...

Nice work.
It worked perfectly.

Unknown said...

Nice work.
It worked perfectly.

Jhoni Jackson said...

I can't understand the code. I followed the directions but I don't know much beyond basic HTML and I'm stuck. I've tried every single expandable post code I can find and nothing works! I need an expandable tutorial for dummies or some background info on the codes you're talking about to help me understand where to place the codes. Help, please?!?!??!

Anonymous said...

This is so amazingly cool.
Thanks sooooo much!

Take a look, I used it on my blog to restrain some pictures:

Dan said...

I've been using this feature for ages now and it's excellent!

However, I have a long-standing problem I hope you can help me with. Basically, if I include photos AFTER the "fullpost" line of code, the whole thing gets messed up and doesn't work (I think because there are too many "span" codes as a result of a photo being added). Consequently, I can only put photos ABOVE the "fullpost" line of code.

This is fine, but I'd really like to "peekaboo" posts to display "hidden" photos. Is this possible? My blog is - I hope you have time to help. If not, thanks for your time in making peekaboo posts, anyway.

«Oldest ‹Older   201 – 316 of 316   Newer› Newest»