Thursday, December 28, 2006

Expandable posts with the new Blogger


Update: Thanks for visiting my blog. You landed here because you were looking for a way to have expandable posts. This entry, however, is five years old. It still works, though, so if you want to do it this way, you can. However, it may be better to just use the <!-- more --> tag. This adds a break in your post that does quite the same thing.

I've just managed to reinstate the expandable posts using the new Blogger template. The method is quite similar to the old Blogger. However, owing to the somewhat complicated (okay, newer) structure of widgets and tags, placement is a bit more sensitive.

Here's how I did it.

1. Just before the closing </head> tag (and after the closing </b:skin> definition), add the following code:

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {
display:inline;
} 
<b:else/>
.fullpost {
display:none;
}
</b:if>
</style>


It essentially does the same thing in the old Blogger, it's just formatted using the new Blogger conditional tags. It should also fall outside the skin definition as the block does not recognize conditionals.


2. Add conditional code to display "Read more..." within the post. Placement is important. It should be included within the widget code. You'll have to expand the widget templates and look for the div block which says "post-body." Include the code between that and the "post-footer" div block.



<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<!--Peekaboo code-->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more...</a>
</b:if>

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
</span>




3. Finally, in the actual posts, make use of the <span class="fullpost"> tags as before.

24 comments:

  1. Thanks a million! that was driving me crazy!!

    ReplyDelete
  2. Thanks so much for sharing this. It definitely did the trick.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. I've been using this code for a while but last week it stopped working with I.E. Still works with Firefox though. Any ideas? thanks.

    ReplyDelete
  5. I've been trying to figure out how to make the read more...only appear when there's actually more stuff to read. Any ideas?

    ReplyDelete
  6. Thanks for the tip, Dom. Why isn't Blogger's instruction in doing this as simple and straightforward as yours?

    ReplyDelete
  7. Hi! Thank you so much for your post! But it does not work for me... Actually, I didn't find the div block in the HTML code: I only have this:

    .post-body {
    background:url("http://www.blogblog.com/harbor/divider.gif") no-repeat center top;
    padding-top:12px;
    }
    I placed the peekaboo code after that, but it won't work... Any ideas?
    Thanks in advance!!!

    ReplyDelete
  8. Ok, it works, but kind of weird: the span class="fullpost" tags only hide what is placed after span class="fullpost"... It is driving me crazy!

    ReplyDelete
  9. This works great when using Firefox as a browser. When using IE, it basically strips my blog of all it's content. To see what I mean, check out my blog...is there anyway to fix this? I've been trying to figure anything out as a workaround so it's compatible with all browser types but I keep hitting walls.

    http://turnyourearsoff.blogspot.com/

    ReplyDelete
  10. Hi, Fred: I don't have IE as I don't use Windows. But if you're seeing this site correctly on IE, it means that it may have something to do with the placement of the style block. Please reread point #1 of the steps.

    ReplyDelete
  11. Hi, thanks for posting this hack. My problem is that after editing the template, the text withing the codes is hidden, but there is no Read More link to click. what to do?

    ReplyDelete
  12. Like Crosstown Coalition, I was also wondering if it is possible to make the "Read more..." only appear when there is actually more content to read. I don't want the "Read more..." to appear when I do short posts. Any help?

    ReplyDelete
  13. Hi, Brandon: this probably requires some Javascript to manage.

    ReplyDelete
  14. The problem i've found with most sites who offer these kinds of things is that they can't allow for what might be also within those code blocks, so then it become hard to know where to place something. When you say between "this" and "that", there might be "other" and "other" in between "this" and "that" also...

    Here's what that area of my code looks like without the code i'm supposed to paste. I have tried it in all different areas in that section and i get error messages like p needs a closing tag and the like....so where do i place it in the code section below?

    div class='post-header-line-1'/ >
    div class='post-body entry-content' >
    p >data:post.body/ /p

    div style='clear: both;'/ !-- clear for photos floats --
    /div div class= 'post-body'

    p data:post.body / /p
    div style='clear: both;'/ !-- clear for photos floats --
    /div


    div class='post-footer'
    p class='post-footer-line post-footer-line-1'
    /span



    (i had to omit brackets so it would let me put this code thru)
    Thanks for any help.
    Jae

    ReplyDelete
  15. Jae: just look for the closing </head> tag and place the code just before it. You can't miss it. There's only one such tag.

    ReplyDelete
  16. Thanks, but i already have that one...notice, i was referring to the second set of code that goes in the div area. You said, "You'll have to expand the widget templates and look for the div block which says "post-body." Include the code between that and the "post-footer" div block."

    that's the code i'm referring to.
    thanks,
    Jae

    ReplyDelete
  17. Hi, Jae: oops, my bad.

    If it makes things easier for you, mail me your template file (dominique_cimafranca at yahoo-dot-com) and I'll fix it for you. Really hard to look through the code without the brackets.

    ReplyDelete
  18. it works!!! if you want proof visit my site

    http://taylorsadvicecolumn.blogspot.com/

    thank you for the code!!!
    -taylor

    ReplyDelete
  19. Hey!!! I have a question. I've got my own blog, working with a similar code. (not exact)
    i'd like to be able to hide the
    div class='post-footer' when fullpost is hidden. That way until i click "read more" or whatever the post-footer is hidden.

    i've been finding it difficult to find a way to do this while using if and else tags

    Any help will be appreciated.. any suggestions or directions will be helpful too.. if u can find a solution to this i'd gladly place a link from my blog to urs.

    I can also provide u with a link to my blog if u need and any code u want to look at.

    looking forward to your reply.
    -Will Mckay

    ReplyDelete
  20. Hi, Will:

    It should be easy enough

    <b:if cond='data:blog.pageType != "item"'>
    .post-footer {
    display:none;
    }
    <b:else/>

    ReplyDelete
  21. gosh. i've always wanted to do this. i looked it up and stuff but i got fed up with the entire thing. so i didn't bother. :p lazy, lazy.

    ReplyDelete
  22. so does this expand on the page then or still open a new window of the read more content?

    ReplyDelete