Cara Membuat Read More Versi 2

Cara Membuat Read More Versi 2. Artikel sayafafan tentang bagaimana cara membuat readmore versi 2 (apapun namanya), 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

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

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>

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


Sekian dulu Artikel sayafafan tentang Cara Membuat Read More Versi 2