Cara Letak Auto Readmore

Tutorial ini hanya sesuai untuk mereka yang belum pernah membuat readmore pada blog. Jika anda pernah memasang readmore sebelum ini ,anda perlu kembalikan ia seperti asal. Boleh rujuk link ni untuk buang readmore yang lama.

Seterusnya ikuti langkah berikut:

1. Setelah anda login ke blogger, seterusnya masuk ke menu Layout dan pilih Edit HTML. Klik pada kotak"expand widget template" dan cari kod </head>.

2. Copy dan paste kod dibawah ini tepat di atas kod </head> yang anda cari tadi.

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

3. kemudian  anda cari kod <data:post.body/>. bila anda jumpa kod tersebut. gantikan,  kod <data:post.body/>  dengan kod dibawah 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: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>

4.Kemudian klik save
5. Selesai.


Nota: : Kod yang mempuyai cetak dan berwarna merah, pada kod diatas mempunyai maksud seperti berikut.


var thumbnail_mode = "float"; (menunujukkan posisi gambar thumbnail pada kedudukan di sebelah kiri.

summary_noimg = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda tanpa gambar)gantikan mengikut keinginan anda)

summary_img = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda yangtanpa terdapat gambar) gantikan mengikut keinginan anda)

img_thumb_height = 120; (ukuran tinggi gambar yang akan dipaparkan)
img_thumb_width = 120; (ukuran lebar gambar yang akan dipaparkan)
READ MORE = gantikan boleh dengan perkataan seperti baca seterusnya,baca lagi,seterusnya dll.

Untuk menukar perkataan read more kepada ikon dan menghilangkan tajuk posting disebelahnya rujuk pada artikel INI