Postingan super-peek-a-boo

Elu bisa manjangin post dari mode summarry ke full post, bikin collapse juga bisa, dan kalo elu nggak punya post summary di pos-an elu, maka link "Read More..." dan "Collapse" enggak muncul juga,pokoknya asyik deh....

Kayak lu bisa lihat di pos ini, dimulai cuman summary doang, terus diembel-embeli link 'Read more...'. Kalo lu ngeklik link itu maka akan terhampar full post. Sekarang coba lihat dipalign bawah disitu ada link 'Summary only...', yang meng-collapse pos kembali ke bentuk summary.

Hack ini pertamakali dibikin sama Ramani di Hackosphere. Cuman ditambahin dikit biar bisa di collaps-kan.

Caranya begini nih :

Langkah 0:
Back-up template lu seblum lu utak-atik lebih lanjut!

Langkah 1:
Tambahin kode javascript berikut di bagian head template lu. Tarok tepat diatas tag </head>.


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


Langkah 2:

Cari includable yang bernama 'post' di template elu, dan ubah tepat seperti koding dibawah (kode yang berwarna merah yang harus ditambahin):


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

Sekarang, save template elu !

Langkah 3:
Di bagian tab Settings - Formatting ,lihat dibagian paling bawah dan masukin post-template berikut ini :

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


nah sekarang tiap post baru yang elu bikin akan berbentuk fullpost-span secara default. Jika postingan elu pendek, lu tinggal ndelete tag <span>
dari postingan eluh. ostingan elu bakal tampil penuh, dannggak ada link "Read more..." atau "Summary only".

Bagaimana cara kerjanya (skip bagian ini jika elu gak suka yang rumit-rumit).
Perubahan yang elu buat membikin setiap post-body terdiri setidaknya 3 span: fullpost-span that yang udah lu masukin di post-template, sebuah span untuk link 'Read more', dan sebuah span untuk link 'Summary only'. Karena mungkin ada span yag lain di postingan elu, maka setiap masing-masing 3 span punya id unik ('fullpost', 'showlink' dan 'hidelink' secara berurutan).
Pas elu buka blog elu di halaman utama, maka postingan elu bakal tampil kayak gini:


* Summary ditampilin (selalu)

* Full text disembunyiin (pertama div, lalu diset ke display:none)

* Read more terlihat (div kedua)

* Summary only disembunyiin(div ketiga, diset ke display:none)


Poatingan elu selalu punya id khusus, dan jika id akan nglewatin fungsi javascript showFull dan hideFull berurutan. Funsi tersebut menggunakan metode getElementsByTagName buat nanganin span itu, dan kemudian men-toggle cara mereka ditampilin.sebuah fungsi ketiga, checkFull, mmeriksa apakah sapn Fullpost itu ada. Jika nggada, kedua link itu bakal disembunyikan.