Tips : Expand and collapse your post posts on New Template

- September 04, 2007

Pusing dengan readmore yang harus membuka halaman baru untuk membaca “Read More “ anda, ada tips jitu untuk mengatasinya.

Dengan cara ini maka read more anda tidak akan “menyimpang” ke sebuah halaman baru atau sebuah jendela baru.

Dengan cara yang akan saya bicarakan dibawah, maka anda akan membuka read more tetap dalam satu halaman itu saja, menggulungnya kembali, dan jika anda tidak ingin membuat read more, maka link “read more” anda tidak akan terlihat, tidak seperti read more yang biasanya.

Bisa anda lihat di blog saya, read more nya tidak akan membuka sebuah halaman baru lagi, hanya menampilkannya tetap di halaman ini juga dengan menampilkan link “read more “ di bagian bawahnya, dan untuk beberapa post saya yang tidak menggunakan “read more “ maka anda tidak akan melihat link “read more “ di bagian bawahnya.

Cara ini pertama kali di implementasikan oleh Ramani di blognya ; Hackshere. Lalu dikembangkan lagi oleh beautifullbeta. Dan inilah hasil finish yang bisa anda cicipi.

Ini adalah cara bagaimana anda mengimplementasikannya di blog andaLangkah pertama :
Backup template anda sebelum memodifikasinya, caranya :

1. Masuklah ke halaman template

2. Klik tab HTML

3. download full template, lalu simpan lah backup-an template anda

Langkah ke dua :

Silahkan tambahkan javascript ini tepat di bawah kode </head>

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

Langkah ke tiga :

Carilah kode includable id='post' di blog anda, code yang akan anda temukan adalah sperti berikut ( code dengan warna merah adalah code yang harus anda tambahkan )

<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;'/> 

</div>

</div>

Save template anda

Langkah ke empatBuka halaman setting anda, dan klik tab Formatting, lalu lihat kotak di bagian paling bawah, masukkan kode berikut
<span id=’fullpost’>

</span>

Sekarang setiap anda posting, maka secara otomatis code tersebut akan tampil di bagian HTMLnya, silahakn melihatnya di tab HTML di post editing anda. jika anda ingin menampilkan sebuah postingan tanpa embel embel “read more” dan “summary only”, cukup dengan menghapus code <span id=’fullpost”> dan </span> maka “read more” anda tak akan tampil. Gampang bukan