Tutorial Membina Fungsi Auto Readmore Bagi Setiap Post

 

Auto readmore adalah salah satu cara meningkatkan bilangan page view blog anda. Pembaca pastinya akan mahu mengetahui dengan lebih lanjut berkenaan post dan entry anda dan pasti akan menekan button readmore tersebut, secara automatik bilangan pageview jua akan bertambah.

Fungsi auto readmore yang umum, biasanya perlu diselitkan setipa kali kita post entry, tetapi kali ini, ia adalah secara auto,setiap kali entry baru dipost.

Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah. 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 kuning 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/AVvXsEi2Rk-CJ3zINqMsmWv08m7zd4hEI4VEyLWlpGjEMdKj9rkcximIMtd7F6KhSmIrHppwZspkbkdTNqwR8OZyYkHNkGlyGJ5Y_eFaNGY6fOHXGGDRv65orpv6VTXI0kxg9PiLTLDhw8KIHbY/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>

Sebelum klik save template, pasti kan anda preview dahulu, dan lihat sekiranya tiada sebarang error pada preview, bolehlah save template tersebut.