Thursday, September 21, 2006

Non-Beta Super Peek-A-Boo Posts (improved)

For all you Non-Beta users: we now present our Improved Super Peek-A-Boo Post for Non-Beta. It has autoscrollback, so that after collapsing the post it scrolls back to the top of the post.

You can see it in action at Xenofon.

Step 0:
Backup your template.

Step 1:
Add Ramani's Javascript-code to the head of your template, just below the <head>:
<script type="text/javascript" src="http://www.anniyalogam.com/widgets/hackosphere.js"></script>

Step 2:
Look up the post class in your template, and add the red code:


<!-- Begin .post -->
<div class="post"
 id="<$BlogItemNumber$>1" ><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

<div class="post-body">>

<div>
<MainOrArchivePage>
<style>#fullpost {display: none}</style>
</MainOrArchivePage>

<$BlogItemBody$>
<MainOrArchivePage>
<span id="showlink"><a href="javascript:showFull('<$BlogItemNumber$>1')">Read More...</a></span>
<span id="hidelink" style="display: none"><a href="javascript:hideFull('<$BlogItemNumber$>1')">Collapse...</a></span>
<script type="text/javascript">checkFull('<$BlogItemNumber$>1');</script>
</MainOrArchivePage> 

</div>
</div>

Now save your template.

Step 3:

In your settings, add the following lines to the post template:

Type summary here
<span id="fullpost">
Type rest of post here
</span>