Cara Membuat Read More (Baca Selengkapnya) di Blog Versi Baru

Contoh read more

Read more atau baca selengkapnya adalah fasilitas untuk menyembunyikan tulisan yang panjang dan hanya menampilkan bagian abstrak dari artikel tersebut. Dan keseluruhan posting akan tampil ketika link read more diklik. Tips cara membuat readmore berikut ini adalah versi baru, sebenarnya sudah lama. Maksudnya bila kita klik tulisan Baca selengkapnya tidak perlu memanggil seluruh halaman, namun cukup bagian bawah saja dan tentunya akan menjadi lebih ringan.

Tips membuat read more ini Saya ambil dari blognya Kang Rohman. OK, langsung saja kita ikuti langkah demi langkah pembuatan post summary.

1. Silakan login ke halaman dashboard Anda di Blogspot.
2. Klik menu layout/tata letak.
3. Pilih Edit HTML.
4. Sebelumnya backup terlebih dahulu template yang Anda gunakan dengan memilih Download Template Lengkap. Tunggu sampai penyimpanan template Anda selesai.
5. Beri tanda centang pada tulisan Expand Template Widget, tujuannya agar keseluruhan template Anda ditampilkan.
6. Salin kode di bawah, kemudian letakkan di atas kode </head>.
<br /> <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' /><br />
7. Selanjutnya, tambahkan kode berikut ini pada kode template Anda, yang berwarna hitam adalah kode asli dari kode template dan berwarna merah adalah kdoe yang harus ditambahkan.
   
   
   
   
   
   
   
   
   

   <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/>&lt/a> <b:else/> <data:post.title/> </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;'/> &lt!--clear for photos floats--> </div> </div> .... rest of template code ....

Langkah selanjutnya adalah:

1. Klik menu Pengaturan.
2. Klik menu Format.
3. Salin kode berikut ini, kemudian letakkan pada kolom kosong yang disediakan.

<span id="fullpost"> </span>

4. 
   
   
   
   
   
   
   
   Klik tombol Simpan Setting, dan selesai.

Selanjutnya, cara posting artikel:

Ketika kita sedang menulis artikel, buka menu Edit HTML, jangan pilih yang menu Compose, tujuannya agar kode tadi bisa terlihat, yaitu kode:

<span id="fullpost"> </span>

Untuk artikel yang akan ditampilkan di atas tulisan Read More, maka letakkan tulisan di atas kode <span id="fullpost">, dan artikel sisanya agar tidak terlihat letakkan di bawah kode tadi dan sebelum kode </span>.

Jika Anda memiliki artikel yang pendek, sebaiknya dihilangkan saja tulisan Baca selangkapnya dengan menghapus kode tadi:

<span id="fullpost"> </span>

Selamat mencoba, semoga berhasil!
(Source:haryantony.com)