New [+/-] Read More...

Endah dan Mr. Cappuccino pernah menanyakan bagaimana cara membuat [+/-] Read More... dan [+/-] Summary only... seperti di blog ini. Aku pernah jawab dengan memberitahu link-nya: Super Peek-A-Boo Posts karena belum sempat untuk menjelaskan, sekarang aku akan coba posting di sini siapa tahu bermanfaat bagi yang lain dan lebih mudah untuk dimengerti.

[+/-] Read More... dan [+/-] Summary only... ini disebut Super Peek-A-Boo Posts, ini pertama kali di hack oleh Ramani tanpa: [+/-] Summary only..., kemudian oleh Hans dikembangkan dengan menambahkan [+/-] Summary only...

Jadi, Super Peek-A-Boo Posts ini kelebihannya dibanding dengan Read More versi yang lama, dia tidak perlu me-loading ulang.

Adapun cara untuk meng-instalnya:

Step 1:
Sign In, masuk ke dashboard, kemudian klik layout tab-edit html, Back-up terlebih dahulu template kita dan jangan lupa kasih centang pada expand widget templates, lalu Tambahkan kode javascript dibawah ini, letakan persis sebelum </head>-tag.


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


Step 2:
Cari kode 'post' di dalam template, dan ubah sehingga seperti dibawah ini. (Tulisan berwarna merah harus ditambahkan ke dalamnya)

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

kemudian Save template.

Step 3:
Klik Settings tab lalu masuk ke Formatting tab, pada bagian paling bawah pada Post Template ada kotak kosong, copy paste kode di bawah ini ke dalam kotak kosong tersebut.

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


kemudian Save Settings. Selesai.

Pada saat mau posting summary/ringkasan yang mau ditampilkan di muka ditaruh di Type your summary here. atau di atas <span id="fullpost"> kemudian untuk lanjutannya letakkan di Type the rest of your post here. atau diantara <span id="fullpost"> dan </span>

Untuk postingan yang pendek, anda bisa menghapus kode nya pada saat posting, dan seluruh posting akan tampil penuh tanpa [+/-] Read More... dan [+/-] Summary only...

PS: Untuk Endah sudah diimplementasikan- Great! =D> bagaimana dengan Mister? ;)