Membuat read more dengan Javascript

Biasanya nih kita memposting suatu tulisan dalam jumlah yang banyak dan cukup panjang. Sehingga jika digabung dengan tulisan-tulisan yang lain maka akan membuat semakin panjang. Masalah ini baru akan terlihat ketika kita melihat halaman utama pada blog kita.

Untuk kemudahan Anda, sebaiknya gunakan Mozilla Firefox. Saya akan memberikan tips untuk mempermudah pencarian. Gunakan kombinasi Ctrl + F untuk mengeluarkan kotak pencarian.
Selamat mencoba... Semoga Anda teliti...

1. Masuklah pada akun blogger Anda.
2. Kemudian masuk ke opsi “Tata Letak”, kemudian pilih “Edit HTML”.
3. Sebaiknya sebelum mengutak-atik HTML saya sarankan untuk men-download template Anda sebagai jaga-jaga jika gagal. Jika sudah mari lanjut ke langkah berikutnya.
4. Kita akan mulai mengutak-atik HTML. INI PENTING beri tanda centangpada kotak yang bertuliskan Expand Template Widget.
5. Salin kode berikut ini dan taruh tepat diatas kode </head>. (Gunakan Ctrl + F)
<script src=' http://h1.ripway.com/riphqi/readmore_js.js ' type='text/javascript'/>
6. Langkah selanjutnya cari kode di bawah ini. (Gunakan Ctrl + F)
<div class='post-header-line-1'/>
7. Temukan kode semacam ini <div class='post-body entry-content'>. Anda harus mengubah menjadi seperti ini. (PERHATIKAN WARNA!!!)
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
8. Kemudian cari lagi kode seperti ini <p><data:post.body/></p>.
9. Tambahkan kode ini tepat dibawahnya.
<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. Perhatikan maka kode yang sudah kita ubah dari tadi akan 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>
11. Untuk tulisan “Selengkapnya” dan “Ringkasan” bisa Anda ganti dengan apa saja, sesuai yang Anda suka.
12. Pekerjaan mengutak-atik HTML sudah selesai, Anda bisa menyimpannya.
13. Sebenarnya sudah selesai, tetapi ada beberapa langkah lagi agar cara ini benar-benar bekerja. Setiap posting jangan lupa untuk memasukkan kode di bawah ini. Anda hanya perlu menghafalkan kode ini, ini mudah!
<span id="fullpost">



</span>
Tulisan yang ada di antara kode span akan disembunyikan. Sebagai contoh.

Penulisan Kode	Hasil yang tampak
Tulisan yang terlihat, Tulisan yang terlihat. <span id="fullpost"> Tulisan yang tersembunyi Tulisan yang tersembunyi Tulisan yang tersembunyi </span>	Tulisan yang terlihat, Tulisan yang terlihat. [+/-] Selengkapnya...

14. Jika sudah Anda coba dan berhasil maka ucapkanlah Alhamdulillah...

Semoga tulisan ini membantu...