Membuat Read More Atau Baca Selengkapnya di blog

 

Setelah Kita membuat postingan atau tulisan diblog, maka tulisan kita tersebut akan muncul di Homepage atau halaman depan Blog kita. Biasanya, Postingan kita tersebut akan tampil semuanya dari mulai awal hingga akhir, coba anda bayangkan jika ada 5-7 postingan yang ditampilkan penuh di halaman depan blog anda...maka akan memakan banyak halaman dan memanjang ke bawah..sehingga akan kelihatan tidak artistik.

Nah..untuk membuat supaya nampak bagus, maka kita perlu cara untuk membuat halaman kita tersebut cuma ditampilkan sekilas saja dan ditampilkan penuh di tempat yang lain, yaitu dengan cara pembaca mengklik "Baca Selengkapnya"....."Read More"......dsb.

Berikut adalah salah satu cara untuk membuat nya :

1. Login dengan Id Blogspot anda

2. Kemudian Pilih Dasbor....Layout....dan kemudian pilih Edit HTML

3. Jangan Lupa Centang "expand widget template"

4. Cari kode berikut ini di Template blog anda (tempatnya kira-kira pada 1/4 bagian bawah kode html) :

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

5. Jika Sudah ketemu, ganti kode diatas dengan kode dibawah ini :

<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><

Tulisan Read More bisa anda ganti sesuka anda.

6. Simpan Hasil Edit HTML tersebut

7. Kemudian Buka Setting, lalu pilih menu Formatting

8. Pada Post Template isikan kode berikut ini :

<span class="fullpost">

</span>

9. Klik Simpan

10. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut didalam tempat kita menulis postingan:

<span class="fullpost">

</span>

11. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> dan sisanya yaitu keseluruhan posting letakkan di antara kode :

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

12. Selamat Mencoba.

Tweet