Super Peek-A-Boo Posts-Blogger Hack

In This Hack you can expand Posts from summary to full post, collapse them, and if you don't have a post summary in a particular post, the "Read More..." and "Collapse" links will not show up in your post.

This is how to implement it.

Step 0:
Back-up your template before modifying it.

Step 1:
Add the following javascript code to the head of your template. You can place it just above the </head>-tag.

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />


Step 2:

Find the includable named 'post' in your template, and change it so that it is exactly as shown below (the code in red has to be added):

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....

Save your template.

Step 3:
In the Settings - Formatting tab go to the bottom and enter the following post-template:

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


Now every new post you start will have a fullpost-span by default. If your post is short, you can delete the <span>-tags from the post. The post will be displayed in full, and no links with "Read more..." or "Summary only" will be displayed for that post.

How it works (skip this if you don't like tech stuff).
The changes you made to the code make that every post-body consists of at least 3 span's: the fullpost-span that you entered in the post-template, a span for the 'Read more'-link, and a span for the 'Summary only'-link. Because there might be other spans in your post, each of these 3 spans have a unique id ('fullpost', 'showlink' and 'hidelink' respectively).
When you open your blog on the main page, the post is displayed as follows:


* Summary is displayed (always)

* Full text is hidden (first div, set to display:none)

* Read more is shown (second div)

* Summary only is hidden (third div, set to display:none)


The post is given a unique id, and this id is passed to the javascript-functions showFull and hideFull respectively. These functions use the getElementsByTagName-methods to obtain handles to the spans, and then toggle the way they are displayed.
A third function, checkFull, checks if the Fullpost-span exists. If not, both links are hidden.

By Admin n E.K