PandoraBox: Membuat Read More / Baca selengkapnya Pada Postingan Blog

Membuat Read More / Baca selengkapnya Pada Postingan Blog

by Sapto Mexavriand kategori : blog

Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan.

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

Sig in di blogger dengan id sobat
Klik menu layout
Klik menu Edit HTML
Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah
Tunggu beberapa saat sampai proses selesai
Copy kode berikut, lalu paste tepat di atas kode </head>

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :

 <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' 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  saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div>

Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

Klik menu Pengaturan
Klik menu Format
Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting

 

Klik tombol Simpan Setting
Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :

 <span id="fullpost"> 





</span>

Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode , dan sisa keseluruhan artikel di simpan sesudah kode  dan sebelum kode .

Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.
Selamat mencoba !