Cara Membuat Readmore atau Baca Selengkapnya Versi 2

Kalau kemarin kita sudah pernah dibahas kita bahas dulu ( Sudah baca belum?, kalo belum baca dulu gih di sini ), kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita selanjutnya. Untuk Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu : Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain. Dan itu akan lebih mudah dan praktis bagi yang ingin menyimak trik ini silahkan langsung ikuti trik berikut ini :

1. Login ke Blogger dulu

2. Pilih Layout --> Edit HTML

3. Back-up dulu template kamu dengan kilik tulisan Download Template lalu simpan.

4. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget

5. Kopi kode berikut ini dan taruh tepat diatas kode </head>

&lt;/span&gt;<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

6. Kalau sudah cari kode ini

<div class='post-header-line-1'/>

7. Kemudian cari kode berikut ini <div class='post-body entry-content'> dan ganti menjadi

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

8. Cari kode berikut ini <p><data:post.body/></p>
9. Tambahkan kode ini 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>

10. Hingga semuanya menjadi :

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

11. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
12. Lalu simpan template.
13. Pilih menu Setting -->> Formatting
14. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">


</span>

Selesai dech, semoga sukses ya