Cara Membuat Read More (Baca Selengkapnya) di Posting Blog

Setelah membuat beberapa postingan, mungkin halaman utama blog Anda menjadi penuh dan terlalu panjang ke bawah sehingga menyulitkan pembaca/pengunjung blog dan bahkan mungkin juga merepotkan Anda sendiri untuk membaca satu per satu postingan karena akan mengakibatkan banyak menggunakan tombol scroll pada mouse. Apabila ini terasa mengganggu, Anda dapat menggunakan teknik menampilkan sebagian isi tulisan saja dan menyertakan link yang berfungsi untuk menampilkan keseluruhan isi tulisan. Sebagai contoh adalah tulisan +/- Selengkapnya seperti yang terdapat di bawah ini:


Langkah-langkah untuk membuat +/- Selengkapnya seperti tadi adalah sebagai berikut:

1. Klik "Kustomisasi" dari menu di pojok kanan atas blog Anda atau klik "Tata Letak" dari dasbor Anda.

Setelah itu klik menu "Edit HTML" dan beri centang pada kotak kecil bertuliskan "Expand Template Widget"

2. Kemudian cari tulisan

</head>

di dalam kotak HTML Anda dengan menekan tombol ctrl+f pada keyboard Anda.

Sudah berhasil menemukannya?
Jika sudah, silakan copy code di bawah ini:

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

dan paste persis di atas kode </head> tersebut sehingga menjadi seperti yang terlihat pada gambar sebagai berikut:



Sudah sama seperti gambar di atas?

3. Lalu cari kode <div class='post-body entry-content'> , tentu saja dengan menggunakan kolom find seperti tadi, kalau sudah ditemukan, ganti kode <div class='post-body entry-content'> tersebut dengan kode sebagai berikut:

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

sehingga menjadi seperti yang tertulis pada gambar sebagai berikut:


Pastikan dulu bahwa Anda sudah mengganti kodenya dengan benar.

4. Setelah itu cari kode berikut:

<data:post.body/>

dan paste kode berikut ini persis 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>

Last check, kodenya akan menjadi seperti gambar di bawah ini:


Setelah itu, klik "SIMPAN TEMPLATE".

Jika template gagal disimpan, periksa lagi HTML Anda apakah sudah benar-benar sesuai.
Jika berhasil, maka kini Anda telah memiliki pengaturan tampilan blog yang memungkinkan Anda untuk menyembunyikan sebagian isi tulisan.

Caranya adalah: setiap kali Anda mem-posting tulisan Anda, sisipkan tulisan ini:

<span id="fullpost">

di bawah tulisan yang ingin Anda tampilkan (berarti di atas tulisan yang ingin Anda sembunyikan).

Dan selalu akhiri tulisan (posting) Anda dengan kode berikut:

</span>

Contohnya seperti ini:

(tulisan yang ingin Anda tampilkan)

<span id="fullpost">

(tulisan yang ingin Anda sembunyikan)

</span>

Silakan melihat-lihat hasilnya di halaman utama blog Anda.


Please note: Trik ini saya dapatkan dari blog milik Mas Kendhin yang beralamat di http://www.trik-tips.blogspot.com sehingga seluruh script yang ada di tulisan ini adalah murni hasil copy paste dari blog milik Mas Kendhin. Saya hanya mengubah gaya penulisan dan penjelasan lebih detail beserta gambar untuk memudahkan bagi para pemula seperti saya. Terima kasih, especially for Mas Kendhin for your useful script.