Cara Memasang Read More Button Pada Blog

Cara Memasang Read More Button Pada Blog

Memasang Read More Button sebenarnya dapat memudahkan pelawat memilih artikel yang mereka ingin baca sahaja selain dapat meringankan blog dan memaparkan komen yang telah ada pada posting tersebut. Korang boleh tengok contoh di sini.

 

Cara memasang Read More Button seperti berikut:

1. Masuk ke bahagian Dashboard > Template > Edit HTML > Proceed. Seperti biasa buat Backup dulu pada Template dan tick pada Expand Widget Templates.

2. Cari code  </head> dengan cara tekan Ctrl+ F dan copy paste code </head> ke dalam kotak dan tekan Enter.

3. Copy code di bawah dan paste sebelum code </head> tadi.

<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 removeHtmlTagundefinedstrx,chop){

ifundefinedstrx.indexOfundefined"<")!=-1)

{

var s = strx.splitundefined"<");

forundefinedvar i=0;i<s.length;i++){

ifundefineds[i].indexOfundefined">")!=-1){

s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}

}

strx = s.joinundefined"");

}

chop = undefinedchop < strx.length-1) ? chop : strx.length-2;

whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;

strx = strx.substringundefined0,chop-1);

return strx+'...';

}

function createSummaryAndThumbundefinedpID){

var div = document.getElementByIdundefinedpID);

var imgtag = "";

var img = div.getElementsByTagNameundefined"img");

var summ = summary_noimg;

ifundefinedimg.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>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

4. Kemudian cari code <data:post.body/>

5. Copy code di bawah dan replace code <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'>createSummaryAndThumbundefined"summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://1.bp.blogspot.com/_LZtXSNcp76A/SxuOVTvCKgI/AAAAAAAAAr8/rFJNAYKSomY/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>

6. Preview dulu. Jika tiada sebarang error muncul klik Save.

7. Selesai.