Tutorial memasang fungsi 'read more' menjadi automatik dalam blogpost/blogger (2)

Fungsi 'Read more' atau 'Teruskan membaca...' digunakan untuk memendekkan artikel pada laman utama, artikel akan nampak sepenuhnya bila kita menekan butang 'read more' tersebut. Bila kita masukkan gambar, ia akan muncul ikon gambar yang kita telah masukkan itu sebagai pengganti perkataan 'read more'. Fungsi ini digunapakai secara automatik. 

Kita hanya perlu memasang kod HTML yang betul.

Ikut langkah berikut:
1. Cari butang "Design" tekan "Edit HTML"
2. Tandakan pada perkataan/kotak "Expand Widget Templates"
3. Cari kod di bawah:

<data:post.body/>

4. Gantikan dengan kod di bawah ini, 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5. Sekarang, cari kod </head> dan salin kod di bawah betul-betul sebelum perkataan </head> itu:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

Penerangan ringkas tentang kod di atas:

summary_noimg = 430; adalah is ketinggian ringkasan tanpa imej
summary_img = 340; adalah ketinggian ringkasan post dengan imej
img_thumb_height = 100; adalah ketinggian imej
img_thumb_width = 120; adalah kelebaran imej

Selamat mencuba ya kawan-kawan blogger!!

Read More ....