How can I create expandable post summaries?

Cara Membuat Read More.... atau Post Summary

Dengan trik ini anda dapat menampilkan read more....
(atau baca selanjutnya)
atau sejumlah teks sebagai paragraf awal dari artikel/ posting anda.
Terpenggal dan paparan blog anda tidak panjang,berjela, jika pelawat 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 satu page halaman anda.


Ada tiga trik yang harus anda lakukan untuk menampilkan post summary:
conditional CSS, link "read more" untuk setiap posting, dan modifi 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 paparan posting anda di setiap halaman. Masukan kod script berikut pada style sheet anda, dan kod ini khas untuk classic template:


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


Style sheet letaknya di bahagian atas template anda antara <style> dan </style>. Sisipkan kod diatas tepat di atas tag ini>>></style>


Link "Read More"


Simpanlah kod berikut pada template anda, letaknya setelah tag <$BlogItemBody$>

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

Nota : Read More! boleh anda ganti dengan perkataan apapun, seperti Baca Selengkapnya atau Baca Selanjutnya, atau apapun.

Link read more hanya akan tampil pada halaman utama, dan akan membawa pelawat anda pada post keseluruhan dari teks anda.


Modified Post


Langkah terakhir yang perlu dilakukan ialah meletak kod singkat ini:

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

Sisip kod diatas pada kolom 'Post Template', letaknya di 'Formatting' pada bagian 'Setting' dalam 'Dashboard' blogger anda.

2. Untuk Layout Blogger Beta layouts):


condision CSS


Masukan kod ini:

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

Tepat letak diatas </head> di css template beta anda

Read More


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

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


Anda juga boleh memodified 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 pelawat blog anda.


2. Mengubah 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. Mengubah 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 kodnya:


<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>


Nota Read More dapat anda tukar dengan apa apa perkataan yang anda kehendaki.


Modified Post


Langkah terakhir yang perlu dilakukan ialah meletak kod singkat ini:


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


Letak kod diatas pada kolom 'Post Template', letakanya di 'Formatting' pada bahagian 'Setting' dalam 'Dashboard' blogger anda.


Dan nanti paparanya akan seperti beberapa artikel pada blog saya ini.


Selamat mencuba "Good Luck.