Create Collapsable Read More

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