Membina fungsi auto read more pada setiap post

Berbeza dengan fungsi read more versi lama, di mana kita terpaksa meletak kod <span class="fullpost"></span> pada setiap entri yang kita tulis, fungsi auto read more yang boleh anda lihat pada blog ini sememagnya memudahkan lagi tugas kita. Tidak perlu lagi untuk kita letakkan kod <span class="fullpost"></span> pada setiap entri. Fungsi ini telah di set secara auto dengan javascript di mana setiap entri akan di di set kepada read more. Image yang ada pada entri akan di resizekan kepada saiz yang kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan menghadkan secara auto jumlah teks yang akan dipaparkan pada satu entri.

Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah.

p/s: Sila save script template anda terlebih dahulu sebagai backup.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+ F. Seterusnya, taip atau paste kod </head> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin kod yang berwarbna biru di bawah dan pastekan di atas atau sebelum kod </head>

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

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


Langkah 4

Sekali lagi, dengan menggunakan keyboard, tekan Ctrl+ F. Seterusnya,  taip atau paste kod <data:post.body/> pada ruang Find dan tekan Enter.

Langkah 5

Salin kod yang berwarna merah di bawah dan paste(gantikan)  pada kod <data:post.body/>

<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD98gKW4_-FCV5BLyBeTwRZYwGpzw5XLcMku_Go4vifc-N0FL1L13nnee_qpQRcXgNwdYUY89YWLvb8BsCzmAufxAE4BLir0JbZNIjK-PiofD1FwaFhhSW8G9kYOyP_VMSG3vWr_k-iro/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Akhir sekali klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Update: Jika anda menghadapi masalah pada auto read more selepas memasangnya pada blog, seperti post menjadi dua, sila klik www.yummylolly.com untuk menyelesaikan masalah tersebut.

Jika berlaku error semasa proses Preview akibat masalah code, sila klik ke www.bloggersentral.com untuk mencuba tutorial Auto Read More