Menambah Fitur “Read More” pada Blogger

Yah ini adalah posting pertamaku tentang web, terasa bersemangat untuk memperdalam ilmu tentang web. Yang menjadi fokusku belakangan ini dan sering terjadi sejak aku memulai petualanganku di belantara web adalah sederhana saja. Gimana sih caranya supaya posting di blogger yang jadi tempat hosting selama ini, ditampilkan hanya sebagian saja, tidak semuanya ditampilkan. Sebabnya tidak lain adalah banyak dari postingku yang cukup panjang untuk dijadikan satu halaman, jadinya tidak enak dilihat dan mungkin terlihat amatiran. Mauku seperti yang juga banyak terlihat di website/blog lain yang menunjukkan sebagian posting, selain itu ada link yang menuju ke satu halaman yang menunjukkan posting secara keseluruhan.
Setelah mencari dan mencari, akhirnya ketemu juga. Caranya tidaklah sulit, tidak serumit yang kita bayangkan. Apalagi jika kita punya teknik/pengetahuan dasar tentang dunia web. Sesuai dengan judulnya, tips ini ditujukan untuk pemakai jasa blog dari blogger.com. PERHATIAN! Sebelum melakukan ini, sangat disarankan backup dulu template Anda buat jaga-jaga. Langkahnya adalah seperti ini.

Langkah 1 - Edit kode template.
Untuk bisa melakukan ini, kita harus login dulu ke account blogger kita. Setelah berhasil login, biasanya akan ditampilkan halaman dasbor. Pilih blog yang diinginkan jika lebih dari satu dan klik “Tata Letak”. Selanjutnya pilih “Edit HTML” dan pilih pilihan (di centang) “Expand Template Widget”. Dari sini kita dapat melihat kode HTML dari template blog kita, yang perlu dilakukan adalah cari string (dengan menekan Ctrl+F) “<data:post.body/>”. Jika ketemu, akan terlihat baris kode seperti ini:
<p><data:post.body/></p>
Yang perlu kita lakukan adalah menambahkan beberapa baris kode sebelum dan sesudah baris kode diatas. Untuk baris sebelumnya copy + paste 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>
Dan untuk yang sesudahnya copy + paste kode berikut.
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
Setelah penambahan kode-kode diatas hasil akhirnya kira-kira akan menjadi seperti ini.











Dengan bagian yang berwarna kuning adalah kode-kode yang kita tambahkan. Pada tiap posting kita akan terdapat link “Read more…” pada bagian terakhir, jika mau ganti tulisan lain tinggal ubah saja tulisan tersebut sesuai dengan selera.

Langkah 2 – Menambahkan class tag pada template posting default.
Kembali lagi ke halaman dasbor, pilih blog yang diinginkan kemudian klik pada “Pengaturan” dan pilih “Format”. Pada bagian paling bawah ada pilihan “Template Posting” yang kita isi kode-kode dibawah ini. Dan setelah selesai simpan perubahannya.
<span class="fullpost">

</span>

Langkah 3 – Tambahkan posting baru.
Kita sudah melakukan segala sesuatu yang diperlukan. Selanjutnya kita coba dengan posting baru. Ketika kita klik “Posting baru”, maka pada kotak posting akan terdapat tag-tag seperti pada langkah 2 secara otomatis, jika tidak ada berarti kita salah melakukannya, mungkin ada yang kurang atau salah tempat, lihat lagi langkah-langkah sebelumnya. Kata-kata yang kita ketikkan sebelum tag <span class="fullpost"> akan terlihat pada halaman utama, Kita bisa mengetikkan kata-kata selanjutnya diantara tag <span class="fullpost"> dan </span>. Untuk ilustrasinya lihat contoh gambar dibawah ini.









Catatan: Jika ada posting lama sebelum fitur ini ditambahkan, mungkin kita ingin mengganti tiap posting dengan tampilan yang sesuai dengan fitur ini. Untuk itu kita mesti melakukannya secara manual pada tiap posting dengan menambahkan tag <span class="fullpost"> dan </span> pada tempat yang diinginkan.