Wednesday, October 31, 2007

Membuat Fitur "Read More" di Blogger

Setelah mem-posting sedemikian banyak artikel, saya merasa ada sesuatu yang tidak sedap dipandang di blog ini. Ya, setiap artikel selalu tampil penuh di halaman muka, tidak seperti di situs-situs lain (misalnya situs berisi informasi atau berita) yang hanya menampilkan beberapa kalimat teratas dari sebuah berita di halaman muka dan menyediakan link untuk membaca berita secara penuh (banyak orang menyebutnya "read more"). Saya pun mencari pengaturan untuk menampilkan artikel seperti ini di Blogger dan hasilnya nihil. Akhirnya, ya tanya kepada Adik Google (karena lebih muda dari saya). Setelah ketemu pun tidak begitu saja saya aplikasikan. Baru di referensi ketiga, saya merasa pas. Ini caranya.
  1. Login ke Blogger Setelah login, pastikan Anda berada di halaman "Panel Kontrol".
  2. Klik "Layout" di menu "Manage"
  3. Klik "Edit HTML" (submenu dari "Template")
  4. Beri tanda centang pada "Expand Template Widget"
  5. Cari kode <p><data:post.body/></p> Gunakan Ctrl+F dan masukkan kata kunci post.body untuk memudahkan pencarian.
  6. Timpa kode <p><data:post.body/></p> dengan kode berikut <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'>Baca selengkapnya...</a> </b:if>
  7. Hasilnya Potongan kode di class "post-body" adalah sebagai berikut: <div class='post-body entry-content'> <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'>Baca selengkapnya...</a> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> Catatan: Baris pertama dari potongan kode di atas bisa <div class='post-body entry-content'> atau <div class='post-body'>.
  8. Klik "Simpan Template"
  9. Agar kode ini berfungsi, kita harus menambahkan dua baris kode di postingan, yaitu <span class="fullpost"> </span> Tempatkan kata-kata yang akan ditampilkan di muka di atas kedua baris kode tersebut dan kata-kata sisanya di antara kedua baris kode tersebut. Catatan: Jika kamu ingin postingan lama juga mempunyai "read more", lakukanlah hal ini juga terhadap semua postingan tersebut. Tips: Untuk memudahkan dan agar tidak lupa, buatlah template posting dengan isi kedua baris kode tersebut. Caranya, masuk ke "Pengaturan" -> "Format" kemudian ketikkan kode tersebut di kolom "Template Posting" dan klik "Simpan Pengaturan".
Selamat mencoba dan saya tunggu komentar kamu.