Auto Read More on Blogger

by Zoul on 26 March 2009

Aku rasa korang tentu ada gunakan read more option samada korang gunakan Blogger atau WordPress. WordPress user lebih senang menggunakan Read More option ni kerana ianya hanya perlu disetkan pertama kali dan seterusnya cut jumlah wording yang perlu dipaparkan secara automatic. Untuk sesiapa pengguna Blogger yang menggunakan Read More versi sebelum ini perlu setkan di mana untuk meletakkan kod Read More... kerja tu yang paling malas aku buat.

Tetapi sekarang aku menggunakan yang automatik. Aku cuma perlu taip sahaja tanpa mengira jumlah wordings dan ianya akan terpotong secara automatik. Ok kalau korang berminat begini caranya {versi ini juga support untuk thumbnail}

1-Login ke Blogger --> Layout-->Edit HTML--> Expand widget templates, dan cari kod ini

<data:post.body>

2-Gantikan kod di atas itu dengan kod ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


3-Kemudian cari kod ini {penutup untuk Head section}

</head>

4-Letakkan script di bawah ini betul-betul di atas kod </head> tadi.

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/cuitnazz/readmorescript.js' type='text/javascript'/>



Note

Kod yang ini korang boleh ubah mengikut kehendak atau kesesuaian template. Kalau tak ubah pun ia tetap berfungsi..

summary_noimg :Berapa character summary untuk posts yang tiada image/photo
image.summary_img :Berapa character summary untuk posts yang ada image/photo
img_thumb_height : Berapa tinggi photo untuk thumbnail {pixel}
img_thumb_width : Berapa lebar photo untuk thumbnail {pixel}

5-Sekarang tekan preview dan lihat samada ia berjaya atau tidak {kalau ok, korang akan lihat posts korang telah dipotong secara automatic termasuk post-post yang telah lalu}.

6-Tekan save bila semua dah seperti yang diharapkan.


Selamat mencuba.. oh ya contohnya adalah seperti yang ada pada blog cuiit ini yer.

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

Monster La La Land said...

wah hebat
menjadi kemas blog anda
alamak 1st kmentar
terharu nih
:P

cuit said...

Monster La La Land

Mekasih... makcik.. nanti kita belanja kat kenny rogers yek.. hik hik

Monkey D Luffy said...

best kalau pandai coding2 ni...

aku x pandai... huhuhu

en_me said...

ghitewww erk.. hmmm

cuit said...

Monkey D Luffy

Tak pandai pun.. aku ikut ajer apa yang org buat dan cuba buat sendiri.. hik hik

cuit said...

en_me

Kira2 cam tulah ek....

GeNeRaSi MaLaYSia said...

waaa...bgs2 ni..nnt leh r nk try...thanks tok info ni...

cuiit said...

GeNeRaSi MaLaYSia

Silakan...silakan...

KhairiL's said...

aku skrng ni tgh bljr pasal coding
nnt aku nak try yg ni plk
kalu ada pape ko boleh tlg aku kan

Ir. hydir said...

hoh.. ada lagi versi Read more ni ya
bagus2... tq bebanyak :)

cuiit said...

KhairiL's

Aku bukannya pandai pun.. tapi tak pe.. kita sesama belajar ..k

cuitnazz said...

Ir. hydir

Ada bos.. tu pun selepas dh malas nak setkan read more secara manual.. kluar semula lah .. hik hik

Chekgu BaniHassim said...

yg ni tak pakai outer script ek???
just coding tu???
erm...
aku nk try, tapi kang tak jadi, jenuh lak nk godek...
nnti2 laa...

cuit said...

Chekgu BaniHassim

Ada la yob.. javascript tu...

-WaN- said...

thankzz for da info...

IndoTopTen said...

Mantap kali blog ini...

Silahkan berkunjung di blog saya...
Forum komunitas malaysia dan indonesia,

julietANNA said...

haa.yg ni baru best.
sng kje.dulu ada pkai tp yg kne ejas tu.
gila pyh.lps tu da mls pkai.
yg ni nnt blh cbe2 try.
thnx!

eira said...

xbestla..
eira lagi suka tengok pjg2..
mls nk tekan hehehe

nightcaller said...

thks for the post....:)

Yaniez said...

salam cuit,
ada tak kod untuk buat link ringkasan selepas klik link read more.. seperti di blog along arman

harap dapat bantu saya...
terima kasih... :)

cuit said...

Yaniez

Saya dah pernah buat tutorial tu di sini http://cuiit.blogspot.com/2009/01/create-collapsable-read-more.html

Yaniez said...

ok thanks cuit.. :)

Yaniez said...

Cuit,
ada tak code tuk resume auto read more ni... :D
sy dah tengok resume read more tu, tp rupanya untuk yg manual...

kalau tak de tak pe la..
byk tanya la sy nie.. ehehe...

apa pun thanks.. :)

Post a Comment