Tuesday, July 17, 2007

Read More v2

Salah satu fitur yang tidak di miliki oleh Blogger adalah fitur Read More. Fitur ini berfungsi memotong postingan kita yang terlalu panjang, sehingga isi posting yang tampil tidak banyak memenuhi halaman depan.

Pada Blogger help saya menemukan cara untuk mengatasi problem ini, namun sayangnya cara ini masih memiliki kelemahan, yaitu untuk link Read More selalu muncul di setiap postingan, baik untuk postingan panjang, maupun postingan pendek yang tidak ingin kita pangkas isinya.



Setelah melakukan sedikit googling, akhirnya saya menemukan cara lain yang lebih bagus untuk menambahkan fitur Read More ini. Untuk trik berdasarkan bahasa bulenya berjudul peekaboo expandable post namun tanpa mengurangi rasa hormat, untuk lebih dimengerti saya menterjemahkan ke bahasa indonesianya dengan nama Read More v.2 saja

1. Pada Layout - Edit HTML - jangan lupan untuk menconteng Expand Template Widget
2. sebelum tag </head> tambahkan script ini
3. ctrl+f <b:includable id='post'
4. Tambahkan dan sisipkan script warna merah berikut

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<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'>

<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 href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>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>

5. Save Template
6. Pada postingan yang ingin di pangkas masukkan scrip berikut melalui Edit Html

ini poting baru, mau lihat lengkapnya klik read more
<span id="fullpost">
ini kelanjutan dari read more nya
</span>

Kelebihan menggunakan Script ini:

  1. Link Read More hanya akan muncul pada posting yang menggunakan tag <span id="fullpost"> </span>
  2. Tampilan Posting menjadi lebih pendek, sehingga tidak memenuhi halaman
  3. Ketika Readmore di klik, Artikel yang di pangkas muncul, tanpa harus me reload halaman baru.

1 comment:

Anonymous said...

trims....meng......
powerfull...man

Mac-On-Linux Divider Bar