7.23.2009

expandable post tutorial

If you're going to post up something fairly lengthy, you now have the option of collapsing it into an expandable post to save space. [Read Full Post]

I added the code to the template, so it'll always show up when you open up the New Post window. It'll look like this in the Edit Html tab:

<a aiotitle="click to expand" href="javascript:togglecomments('POST TITLE HERE')">[Read Full Post]</a> <div class="commenthidden" id="POST TITLE HERE"></div>

You can go into the Edit Html tab and just delete it if you're posting something short. It won't affect your post at all. If you do want to use it, there are just a few things to know:

1.) Enter all of the stuff you want to be shown (i.e. not initially hidden) before the code.
2.) Enter all of the stuff you want to be hidden right before the </div> at the end.
3.) Copy/Paste the title of your post in the two areas where it says POST TITLE HERE in the code.

Thus, for this particular post, the code looks like this:

If you're going to post up something fairly lengthy, you now have the option of collapsing it into an expandable post to save space. <a aiotitle="click to expand" href="javascript:togglecomments('expandable post tutorial')">[Read Full Post]</a> <div class="commenthidden" id="expandable post tutorial"></div>
I added the code to the template, so it'll always show up when you open up the New Post window. It'll look like this:

The blue text is what appears regardless of whether the post is expanded, the red is the title of the post, and the purple is what appears after you click [Read full post].

Also, for easy access, I added links to the tutorials posted so far on the sidebar to the right.

Cheers.

No comments:

Post a Comment