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. Temukan tag ini <data:post.body/> lalu gantilah dengan kode dibawah ini:
<p><data:post.body/>
<a expr:href=’data:post.url’><b>Read more!</b></a></p>
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.
Good Luck.
Feedburner dengan RSS | 
Update lewat Email | 
Blog ini memakai dofollow plugin dan commentluv plugin, oleh karena itu pastikan rekan menyertakan link saat berkomentar, sehingga link homepage dan link posting terakhir blog rekan mendapat bonus dari Google.
2008 Abi Bakar | Blog Designed by Blogging Secret | Sponsored by Wordpress Theme Store Learn more HyperWebEnable.com.
makasih infonya tp sayang saya belum punya blog…xixixix
[Reply]
mas.. this doesn’t work.. help help… could you explain clearer about this… seriously i’ve been trying this expandable post but none of them are working.. blog ane in on projectpinguin.blogspot.com
by the way.. sorry oot sebelumnya.. i wonder how to put a code on the post like the tutorial you did? i’m trying to put it but the blog engine parser always executed it..
i want to put some code on my post also.. and thank you.. sorry for the ignorant question..
[Reply]
@Gura apa anda sudah ikuti semua langkah2 read morenya?
dan utk memasang kode html di posting, anda harus ganti < dengan < dan > > utk memparse kodenya. agar lebih mudah liat infonya disini http://abibakar.blogspot.com/2007/09/parse-kode-html-untuk-posting-blogger.html
[Reply]
@Gura apa anda sudah ikuti semua langkah2 read morenya?
dan utk memasang kode html di posting, anda harus ganti < dengan & lt; dan > dengan & gt; (hilangkan spasi antara $ dan lt/gt) utk memparse kodenya. agar lebih mudah liat infonya disini http://abibakar.blogspot.com/2007/09/parse-kode-html-untuk-posting-blogger.html
[Reply]
oh gitu.. i’ll try in a bit. sorry for the late respons..^^
[Reply]
hum.. mas.. saya sebenarnya sudah mengikuti langkah-langkahnya tapi mungkin skrip xml yang saya agak berantakan.. jadi entah kenapa walaupun readmore muncul yang di dalam span post tetap ikut muncul.
iya yang masalah parse nya sudah. terima kasih sekali..
[Reply]
assalamu’alaikum. abi, saya udah megikuti langkah2nya…
tapi kenapa tulisan read more!nya selalu berada di akhir psotingan..
saya penginnya seperti abi ini.. ketika diklik read more..baru terbuka postingan keseluruhannya.. apa ada yang salah?
[Reply]
oh..udah ketemu masalahnya. makasih
[Reply]
makasih kembali
[Reply]
ga jalan
B:if nya hiks…
[Reply]
read morenya ada tp tetep aja fullpost… halaaaaah… mulai panas otak
kenapa nich mas abi kok bisa begini wkwkwkw…
[Reply]
okey bisa
ada yg kurang mas… harus edit setiap posting lagi alias harus ngulang posting lagi dari awal 
harus edit lagi nech ehhehe…
[Reply]
MXY coba lagi, sudah saya benerin karakter ” nya, ini ngalamin error pas proses transfer isi blogspot ke wordpress. Banyak karakter ‘ ” berubah scara otomatis, shingga jadi kacau, tapi sudah saya benerin coba lagi deh…
Dan sekarang saya jadi harus benerin smua kode tutorial diblog ini…duh cape deh:)) dan makasih infonya karena dikau saya jadi engeh
[Reply]
nah udah udah…. bukan… uhmmm itu harus edit setiap posting lagi…
jadi setiap posting harus ada ditengah2
karakter itu juga ngaruh..
jadi baca2 semua posting sendiri 
kkwkwkwk… geli liatnya yg dulu2 ternyata emang bener2 posting2 yg awal bad content. ga begitu berguna atau entah itu ga berguna 
beda ama postingnya mas abi yg ternyata ini postingan tahun lalu 
woooooowwww… tahun lalu ini udah setaun 
masih OL mas subuh2 begini ato blm tidur?
[Reply]
Iya karena ini kan sebenarnya postingan blogspot saya yang ditransfer scara otomatis ke wordpress, ternyata hasilnya banyak yang error…pantes kemarin2x ada yng bilang kode2xnya ga jalan dan gak bisa disimpan…ternyata oh ternyata kesalahan bukan pada mereka, namun karakternya yang berubah.
Iya mxy ini postingan saya stahun lalu lebih 3 hari:D, belum tidur nih bentar lagi, lagi bingung kotak katik kenapa sidebar bisa melorot nih…hehehe
[Reply]
Wah sama nich kaya MXY, dari jam 4 sore ampe jam 11 malem ga bisa juga.., postingannya muncul semua ga ada yang kepotong supaya read more..
Padahal udh ngikutin semua tutorial di blog ini.., ada yg kurang ga petunjuknya mas abi..?
[Reply]
masa sih dick? ini saya baru aja buat blog dan mengambil read more dari sini dan langsung bisa tuh. Dan si Mxy sudah bisa nerapkan ini.
BTW saat anda posting, sudah ditaruh belum span fullpostnya ?
begini nih formasinya:
PARAGRAP AWAL<span class=”fullpost”>PARAGRAF SELANJUTNYA</span>
Sudah belum?
[Reply]
He,he,he… udh bisa sekarang….
Soalnya diatas cuma
kaga pk
posting nimbulposting ngumpet
Thx yach mas..
[Reply]
lah kok span class nya ga keluar di komen di atas..?
[Reply]
ga bisa kok mas
[Reply]
ga ada pada template saya gimana bikinnya mas??
[Reply]