Cara Membuat Read More atau Post Summary

Dengan trik ini anda dapat menampilkan read more (baca selengkapnya) atau sejumlah teks sebagai paragraf awal dari artikel/ posting anda. Agar tampilannya blog anda tidak terlihat sangat panjang. Maka jika pembaca ingin membaca keseluruhan artikel cukup meng-klik link 'read more' untuk melihat keseluruhan artikel. Hal ini untuk meringkas jika anda mempunyai artikel yang panjang pada semua halaman anda.

Ada tiga resep yang harus anda lakukan untuk menampilkan post summary: conditional CSS, link "read more" untuk setiap posting, dan modifikasi bagi posting-posting yang menggunakan featur ini. Mari kita lakukan cara ini, selangkah demi selangkah.

1. Untuk Klasik Template (classic templates)

Kondisional CSS

Kita akan menggunakan tag kondisional untuk merubah penampilan posting anda di setiap halaman. Masukan kode berikut pada style sheet anda, dan kode ini khusus untuk classic template:

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

Style sheet letaknya di bagian atas template anda antara <style> dan </style>. Letakan kode diatas tepat di atas tag ini>>></style>

Link "Read More"

Taruhlah kode berikut pada template anda, tepat setelah tag <$BlogItemBody$>

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

Catatan : Read More! bisa anda ganti dengan kalimat apapun, seperti Baca Selengkapnya atau Baca Selanjutnya, atau apapun.

Link read more hanya akan tampil pada halaman utama, dan akan membawa anda pada post yang berisi seluruh dari teks anda.

Modifikasi Post

Langkah terakhir yang perlu dilakukan ialah menaruh kode singkat ini:

<span class="fullpost"></span>

Taruh kode tah diatas pada kolom 'Post Template', letakanya di 'Formatting' pada bagian 'Setting' dalam 'Dashboard' blogger anda.

2. Untuk Layout Blogger Beta layouts):

Kondisional CSS

Masukan kode ini:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Tepat diatas </head> di css template beta anda

Read More

Langkah selanjutnya membuat Read More. Setelah tag ini <data:post.body/> masukan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more!</a>
</b:if>

Andapun bisa memodifikasi read more anda, disini ada sejumlah cara untuk itu:

1. Klik 'read more' sekalian membuka window baru.

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>

Dengan ini tanda 'read more' akan membuka window baru jika diklik oleh visitor blog anda.

2. Merubah font/huruf 'read more' anda menjadi besar:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>
</b:if>

3. Merubah font 'read more' anda menjadi bold:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>
</b:if>

4. Jika anda ingin font 'read more' anda besar dan bold, ini kodenya:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
</b:if>

Catatan: Read More bisa anda ganti dengan kata apa aja

Modifikasi Post

Langkah terakhir yang perlu dilakukan ialah menaruh kode singkat ini:

<span class=”fullpost”></span>

Taruh kode tah diatas pada kolom ‘Post Template’, letakanya di ‘Formatting’ pada bagian ‘Setting’ dalam ‘Dashboard’ blogger anda.

Selesai... semoga artikel ini bermanfaat bagi anda...