Saturday, October 24, 2009

Expandable Blogger Posts

3 comments  

This tip can be used in your blog or web site to hide long posts or articles. Inserted of navigating to another page, using this tip you can wrap things like screen shots and source codes that reader doesn’t want to see at the page load.

First go to "Edit HTML" page.

Then find the <head> and </head> tags.

First paste this code between <head> and </head> tags in your HTML code. 

<style type='text/css'>
 .commenthidden {display:none}
 .commentshown {display:inline}
</style>
<script type='text/Javascript'>
function togglecomments (postid) {
 var whichpost = document.getElementById(postid);
 if (whichpost.className=="commentshown") {
  whichpost.className="commenthidden"; }
 else { whichpost.className="commentshown"; 
 }
}
</script>

Then put the things that you want to hide between following div tag. 

<div class="commenthidden" id="yourDivId">
    your content goes here
</div>

Note: Here "yourDivId" should be unique one. That means if you are going to use this more than one time, you have to replace "yourDivId" using unique name.

3 comments:

  1. Olive GreenMarch 3, 2010 at 10:42 AM

    I can't believe that this worked! I've tried four or five other methods, but none of them worked (and it's getting harder to find code that'll work with Classic Template — and I just _refuse_ to switch to the new one), and I only ended up with a massive headache. But this one worked on the first try. Brilliant!

    ReplyDelete
  2. Saranga RathnayakeMarch 3, 2010 at 11:30 AM

    @ Olive Green,
    I'm very happy to hear that from you. Thanks for your valuable comment !

    ReplyDelete
  3. MaruduJune 12, 2017 at 7:48 PM

    Hi Saranga,
    Thank you for valuable posts and I like your blog design very much - clear and neat!.
    I have two questions regarding blog design and if you could help, it will be great:
    1. I have same theme in my blog, how do I place the ads below title only in reading view (when the user clicks to read the whole article) and not in thumbnail view.
    2. Unfortunately, my blog was disapproved by Google for invalid click activity (not sure what exactly happened) but need your suggestions.
    Waiting for your reply. Thanks in advance!

    ReplyDelete