Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

</head>

Jumpa tak? Kalau jumpa tepuk tangan sbb uols dah berjaya step pertama hihii.

(2) Korang copy dan paste kod di bawah ni DI ATAS kod (1)

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>
NOTES:
summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya

summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya

img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar

(3) Lepas tu cari kod kat bawah ni pulak

Jumpa tak? Kalau korang tekan ctrl + f, dan korang tekan enter dua kali, korang akan jumpa kod ni ada dua. Aku guna yang kedua sbb kalau yg pertama aku try tak jadik.

(4) Padam kod nombor (3) dan gantikan dengan kod di bawah

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

Preview dulu. Jadik tak? Kalau jadi, boleh laa save.

(5) Kalau korang nak perkataan Read More... tu jadi gambar, gantikan Read More... dengan kod di bawah. Tukar url gambar je tau. Yang img alt read more src depan tu tak payah tukar.

So nanti dia akan jadi macam gambar di bawah ni. Korang cuba preview dulu. Dah jadik boleh save.


Harap2 menjadi pada template uols! Tutorial ni kredit kepada blogger Faqihah Husni. Sbb aku refer banyak tuto rasanya tuto beliau paling senang bab read more ni. So a big fat thanks to her. Mohon halalkan ilmu yang saya kongsikan ni ya. Sbb ianya berguna sangat. Hehee. TQ!

Di bawah ni freebies aku buat. Kalau nak guna, silakan. Saiz dah okay tak kecik sgt tak besar sgt. Actually this post wan mean to publish yesterday. Tapi aku hold sbb malas nak upload freebies kat imgur hehehe. Hari ni seharian tak update blog. Reply komen je kejap siang tadi. Esok InShaaAllah akan siapkan banner dan tempahan edit blog. Offer masih dibuka. Till this 15Feb edit blog RM5. Tataaa and goodnight uols!

http://i.imgur.com/Ihz2YTy.png

http://i.imgur.com/OthYyKn.png

http://i.imgur.com/sKEx263.png

http://i.imgur.com/QMnJHb7.png

http://i.imgur.com/2v0Nzwj.png

http://i.imgur.com/6dFgGQX.png

http://i.imgur.com/A5lkU1f.png

http://i.imgur.com/NwHDLDm.png

http://i.imgur.com/JzCpCBI.png