Bagaimana mahu membuat baca selanjutnya di blog

Tutorial ini mengajar kita untuk membuat Baca selanjutnya secara automatik di setiap blog yang kita tulis, cara ini dapat meringkaskan blog dan membuat paparan nampak seragam dan kemas, pembaca hanya perlu klik pada Baca seterusnya untuk membaca keseluruhan blog.



Cara pasang ReadMore di blog adalah sebagai berikut:

Buka menu Edit HTML pada blog anda dan Copy paste kode dibawah ini, letakkan diatas kode (jika susah mencarinya klik ctrl+F dan taip  </head>)

<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>

Kemudian, Save Template.

Masih pada EDIT HTML, klik pada "Expand widget template" dan carilah kode

<data:post.body/> (jika susah mencarinya klik ctrl+F dan taip code seperti sebelah ini)

jika anda telah jumpa code tersebut copy dan paste (gantikan) code itu dengan code dibawah

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Save Template.. dan Lihat Blog..

Keterangan :

1. var thumbnail_mode = "float";  (setting untuk letak thumbnail disebelah kiri jika anda tidak mahu meletak thumbnail sila ganti dengan (no-float)
2. summary_noimg = 250; (Menetapkan jumlah banyak patah perkataan didalam paparan jika tiada gambar/ thumbnail)
3. summary_img = 250; (Menetapkan jumlah banyak patah perkataan didalam paparan jika posting ada mempunyai gambar/ thumbnail)
4. img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
5. img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
6. Tulisan READ MORE dapat diganti dengan perkataan pilihan anda seperti baca selanjutnya