Thursday, September 10, 2009

Tutorial: Read more for blogger

Tutorial ni adalah atas permintaan Cik Fifie yg mahu tau cara-cara untuk membuat 'read more' untuk blogger/blogspot.Err..agak-agaknya cik Fifie mau lg tak tutorial neh..Maklumlah, sudah berminggu lama nya dia membuat permintaan ni namun hari ni baru aku nk tunaikan.Ampunn! hehe

Ok, first, apakah itu 'read more' atau baca selanjutnya? Kalau korang semua perasan, kt bawah setiap entri yg terpapar kt blog aku ni ada button/tag/link '(read more)'.Fungsinya tak lebih dari untuk meringkaskan entri korang yg panjang berjela ibarat esei bahasa Malaysia masa sekolah.hehe! So, kenapa nak ringkaskan biarpun panjang berjela?

Bagi aku, bila ringkaskan entri, blog aku ni akan nampak lebih kemas.Lagipun, jika biarkan entri berjela ke bawah, penat pulak korang asyik nk scroll down lpas tu scroll up blk mouse wheel kn? Tu pun kalau mouse korang ada wheel. Kalau ada yg masih guna mouse zaman paleolitik yg takde wheel tu lg la penat. Sekali ngan pergelangan tangan, siku & lengan kena gerakkan ntuk scroll up & down.

Apa yg akan terjadi ngan entri yg diringkaskan tu? Adakah akan didelete separuh? Of course la tidak.Tolong la jgn berfikiran sedemikian.Entri korang hanya dipendekkan di paparan utama blog saja.Kalau nak baca full entri, klik saja kt 'read more' tu & korang akan dibawa ke page yg full entri punya.Tak percaya? Try la klik read more kt bawah ni.

So, sekarang dh percaya kan? Hehe..jgn la bengang ngan aku lak..Aku tau sesetengah daripada korang dh tau fungsinya.Explanation aku td ntuk rakyat yg masih tak mengetahui pasal read more ni je.lalala

Ok, mcm ni cara-cara ntuk pasang 'read more' kt blog korang.Kalau rasa berkenan, buat la eh? Kalau still suka ngan cara korang tu it's ok.Citarasa masing-masing.

1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tandakan kotak Expand Widget).

3. Download Full Template sebelum mengedit blog. (Ni untuk backup template blog korang)


4. Cari <data:post.body/> atau <p><data:post.body/></p> dan gantikan dengan kod dibawah.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>(read more)</a>
</b:if>


5. Korang boleh tukarkan ayat yg warna merah tu dgn ayt korang sendiri.Contohnya 'baca lg', 'baca selanjutnya', 'please read more' & lain-lain.

6. Save template.

7. Sekarang pergi pula ke Settings - Formatting.

8. Masukkan kod di bawah ini ke dalam Post Template.


start typing
<div class="fullpost">
end typing
</div>


9. Save settings.

Got it? Nanti bila nk tulis new post, jika perkataan 'start typing' & 'end typing' tu ada, maknanya korang dh berjaya pasang read more ni. Cara nak guna contohnya mcm ni:

'Hari ni saya berbuka ngan ayam golek, kueh lompat tikam dan air bandung cincau'

Gantikan 'start typing' tu ngan 'Hari ni saya berbuka ngan' & gantikan 'end typing' tu ngan 'ayam golek, kueh lompat tikam dan air bandung cincau'.So nanti kt muka depan blog korang takkan sesekali keluar ayat penuh 'Hari ni saya berbuka ngan ayam golek, kueh lompat tikam dan air bandung cincau' tapi hanya keluar ayat 'Hari ni saya berbuka ngan'.Nak baca sampai habis kena klik read more tu.Ok?

11comments:

Post a Comment

 

BACK TO TOP




Side Projects under mello's: Wow! Bundle | melloGraphy | mello says