Saturday, May 21, 2011

Membuat Read More di Blogspot

Kadangkala sebuah situs memotong posting dengan fitur "Read more", "Baca selengkapnya", atau semacamnya. Ini merupakan trik agar posting blog ringkas dan memungkinkan untuk menampilkan banyak posting dan simpel.

Kini hal tersebut dapat dilakukan dengan mudah langsung dari editor posting tanpa perlu Edit HTML. Pertama, memutuskan dimana akan memotong posting, dan tempatkan kursor pada posisi itu:

Kemudian klik ikon toolbar Insert Jump break:

Mengklik ikon akan memasukkan bar abu-abu pada titik kursor, menggambarkan lokasi pemotongan posting. Bar ini dapat diseret, sehingga dapat dilakukan re-posisi pemotongan.

Jika tidak menggunakan editor posting baru, kita masih dapat melakukannya dalam mode Edit HTML dengan menambahkan intro "Read more" di posisi yang diinginkan.

Selesai dan siap untuk mempublikasikan posting. Gambarannya akan seperti ini:

Untuk mengubah teks Read More sesuai keinginan sendiri, Buka tab Layout | Page Elemen dan klik Edit pada widget Blog Post, kemudian ubah teks Post page sesuai keinginan.

Sebagai catatan, fitur ini tidak mengubah cara posting di feed. Untuk konfigurasi opsi feed buka tab Setting | Basic | Site Feed, dan mengedit Allow Blog Feeds.

Catatan: Untuk yang menggunakan template pihak ketiga atau toolbar posting tidak mendukung, lakukan penulisan intro Read more secara manual, yakni:

<!-- more -->

Untuk melakukan ini, akses tab Layout | Edit HTML, dan backup terlebih dahulu template dengan mengklik link Download Full Template di bagian atas halaman. Hal ini akan men-download versi XML dari template, sehingga jika kapan saja diperlukan dapat di-upload lagi untuk kembali ke sebelum perubahan.

Setelah back up template, kemudian klik kotak centang Expand Template Widget, dan memindai HTML untuk potongan berikut:

<data:post.body/>

Setelah ditemukan kode tersebut, sisipkan HTML berikut di bawahnya:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Klik Save dan selesai.

Selamat mencoba!

Sumber: Creating 'After the jump' summaries

No comments: