Cara Menampilkan Read More di Postingan

Pada saat awal-awal menggunakan Blogger, saya merasa ada sesuatu yang kurang dari Blogger ini. Ketika saya membuat tulisan yang agak panjang, tulisan akan ditampilkan seluruhnya di halaman depan (Home). Saya ingin hanya paragraf pertama (post summaries) yang ditampilkan di halaman depan. Tidak ada link “Read more” yang saya inginkan. Tidak ada tool di editor (tempat menuliskan postingan) Blogger untuk menambahkan “Read more”. Wah, susah juga...

Kalau di Wordpress ada. Tapi Wordpress (versi hostingan gratis) tidak saya pilih, karena adanya kekurangan yang belum bisa saya atasi, yaitu salah satunya tidak bisa menerima kode javascript.

Tapi jangan khawatir. Saya sudah tahu triknya. Dan sekarang, saya ingin membagi ilmunya untuk Anda.

Ada 3 langkah, untuk membuat paragraf pengantar yang akan ditampilkan di halaman depan:

1. Penambahan ‘Conditional CSS’

Conditional CSS mengubah bagaimana postingan tampil di halaman yang berbeda.
Caranya, klik Layout ---> Edit HTML.
Lalu backup template dengan mengklik Download Full Template.
Lalu cari dan temukan kode ini </head>
Tambahkan kode berikut tepat di atasnya:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Gunanya adalah membuat class bernama fullpost yang akan tampil hanya di halaman detail (permalink).

2. Penambahan Read more

Langkah kedua, menambahkan link "Read More" (atau apa pun sesuai selera Anda) yang akan tampil setelah paragraf pengantar.
Untuk itu klik checkbox Expand Widgets Template tepat di atas kotak Edit Template.
Lalu scroll sampai ketemu kode:
<data:post.body/>
Tambahkan kode berikut setelahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>
Kalau sudah, klik Save Template. Link Read more ini hanya akan tampil di halaman depan (home) dan arsip (Archive). Kalau diklik, akan membuka halaman baru berisi satu tulisan penuh.

3. Penambahan di Post Template

Langkah terakhir adalah menambah format di template postingan, sehingga setiap membuat postingan baru akan memudahkan Anda, di mana menempatkan paragraf pengantar dan di mana sisa keseluruhan tulisan.
Klik Settings ---> Formatting, lalu geser ke paling bawah halaman.
Copy dan Paste kode berikut ini ke kotak Post Template:

PENGANTAR
<span class="fullpost">
SISA PARAGRAF SELANJUTNYA
</span>
Klik Save Settings.

Ketika Anda membuat postingan (Create Post) dan kemudian mengklik tab Edit Html, Anda akan melihat seperti berikut ini (Klik gambar untuk memperbesar):



Ganti tulisan "PENGANTAR" dengan paragraf pengantar Anda sendiri. Kemudian ganti tulisan "SISA PARAGRAF SELANJUTNYA" dengan sisa paragraf berikutnya dari tulisan Anda.
Jangan menghapus kode <span class="fullpost"> dan </span>.
Intinya masukkan paragraf pengantar Anda di atas kedua kode itu dan paragraf berikutnya di antara kedua kode tersebut.
Lalu klik Publish. Lihat hasilnya dengan klik View Blog.