Cara Buat Read More Automatik

Ok, ni coding yang aku dapat kat internet. Kalau aku kata aku reka sendiri memang tipu la. Tapi dah semalaman aku cuba cari cara buat Read More dan coding ni yang paling mudah, menarik dan cool.

Biasanya korang kena buat Pagebreak kat dalam entry korang untuk menentukan part mana yang muncul kat homepage blog dan part mana yang kena tekan Read More baru nampak. Tapi kalau guna code ni, korang just buat sekali je dan dia akan buat Read More secara automatik lengkap dengan gambar sekali.

Cara Buat Read More Automatik

1. Login to Blogger, pergi ke Layout > Edit HTML dan klik kotak "expand widget templates"
2. Tekan CTRL+F dan taip </head>
3. Paste code kat bawah ni dan paste SEBELUM code di atas.

===================================================================

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

===================================================================

Korang boleh ubah sikit code di atas tu serba sedikit. Kalau tak reti jangan gatal-gatal usik, tak jadi aku tak tanggung.

Code yang boleh diubah, tak paham jangan buat.

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width


4. Ok, sekarang tekan CTRL+F dan search <data:post.body/>
5. Copy code kat bawah ni dan GANTIKAN dengan code kat atas tu. (padam code kt atas tu then paste code kat bawah ni)

===================================================================
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>


<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;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>


</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

===================================================================

OK, Siap dah.. :)

By Mr Daha with 5 comments