Collapsable post /Pendekkan post - BetaBlog

BI Version

As you can see in this post, it starts with only the summary, followed by the 'Read more...' link. Clicking the link expands to the full post. Now at the bottom you will find a 'Summary only...' link, that collapses the post back to its summary.
If you want to know how this hack works, first check out the original hack at Hackosphere. and super edition Beatiful Beta


BM version

Beta Blogger telah lahirkan hackers yang berkualiti. Dilihatkan disini. Wordpress tidak punyai kebolehan seperti function sebegini. Walaupun ramai peminat blog mengakui wordpress punya kelebihan berbanding dengan yang lain-lain. Blogger tidak kurang kehebatan nya dan jika lihat dari sini. Blogger punyai peluang yang cerah untuk ramai kembali penulis blog di Blogger. Mungkin ucapkan selamat tinggal kepada wordpress , tidak keterlaluan pemilik blog joomla atau mambo yang kian sepi sekarang beralih kepada Blogger. Insya-Allah. Lihat bagimana ia nya berfungsi dengan penuh kesederhanaan dgn mudah untuk membaca blog selepas anda memasukkan code function sedemikian.

Step 1:
Add the following javascript functions to the head of your template:

<script type='text/javascript'>

function showFullPost(id) {

post = document.getElementById(id);

var fullpost = post.getElementsByTagName('div');

if (fullpost.length != 0) {

fullpost[0].style.display = 'inline';

fullpost[1].style.display = 'none';

fullpost[2].style.display = 'inline';

}

}

function hideFullPost(id) {

post = document.getElementById(id);

var fullpost = post.getElementsByTagName('div');

if (fullpost.length != 0) {

fullpost[0].style.display = 'none';

fullpost[1].style.display = 'inline';

fullpost[2].style.display = 'none';

}

}

</script>


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>

<div>

<p><a

expr:onclick='"javascript:showFullPost(\"post-"

+ data:post.id + "\");"'

href='javascript:void(0);'>Read More...</a></p>

</div>

<div style='display:none'>

<p><a

expr:onclick='"javascript:hideFullPost(\"post-" +

data:post.id + "\");"'

href='javascript:void(0);'>Summary

only...</a></p>

</div>

</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.

<div id="fullpost">

Type the rest of your post here.

</div>