Cara Membuat Read More Versi 2

Seperti yang udah saya janjikan sebelumnya, kali ini saya akan bahas bagaimana cara membuat readmore versi 2 (terserah mau dikasih nama apa), tutorial ini pokoknya terusannya yang versi 1. Pada cara membuat read more sebelumnya atau boleh dibilang versi 1, jika kita klik link read more nya maka browser akan meload lagi halaman web kita. Di versi 2 ini, jika kita klik link read more maka keseluruhan isi artikel akan langsung tampak di bawahnya. Jadi tidak meload halaman baru. Mau tau gimana caranya?

Berikut Cara Membuat Read More Dengan Javascript:

1.  Login ke akun Blogger anda

2.  Pilih Layout > Edit HTML, lalu centang Expand Widget Templates.

3.  Cari kode </head> lalu pastekan kode berikut tepat di atasnya:

<script src='http://creatingwebsite.googlecode.com/files/readmorev2.js' type='text/javascript'/>

4.  Jika sudah, cari kode <div class='post-header-line-1'/>, di bawahnya kan ada kode <div class='post-body entry-content'>. Ganti kode tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'>

5.  Sudahkan? Selanjutnya cari kode <p><data:post.body/></p>, paste kode berikut tepat di bawahnya:

<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);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

6.  So, seluruh kode tadi menjadi seperti ini:

<div class='post-header-line-1'/>
<div class='post-body entry-content' 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);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Tulisan Selengkapnya... dan Ringkasan... bisa anda ganti sesuai keinginan.

7.  Klik Save Template untuk menyimpan perubahan
8.  Selanjutnya pilih menu Setting > Formatting
9.  Scroll ke bawah dan temukan kotak Post Template, lalu paste kode berikut kedalamnya:

<span id="fullpost">
</span>

10. Klik Save Settings

Dalam membuat postingan, letakkan abstraksi atau pembuka postingan anda sebelum kode <span id="fullpost"> dan sisa nya letakkan diantara kode <span id="fullpost"> dan </span>.

Selesai deh readmore-nya. Ehh.. belum, kurang dikit ada yang lupa!!

Lalu gimana buat yang sudah pakai read more versi 1? Ya tinggal update aja ke situs providernya… eh, kok malah kayak software? Begini, buat yang sudah pakai read more versi 1, anda tinggal mengubah sedikit kode read more yang lama..

Caranya:
1.   Kode read more yang lama kan seperti ini:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

2.   Hapus kode yang berwarna merah lalu ikuti langkah-langkah di atas.

3.   Jangan lupa ubah juga isi Post Template dengan:

<span id="fullpost">
</span>

Gimana, mudah kan? Untuk versi advanced atau versi yang lebih rumit akan saya sampaikan minggu depan karena saya lagi ada TAMU........ Sabar yah.

Selamat mencoba…