Membuat Read More Di Blogspot

Topics:

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>

 

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

One thought on “Membuat Read More Di Blogspot

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>