Membuat Read More Di Blogspot

Adakalanya jika tulisan kita terlalu panjang, halaman blog kita jadi kurang sedap dipandang. Nah, beberapa platform blog semacam wordpress, di editor sudah ada menu untuk memotong panjang tulisan kita, sehingga memunculkan link “Read More…” untuk membaca postingan kita secara penuh.

Bagaimana dengan blog yang berplatform blogspot?

Untuk yang berplatform blogspot, kita dapat menampilkan link ‘Read More…’ tersebut dengan sedikit mengutak-atik template yang kita gunakan. Berikut langkah yang harus dilakukan untuk membuat link ‘Read More‘ tersebut :

  • Masuk ke akun blogspot anda, pilih menu Layout, lalu submenu Edit HTML. Lalu centanglah kotak Expand Widget Templates untuk menampilkan seluruh code html dari template yang digunakan

  • Carilah kode </head> (lebih mudah menggunakan fitur search browser anda) dan letakkan kode berikut tepat diatasnya.

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

  • Lalu cari kode <p><data:post.body/></p> dan letakkan kode berikut tepat dibawahnya.

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>

  • Lalu klik Save Template atau Simpan untuk menyimpan hasil editan diatas
  • Selanjutnya pindah ke menu Settings dan pilih submenu Formatting, dan carilah setingan Post Template, lalu masukkan kode berikut dalam kolom tersebut.

<span class=”fullpost”>

</span>

  • Klik Save Settings untuk menyimpan
  • Selesai

Selanjutnya coba hasil setingan diatas dengan cara membuat postingan baru. Jika pekerjaan diatas sempurna dilakukan, maka saat kita akan menulis postingan terbaru, akan muncul dua baris kode html. Jika tidak muncul, pilih editor Edit HTML.

Lalu, dimanakah “Read More…” akan muncul ?

Untuk memotong tulisan dengan script diatas, perhatikan posisi sebagai berikut :

  • Paragraf pembuka dan akan ditampilkan harus berada diatas kode <span class=”fullpost”>
  • Sedangkan sambungan dari seluruh isi tulisan harus berada diantara kode <span class=”fullpost”> dan </span>

* Dengan editor baru yang diusung oleh blogspot saat ini, kita cukup menambahkan kode berikut setelah akhir paragraf yang akan kita batasi.

<!–– more ––>

Thanx mas Febri sudah  mengingatkan editor baru ini. Selamat mencoba.

Posted by bustomi on Dec 28th, 2009 and filed under Tips. You can follow any responses to this entry through the RSS 2.0. You can leave a response by filling following comment form or trackback to this entry from your site

2 Responses for “Membuat Read More Di Blogspot”

  1. Febri Harsanto says:
    January 28, 2010 at 10:04 pm

    Artikel yang bagus sekali Pak, tetapi saya mencoba dengan view html, dengan meninggalkan

    <!–– more ––>

    setelah kata terakhir, dengan harapan setelah kata terakhir tersebut muncul ‘baca selengkapnya’ atau ‘lebih lengkap’ dan lain-lain ternyata kebetulan bisa. Entah karena kebetulan ataukah keterbatasan pengetahuan saya, tetapi bisa menjadi read more.

    Salam
    FH

  2. bustomi says:
    January 30, 2010 at 8:30 am

    Iya mas, editor blogspot generasi saat ini sudah menyediakan fasilitas ‘read more’ ini, dan dengan editor yang saat ini, hanya dengan menambahkan seperti yang mas febri tuliskan, ‘readmore’ akan muncul seperti garis lurus (seperti di wordpress.com).

Leave a Reply