Cara Membuat Read More (Baca Selengkapnya)

Read More atau baca selengkapnya biasanya digunakan oleh para blogger dengan tujuan untuk mempersingkat tampilan pada sebuah postingan atau tulisan (contohnya seperti postingan saya ini). Untuk membuat read more diperlukan kode HTML yang di masukkan ke dalam template, disini saya akan sharing bagaimana cara membuat read more untuk blogspot. Tidak seperti read more yang biasanya digunakan para blogger, apabila kita mengklik tulisan read more atau baca selengkapnya maka akan dibutuhkan waktu untuk meload halaman tersebut sehingga menjadi sebuah halaman yang utuh, sedangkan yang akan saya sharing disini, apabila kita mengklik link atau tulisan read more maka halaman postingan akan langsung muncul dibawahnya tidak perlu meload halaman tersebut sehingga menjadi sebuah halaman yang utuh. Untuk mengetahui bagaimana caranya silahkan ikuti langkah-langkahnya di bawah ini :

Langkah Pertama :

• Login ke Blogger

• Pilih Layout kemudian pilih Edit HTML

• Back-uplah template Anda sebelum merubah isi template, klik Download Template lalu simpan.

• Centang pada kotak yang bertuliskan Expand Template Widget

• Copy kode dibawah ini kemudian paste diatas kode </head>

<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>

• Kemudian cari kode dibawah ini, untuk memudahkan pencarian tekan Ctrl+A kemudian Ctrl+F masukkan kode tersebut ke kotak pencarian (dibawahnya akan muncul taskbar apabila menekan Ctrl+F)

<div class='post-body entry-content'>

• ganti kode tersebut dengan kode dibawah ini:

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

• Kemudian dibawahnya ada kode seperti ini

<p><data:post.body/></p>

• Tambahkan kode dibawah 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>

• Tulisan Selengkapnya dan Ringkasan boleh diganti dengan kata lain sesuai keinginan Anda

• simpan template Anda

Langkah Kedua :

• Pilih menu Setting kemudian pilih Formatting

• Pada bagian "Post Template", copy kode dibawah dan pastekan ke dalamnya lalu save setting

<span id="fullpost">


</span>

• Apabila ingin membuat postingan pilih mode "Edit HTML", tulis postingan yang akan ditampilkan sebagian, di atas kode<span id="fullpost">sementara sisanya letakkan di antara kode <span id="fullpost"> dan</span>

• Selesai dan Selamat Mencoba