Ok, this is a pretty extensive change - I recommend you back up your template before attempting!
First of all, you need to modify your template.
NOTE: I had to put a space before all the tags ("< "), because otherwise blogspot would get all screwy in the editor - make sure to remove the spaces!
NOTE: Only tested on windows IE 5.x/6.x, let me know in the comments if they don't work for your particular OS/browser setup.
step 1 - add CSS for the "fullpost" class
What this code does: Makes it so that the default visibility of posts on the main or archive page is invisible, and visible on the item page.
NOTE: You cannot put this CSS in a separate CSS file, it must be in your template, otherwise blogger will not interpret it correctly! If you have the problem where the post starts out fully expanded, but the links work correctly, this is why.
Put this somewhere in the < style> element.
.fullpost {
< MainOrArchivePage>
display: none;
< /MainOrArchivePage>
< ItemPage>
display: block;
< /ItemPage>
}
step 2 - add javascript for show/hide functionality
Put this in the < head> element.
What this code does: Provides the interactive functionality for show/hide.
The showMore function takes in the post id, searches for the div with that post id, then looks inside it for a "fullpost" div, then toggles its visibility, and toggles the visibility of the expand and collapse links.
The initShowLink function sets the initial visibility of expanded/collapsed elements.
< script type="text/javascript" language="JavaScript">
function showMore(postId, postLink)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var fullPostElement = null;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j < postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
fullPostElement = postElement.childNodes.item(j);
break;
}
}
if (fullPostElement)
{
// show
if (postLink != 0)
{
fullPostElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
// hide
else
{
fullPostElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
location.href = '#'+postId;
}
return false;
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
function initShowLink (postId)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var foundFullPostElement = 0;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j < postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
foundFullPostElement = 1;
break;
}
}
if (foundFullPostElement == 1)
{
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
else
{
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "none";
}
}
}
}
< /script>
step 3 - Modify the post-body div
What this code does: gives each post div an id, so it can be directly referenced by javascript.
Find something that looks like the following:
and change it to
< div class="post-body">
< $BlogItemBody$>
< /div>
< div class="post-body" id="postbody< $BlogItemNumber$>">
< $BlogItemBody$>
< /div>
If the < $BlogItemBody$> isn't wrapped by the div, then just make it like above.
step 4 - Add the show/hide links
What this code does: Adds the expand and collapse links to the post. The initShowLink function determines the initial visibility of the links.
Add the following directly after the post-body div
< MainOrArchivePage>
< div style="{display:block;}" id="showlink< $BlogItemNumber$>">< a href="< $BlogItemPermalinkURL$>" onclick="showMore('< $BlogItemNumber$>', '< $BlogItemPermalinkURL$>');return false;">expand post< /a>< /div>
< div style="{display:none;}" id="hidelink< $BlogItemNumber$>">< a href="#" onclick="showMore('< $BlogItemNumber$>','');return false;">collapse post< /a>< /div>
< script type="text/javascript" language="JavaScript">initShowLink('< $BlogItemNumber$>');< /script>
< /MainOrArchivePage>
step 5 - Update post template
You're going to have to change the way posts are written, if you want to take advantage of the show/hide functionality.
To make it easy to remember, update your post template - in blogger, go to settings->formatting.
It won't hurt anything to not do this, you just won't have the show/hide.
What this code does: Makes it easier to start writing expandable posts. The shortpost div is optional, but it doesn't hurt to include it for completeness' sake.
< div class="shortpost">
Short post here
< /div>
< div class="fullpost">
Extended post here
< /div>
step 6 - Try it out!
Get posting!
Update 06/17/05
1) Added jump to beginning of post on hide.
2) Show/Hide Comment functionality!
Show/Hide Comment functionality is much like the Show/Hide post functionality:
As I said before, BACK UP YOUR TEMPLATE BEFORE ATTEMPTING MODIFICATIONS.
Also, it is recommended (but not necessary) to do the show/hide posts first.
NOTE: I had to put a space before all the tags ("< "), because otherwise blogspot would get all screwy in the editor - make sure to remove the spaces!
step 1 - add CSS for comments
What this code does: Makes it so that the default visibility of comments on the main or archive page is invisible, and visible on the item page.
NOTE: You cannot put this CSS in a separate CSS file, it must be in your template, otherwise blogger will not interpret it correctly! If you have the problem where the post starts out fully expanded, but the links work correctly, this is why.
Put this somewhere in the < style> element.
< MainOrArchivePage>
.comments {
display: none;
}
.expandCollapseCommentLink {
font-size: 85%;
}
< /MainOrArchivePage>
step 2 - add javascript for show/hide functionality
Put this in the < head> element.
What this code does: Provides the interactive functionality for show/hide.
The expandComments function takes in the post id, searches for the div with that post id, then looks inside it for a "comments" div, then toggles its visibility, and toggles the visibility of the expand and collapse links.
The initExpandCommentsLink function sets the initial visibility of expanded/collapsed elements.
I'll probably revisit these functions in the future and unify them into a single set of functions, since they are functionally equal.
< script type="text/javascript" language="JavaScript">
function expandComments(postId)
{
commentsId = postId + "comments";
showExtLink = "expandCommentsLink" + postId;
hideExtLink = "collapseCommentsLink" + postId;
if (document.getElementById)
{
var commentsElement = document.getElementById(commentsId);
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// show
if (commentsElement)
{
// hide
if (commentsElement.style.display == "block")
{
commentsElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
location.href = '#'+postId;
}
// show
else
{
commentsElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
return false;
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
function initExpandCommentsLink(postId)
{
commentsId = postId + "comments";
showExtLink = "expandCommentsLink" + postId;
hideExtLink = "collapseCommentsLink" + postId;
if (document.getElementById)
{
var commentsElement = document.getElementById(commentsId);
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find any comments
if (commentsElement)
{
foundCommentsElement = 0;
for (var j = 0; j < commentsElement.childNodes.length; j++)
{
if (commentsElement.childNodes.item(j).className == "comment")
{
foundCommentsElement = 1;
break;
}
}
if (foundCommentsElement == 1)
{
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
else
{
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "none";
}
}
else
{
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "none";
}
}
}
< /script>
step 3 - Add the comments div
Put this code wherever you want the comments to appear.
What this code does: Displays the comments in a div, and adds show/hide links for them. I put this in immediately after the show/hide post links.
< MainOrArchivePage>
< BlogItemCommentsEnabled>
< br/>
< div class="comments" id="< $BlogItemNumber$>comments">
< a name="< $BlogItemNumber$>comments">< /a>
< BlogItemComments>
< div class="comment">
< a name="< $BlogCommentNumber$>">< /a>
< p class="comment-body">
< $BlogCommentBody$>
< /p>
< p class="comment-data">
By < $BlogCommentAuthor$>, at
< a href="#< $BlogCommentNumber$>" target="_self">< $BlogCommentDateTime$>< /a>
< $BlogCommentDeleteIcon$>
< /p>
< /div>
< /BlogItemComments>
< /div>
< div class="expandCollapseCommentLink" style="{display:block;}" id="expandCommentsLink< $BlogItemNumber$>">< a href="< $BlogItemPermalinkURL$>" onclick="expandComments('< $BlogItemNumber$>', '< $BlogItemPermalinkURL$>');return false;" target="_self">>>> show comments< /a>< /div>
< div class="expandCollapseCommentLink" style="{display:none;}" id="collapseCommentsLink< $BlogItemNumber$>">< a href="#< $BlogItemNumber$>comments" onclick="expandComments('< $BlogItemNumber$>','');return false;" target="_self">hide comments <<<< /a>< /div>
< script type="text/javascript" language="JavaScript">initExpandCommentsLink('< $BlogItemNumber$>');< /script>
< /BlogItemCommentsEnabled>
< /MainOrArchivePage>
And that's it!
This comment has been removed by a blog administrator.
By
sugarkat , at
10/23/2004 12:43:00 AM
(My appologies about the deleted comment. I posted before I fixed a major typo.)
Thank you so much for this post. I'm a complete and total stranger who was directed here by Blogger Help's site. This was exactly what I needed to get what I wanted in my formatting. Worked wonderfully and the directions were perfectly clear. Thanks again for the great help.
By
sugarkat , at
10/23/2004 12:55:00 AM
No prob, glad I could be of some help!
By
ZaijiaN, at
10/23/2004 01:03:00 AM
Is there any chance I can see an example on this? Just to see how it works... I mean, implemented, 'cause I tried to add this functionality, but I didn't succeed. Either I'm not pasting it well, or either I'm pasting it in a wrong part of the template's code. Thanks.
By
césar, at
11/03/2004 06:10:00 AM
If you browse through some of the recent archive pages on the site, you can find a few places where I use it. I don't know what other examples I can show you.
What are your problems? Is Internet Explorer showing any javascript errors?
By
ZaijiaN, at
11/04/2004 03:01:00 PM
Okay, I just went thru your archives, and I saw your mod working, and with your kind permission I'd like to use it on my own blog. Anyway, I just found out what was wrong & why it looked so wild, and (again) if you allow me to use your code, I'll be thankful.
By
césar, at
11/05/2004 12:40:00 PM
Go for it, I posted it so I could share it!
By
ZaijiaN, at
11/05/2004 01:20:00 PM
This works brilliantly, thanks very much! Hopefully Blogger will include something like this in their next upgrade.
By
Peter Gasston, at
11/25/2004 06:07:00 AM
Hey dude,
I did a similer thing:
http://www.rootshell.be/~upadhyay/2004/10/i-did-it.html
To see it in action check out the archieves of Oct 2004 for example.
But yours is cooler!
Thanks,
--
Amit Upadhyay
By
amit upadhyay, at
11/28/2004 07:53:00 AM
hey im trying to implement yoru code and so far its good except that the posts start out expanded.. is that how they are supposed to work or are they supposed to start collapsed?
By
Mike, at
12/07/2004 06:06:00 PM
hey im trying to implement yoru code and so far its good except that the posts start out expanded.. is that how they are supposed to work or are they supposed to start collapsed?
By
Mike, at
12/07/2004 07:08:00 PM
ok, I double checked that all the spaces were removed and made sure i copied all the java as-is and im still having the same problem. It starts expanded and there is a link at the bottom of the post that says "expand post." when i click, it changes to "collapse post" and from there i can click and it will collapse it. I am on Firefox 1.0 here is a link to my site
http://mywebpages.comcast.net/onyxfrog/
thanks for all your help!
-MC
By
Mike, at
12/07/2004 07:37:00 PM
Mike, I don't see any posts with the show/hide functionality - did you give up?
I need to see a post that uses the show/hide, then I can diagnose the problem.
By
ZaijiaN, at
12/24/2004 04:13:00 PM
Thank you! I've been looking for a conditional expand and collapse.
By
Rachel, at
1/02/2005 12:03:00 AM
This comment has been removed by a blog administrator.
By
Uday - ಉದಯ, at
1/09/2005 06:23:00 AM
Wow, this is really a good job.
I have a comment about this but since I am not a programmer so I don't know it's possible or not.
Can "collapse post" go back to the original position of the post?
And I found that even I don't post "< div class="shortpost">< /div>" it still works all right.
Anyway, thank about the idea share. :)
By
Reder, at
1/09/2005 12:26:00 PM
Reder - Yes it can.
Add the line in bold to your existing javascript.
if (fullPostElement)
{
// show
if (postLink != 0)
{
fullPostElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
// hide
else
{
fullPostElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
location.href = '#'+postId; }
return false;
}
By
ZaijiaN, at
1/09/2005 06:12:00 PM
This comment has been removed by a blog administrator.
By
Reder, at
1/10/2005 06:26:00 AM
This looks so good. It's exactly what I've been looking for!
I'm having some trouble putting it together, though. I put in all the code but when I try to use the div tags, nothing shows up. Maybe I put it in the wrong spot, but I don't know.
I put the first block of code after '< style type="text/css">', the second after '< head>' and the third in the right spot.
I think I put the fourth one in the wrong spot. 'Immediately' after the div is too vague. After the end tag? The first part?
By
mAc Chaos, at
1/11/2005 03:20:00 AM
I had the exact same problem as the previous commentor. I solved the problem by inserting the code just before the "< /div>" rather than after (like I thought it said). Once I did that, it really did work exactly as I wanted it to and exactly as described.
By
Wodin, at
1/22/2005 09:18:00 PM
It shouldn't make a difference whether the code from step #4 is inside the "post-body" div or after it.
But hey, whatever works for you! :)
By
ZaijiaN, at
1/22/2005 09:33:00 PM
Hi, can it be used with the "peek-a-boo" comments?
http://help.blogger.com/bin/answer.py?answer=943&topic=41
because with that hack, you remove the "MainOrArchivePage" thing,
any help will be greatly appreciated.
By
Anonymous, at
2/04/2005 11:22:00 PM
Hi thanks for sharing.
I was wondering on ething a bit off the theme. If you publish through e-mail is there a way of using the code?
By
AquiQ, at
2/08/2005 04:55:00 PM
I had just found out about the publishing via e-mail and after posting the previous comment, the courier font used on the editor of the comments kicked in after a while and I tried sending the email in plain text...
I guess if I hadn't post the comment it would take me a bit longer.
By
AquiQ, at
2/08/2005 05:04:00 PM
I did the same read-more-funcionality using just CSS and is much more easy to use than this. Check my short tutorial in http://mentoliptus.blogspot.com/2005/02/resumen-expandible-inteligente_04.html
By
Nescolet, at
2/09/2005 09:49:00 AM
This is great. I'd be trying this out on my blog.
By
Onotheo, at
3/19/2005 10:57:00 AM
This comment has been removed by a blog administrator.
By
Lou Reynolds, at
3/23/2005 01:43:00 PM
Thanks for your work, got it working and it is super. I found that the Step 4 code wants to located after the
< $BlogItemBody$> but before the /div> tags enve if you haspeek a boo comments enabled as well. The other thing I noticed is you really don't need the shortpost wrapper to make this work.
< div class="shortpost">
DON"T REALLY NEED THIS
< /div>
Is there some other reason to suggest using it?
By
Lou Reynolds, at
3/23/2005 03:30:00 PM
Lou, the shortpost div is there just for the sake of completeness. You can leave it out without any consequences, although by leaving it in, you leave the option open to do something with it.
By
ZaijiaN, at
4/22/2005 12:37:00 AM
Help! I appreciate you're putting this up as a favour and allowing people to use it as they see fit. If you've got time I would love it if you could tell me what's wrong with my blog. For some reason, even though I've implemented the code and followed your instructions the posts do not expand - instead they load on their own page which bugs me something chronic! Can you help, please? I can e-mail you my template code if you want.
Many thanks
By
Gledster, at
4/24/2005 08:30:00 AM
I've made a backup copy of the template that didn't work and scrapped the one I was using and gone back to a blog without your code. For some reason your code didn't work in my blog like it 'should'. I tried to figure it out but my Javescript skills are rusty. I'd still appreciate help if you don't mind. My e-mail address is listed on my blog.
Thanks if you can help.
By
Gledster, at
4/24/2005 09:00:00 AM
I was looking for some way to do exactly what your script (or whatever this thing is called) does, with exatly the same question that you had already answered to Reder. It took me a while to find this place but it really was worthwhile!
I want to thank you a lot for your work. It's really helpful for people like my co-teamer and me that tend to write such loooooong posts :)
Even while I was trying it, another blogger has already asked how I did it: I'me giving him this link.
But I wonder if you would mind if I put a permanent link somewhere in the side of my blog crediting you for your work so people can find you more easily?
Thanks again.
By
Anónima, at
5/02/2005 05:15:00 PM
This comment has been removed by a blog administrator.
By
Andrew S., at
5/25/2005 01:34:00 PM
Ooooh... You are good !
By
Pax, at
5/26/2005 02:47:00 AM
I have been trying to get this to work and I finally have it close...but there is still a problem. Once the postings get past the side bars the text runs over. In other words, the text is not contained in the #main vertical division. Can you help with this?
By
One man, at
6/03/2005 01:34:00 AM
Hey bit off topic, but I was curious, is your menu on the right that lists posts by category automated, or is it done manually? I'm looking for a script that can help sort my posts in to category archives rather than just the standard dated archives on blogger. Your page is the closest I've seen so far. Please tell me its possible!
By
Unknown, at
6/10/2005 11:42:00 AM
Sorry TV Steve, I do the category listings manually :(
The lack of categorized posts is blogspot's achille's heel.
By
ZaijiaN, at
6/10/2005 05:08:00 PM
This comment has been removed by a blog administrator.
By
Justine, at
6/14/2005 04:40:00 AM
Please Help!
It expands for a second, then redirects to the post page.
My site:
http://bezelthai.blogspot.com/
Thanks!
By
Anonymous, at
6/28/2005 05:46:00 PM
Nevermind! It is fixed!
I forgot to deleat ONE space, and it totaly crapped up the whole thing!
Thanks for your informitive post.
-ev
By
Anonymous, at
6/28/2005 06:11:00 PM
sarazazaza, I visited your blog and it seems to work alright for me on FF 1.0.5.
By
ZaijiaN, at
7/19/2005 10:07:00 AM
thanks chu, i modified it a little for the conditional expandable post summaries. a little old fashioned way, lol
great stuff!
By
kwei, at
7/23/2005 02:04:00 AM
hi
about your catagories listings, would you write a tutorial on making that as well (the peak-a-boo part)? i would love to put that on my blog, but don't have the knowledge to do so.
thanks
By
jklkjfdasdf, at
10/26/2005 01:37:00 PM
Cassio, I do that all manually, as blogger doesn't do categories.
It boils down to 2 elements:
javascript code:
----------------------------------------------
function simpleShowHide(elementId)
{
var element = document.getElementById(elementId);
if (element)
{
if (!element.style.display) element.style.display = "none";
if (element.style.display == "" || element.style.display == "none")
{
element.style.display = "block";
}
else
{
element.style.display = "none";
}
}
}
----------------------------------------------
and the following template:
----------------------------------------------
<div style="cursor: pointer;" onClick="simpleShowHide('some_category_div_id');return false;">(+/-) some category</div>
<div id="some_category_div_id" style="display:none;">
<a href="some_post_1.html">Some Post #1</a><br/>
<a href="some_post_2.html">Some Post #2</a><br/>
<a href="some_post_3.html">Some Post #3</a><br/>
</div>
----------------------------------------------
By
ZaijiaN, at
10/27/2005 04:20:00 PM
Chu, I'm on Mac OSX browsing with Firefox 1.0.7 and this works great! Beats the Blogger expandable post summaries and show/hide links (I tried them both before finding your link on the Blogger hacks page). Two questions: (1) When my post expands, there is an extra line break or paragraph space inserted. Can I get rid of this? (2) Can I make the "expand post" (on my page I changed it to "read more") show immediately after the text of the short post, without any line or paragraph breaks? (That is, so it flows like the next sentence instead of a separate paragraph.) My blog is http://audreyrussell.blogspot.com and I've applied your code to the 30 Oct and 24 Oct posts. Thanks so much, this is fantastic!
By
highpowermom, at
10/30/2005 10:43:00 PM
Chu, I changed the div to span in the post template and that got rid of the extra line break, THANKS! However I still can't get the "Read more..." to appear inline with the text, it always appears on the next line. In the blog template, I tried changing the div to span in the code that displays the "Read more..." and "Collapse post" lines only, and that didn't change anything. For example, in the "Wilma! I'm ho-ome!" post on my blog (http://audreyrussell.blogspot.com), I would like the "Read more..." to appear inline with the last sentence of the short post; and when it expands, I would like the fullpost to appear as the next sentence instead of the next paragraph. Is there a way to do this?
By
highpowermom, at
11/06/2005 01:08:00 PM
Every time I try it, it puts my side navbar underneath all my posts. I'm getting completely frustrated with this. Could somebody take a look at it please?
Thanks!
Michael
http://themorphememan.blogspot.com
By
M James, at
11/11/2005 11:37:00 PM
It's awesome! Thank you so much.
By
Anonymous, at
12/13/2005 03:36:00 AM
How did you add categories on the right side bar.
Would you make your hack available?
By
Anonymous, at
12/28/2005 11:44:00 PM
I spent a lot of these last two nights trying to come up with similar stuff. My ideas are based on Gmail's message display interface. Check it out: http://yawar.blogspot.com/.
By
Yawar, at
1/19/2006 03:05:00 PM
Very very nice.
You are GOD!
By
Nebuchar, at
2/12/2006 04:28:00 PM
This comment has been removed by a blog administrator.
By
Aton A, at
3/04/2006 08:36:00 PM
BTW, the last comment on the page does not collapse properly when you are posting comments
By
Aton A, at
3/04/2006 08:37:00 PM
Thank you very much for your post regarding the cats.
By
Aton A, at
3/04/2006 11:12:00 PM
Chu, do you have any idea why I can't see my posts by clicking on the permalink? All I see is the comment section. Makes it difficult for others to link to individual posts. Any help would be appreciated.
Everything else works seemlessly, as advertised, thank you very much.
By
S. Schunk, at
4/05/2006 01:13:00 PM
my blog -- philomythos.blogspot.com
By
S. Schunk, at
4/05/2006 01:14:00 PM
Thank you very much. This is a great hack.
I would like to add the amount of words and pictures included in the hidden part of the post to my expand link, but I don't know how I could do this. Do you know wether it is possible or not?
By
Christian, at
4/14/2006 12:57:00 PM
hi Chu,
i came across ur hack on this site
http://pixnaps.blogspot.com/
and wanted to implement the expandable/collapsable feature pretty much the same way that this person has done...
i used ur hack on my blog but the link for expanding the post is just not appearing!
moreover while i was going thru the html code generated for the home page of my blog, then i saw that this show/hide more text was there for all the posts,will this link appear on all the posts? even those posts which are just ShortPosts???
thanks for ur work/help!
you can see what i have done at http://mere-do-paise.blogspot.com
i have used it in the post titled Addiction....
thanks again
By
MountCleverest, at
7/13/2006 06:00:00 AM
my sincere apologies for spamming ur blog with my doubt ridden comments...
anyways it seems to b working fine now....
dunno what was the problem before, just fixed by itself...
(no it wasnt reading-old-page-from-the cache issue as i always make a complete refresh)
thanks a lot for this amazing hack...
By
MountCleverest, at
7/13/2006 07:21:00 AM
hmm i m back...
and thats coz the problem with my blog is back too!
this time its not working well with Internet explorer...and working perfectly with firefox....
With IE(ver 6) it is totally ruining the look of my page..some weird 2 column look is coming with the side panel gone down south!
please see if you can help me with this, i have done nothing to the blog except post a few new posts and do the changes u suggested......
please help!!!
(http://mere-do-paise.blogspot.com)
By
MountCleverest, at
7/14/2006 05:33:00 AM
Troubleshooting note: You cannot put this CSS in a separate CSS file, it must be in your template, otherwise blogger will not interpret it correctly! If you have the problem where the post starts out fully expanded, but the links work correctly, this is why.
J/C: it would be possible to get a word/picture count for each post using javascript, however, I haven't coded anything like that.
By
ZaijiaN, at
8/22/2006 04:02:00 PM
Hi, great post, i THINK it works on my blog. the problem is, it doesnt expand or show the comments/post, it just takes you to the page, is that how it should be? thanks for the tip anyways, works beatifuly either way.
By
NemsMole, at
9/06/2006 05:46:00 AM
Thank you, thank you! It worked perfectly for me the first time, thanks to your clear instructions.
By
Elisson, at
11/12/2006 10:10:00 PM
Many, many thanks! I used your code, too, and also got it right on the first try thanks to your excellent instructions.
By
Rahel Jaskow, at
11/28/2006 04:32:00 PM
i don't know if i thanked you or not, but i've been using the code for the past year or so, and it works perfectly.
now that blogger beta is released, would you write an update to an zml implementation to this show/hide post code?
cheers
By
jklkjfdasdf, at
12/10/2006 02:23:00 AM
Cassio:
I'll write an update eventually, i'm just a little hesitant about switching over to blogger beta.
I'd rather not break things that work, so once I figure out how to copy all my posts over to a new beta blog, then I'll start working on the hack.
By
ZaijiaN, at
12/10/2006 02:33:00 AM
This can be done without the post template. Use a JS span length trick.
Example in psudo code:
if length(post)>200 then left(post,200) --> short post and all --> long post
By
Aton A, at
12/17/2006 02:16:00 PM
comperr, that's nice for an automatic shortpost, but not if you want to be able to control on a post-by-post basis exactly what shows up in the beginning. I would think most times authors would want to determine the first few paragraphs to show up rather than the first 200 characters.
By
ZaijiaN, at
12/18/2006 09:56:00 AM
hi Chu,
thanks for youre wonderfull hack, i am using it for about a year now. and it worked fine.
(and there comes the but) but..I changed the layout for the blog of my parents..and i just can't seem to get it right. I can't find the problem myself, so I'm hoping you could find some time to help me out...
I think evrything is right in place..but i don't see the "show more"link in the post (I changed "show more" in "lees verder" dutch for "read more")and the post stops with the short post and leaves the rest hidden.
If you have the time to help me out, I'll be most greatfull. the url is loeloechi.blogspot.com( a blog I use for trying out new layouts and hacks...so i won't mess up the real ones..I can be slightly chaotic from time to time.)
thanks
greets loeloe
By
loeloe, at
1/16/2007 04:18:00 PM
These comments have been invaluable to me as is this whole site. I thank you for your comment.
By
Anonymous, at
6/09/2007 05:09:00 PM
After spending hours trying to find a site where this explanation would be "dummy-understandable", I fuond your blog... thanks a lot !
By
Samuel Morales, at
6/17/2007 04:14:00 PM
^^^ speak up ^^^