Create Collapsable Read More

by Zoul on 28 January 2009

Aku ada terima email dari REZaries yang meminta panduan untuk membuat collapsable read more macam yang ada dalam blog aku ni...

Dia kata:

"salam..nice blog anyway,nk tnye skit ni..cm ne ko buat post2 ko tu ade read more?..bleh kasi tunjuk ajar skit?..msuk2 la blog ni, http://rezaries.blogspot.com..huhu..
TQ~"

Aku terfikir kalau aku emailkan hack ni kat REZaries aku bimbang kalau ada yang lain pulak bertanya so, aku buat keputusan untuk letakkan dalam entry aku nih..

Untuk membuatnya sebenarnya senang jer..

Sebelum buat apa2 perubahan dalam template blogger korang, untuk mengelakkan kejadian yang tidak diingini waktu proses editing, pastikan korang download dulu template korang.

Caranya..

1-Login ke Blogger korang
2-Pada Dashboard klik layout
3-Kemudian klik Edit HTML
4-Kemudian klik Download Full Template => savekan template korang

Ok sekarang untuk buat collapsable read more

Masih lagi pada Blogger Layout tadi..

1-Tanda kan centang pada Expand Widget Templates
2-Cari kod ini </head> bila dah jumpa copy dan paste kan kod dibawah ini di atasnya
Tip: Kalau susah nak cari, tekan Ctrl dan F dan taipkan kod yang korang nak cari.. cursor akan berada terus pada kod tersebut

Ini kodnya
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

3-Ia akan jadi seperti ini

<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

</head>

4-Kemudian cari pula kod ini:
"<div class="post-header-line-1">" (gunakan kaedah Ctrl dan F)

5-Tak berapa jauh di bawah kod tadi korang akan jumpa kod ini:
"<div class='post-body entry-content'>"

6-Tambahkan kod dibawah menjadi seperti ini


<div class='post-header-line-1'/>
<div class='post-body entry-content' (korang buangkan kod ini >")
expr:id='"post-" data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" data:post.id "\");"' href='javascript:void(0);'>[ ] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" data:post.id "\");"' href='javascript:void(0);'>[-] Resume...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" "<data:post.id/>")</script>
</b:if>

7-Perkataan Read More dan Resume boleh ditukarkan mengikut apa yang korang suka

8-Kemudian savekan template korang

9-Sekarang klik pada menu Setting (sebelah Layout) dan klik pada Formating

10-Pada bahagian bawah sekali korang akan jumpa "Post Template", isikan kod dibawah pada kekotak tersebut.

Kod nya akan berupa begini

<span id="fullpost">



</span>

11-OK sekarang dah siap

12-Macamana nak guna? Setiap kali korang nak create posting baru klik pada Edit HTML (Bersebelahan Compose) dan korang akan nampak kod ini (Kalau korang klik pada Compose kod ini tidak kelihatan)

<span id="fullpost">



</span>

13-Taipkan entry yang korang nak pembaca nampak sebelum kod <span id="fullpost"> dan kemudian entry yang terlindung</span>

Contohnya:

Mak ali pergi pasar bersama...<span id="fullpost"> barang jualannya untuk diniagakan.</span>

14-Dah jangan baca aje... sekarang cuba buat..

Selamat mencuba....



#Update.. Blogger telah punya option read more nya sendiri

{ 15 comments... read them below or add one }

[S]itie [B]Um [B]Um said...

thanks

emma songal said...

great tutorial here!
x)

Riezal said...

what a nice tutorial.. thanx for sharing..

mrblind said...

rajin lu ni..buat lagi tutorial lain ek..hahaha

cuit said...

mrblind:

Mana yg aku tau .. bleh ajer... hah ckp skrg apa tutorial yg ko nak... (cewah belagak lg tuh...)
hik hik hik

www.katobengke.com said...

ollapsable read more gunanya untuk apa kalau boleh tau

zuhaimi zul said...

thank...tp skrg stil kurang rajin nak wat..hahahha...lariiiii

cuit said...

www.katobengke.com

Gunanya nya untuk menjimatkan ruang di front page blog kita.. so lebih banyak tajuk artikel yg boleh dipaparkan tanpa perlu pembaca skroll jauh ke bawah atau ke previous page...

humbleandmodest said...

lame dah weyy aku cari tutorial ni...
now i got it...
hahahahah...

Hanis said...

hurm...nak try gak laa...cmbesh je. Tp maybe bile template blog ku dh di modify lee..tq.

Cuit said...

[S]itie [B]Um [B]Um:
You're welcome...:)

emma songal:
Thanks a lot

Riezal:
welkam..welkam...:s

zuhaimi zul:
Hei..hei... jgn lari jejauh nanti datang balik tau...! :))

humbleandmodest:
...ko carik kat ne? jgn cari kat blog chedet... :))

Hanis:
Selamat berjaya....

REZaries said...

yuhuuu...prtanyaan ku sdh trjawab..haish..nape la bg terdedah name aku..hehehe..malu la aku..

humbleandmodest said...

aku cari kt blog aku yg sampai sekarang aku masih xdapat nak masuk..
haha!

uNa !! said...

da wt tp xmenjd
tensenn aaaa t.t

[yAN!e][pUTraJAya] said...

saya sangat suke bila ada n3 tutorial cenggini....thanks..leh belajor dari incek cuit...


meh sini nak cuit2 manje sket...ehehehe

(^_^)

♥Yanie Putrajaya♥
*********************************

Post a Comment