Membuat "Read More" Di Blogspot

Artikel-artikel yang menarik dan panjang, apabila kita tampilkan secara keseluruhan di halaman depan, bisa jadi akan memakan tempat dan yang pasti sangat membosankan pengunjung. Untuk bisa "menahan" pengunjung agar tetap betah berlama-lama di, kita harus mampu menyajikan abstraksi yang menarik dari artikel-artikel yang kita posting di blog kita. Semakin baik dan singkat abastraksi yang kita buat tentunya akan semakin membuat penasaran pengunjung, menghemat halaman, juga akan mampu menampilkan lebih banyak artikel yang kita posting tanpa halaman yang terlalu panjang.

Aku baru saja mepraktekkannya. Fiuhhhh, lelah sekali. Secara postingan gue sudah mencapai 26. Tapi gpp, demi kenyamanan dan keindahan blogku. Artike ini aku ambil dari sebuah blog berjudul Cangkruk'an Rekkkk. Suwun mas atas infonya. Sesama blogger dari Gresik harus saling membantu ya :D

Secara lengkapnya berikut adalah cara untuk menghadirkan absyraksi saat kita memposting. juga untuk meng-edit bagi yang sudah terlanjur memposting artikel yang panjang, agar postingan tersebut tampil lebih singkat, menarik dan membuat penasaran pengunjung.

Berikut prosesnya:

CARA SETTING

1. Buka template --> edit HTML

2. Kasih tanda tik/cek menu "expand widget template"

3. Cari kode berikut di TEMPLATE blog Anda:

<div class='post-header-line-1'/> <div class='post-body'>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>

5. Di Bawah kode di atas ada kode html sbb:

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

6. Nah, di antara kode

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

dan kode

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

pasang kode html ini:

<a expr:href='data:post.url'>Read More......</a>

</b:if>

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

<div class='post-header-line-1'/>

<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>

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

<a expr:href='data:post.url'>Read More......</a>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

8. Klik SETTING, terus klik FORMATTING. Di paling bawah ada kotak kosong disamping menu POST TEMPLATE. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost" >

</span>

Jangan lupa klik SAVE apabila sudah dipasang.

9. Klik SAVE. Selesai.***

CARA MEMPOSTING

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost" >

</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class="fullpost"> dan </span>.

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS

2. Klik EDIT di artikel yg akan diedit.

3. Pasang kode

<span class="fullpost"> di bawah paragraf yang akan ditampilkan. Dan pasang kode </span> di akhir artikel

Ingat kode hanya ada SATU kode

<span class="fullpost"> dan </span>. .

Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

Selamat mencoba..!