Auto Create Read More Blog With Image

Sesetengah template blog paparkan entri penuh. Kalau nak bagi pendek untuk paparan muka depan, blogger tersebut kena guna fungsi page break. Kadang-kadang leceh jugak. Tapi tengok selera masing-masing la. Kali ni ada cara mudah untuk buat muka utama blog papar lebih entri.

Sekarang, aku ajar korang cara nak buat fungsi read more beserta gambar.

Login blog, Design >> Edit HTML. Klik kotak "Expand Widget Templates".

Lepas tu, cari kod </HEAD> dan copy kod bawah ni, paste sebelum kod </HEAD>.

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

Untuk maklumat, korang boleh tukar kod ni untuk setkan saiz / tinggi post
summary_noimg = 430; tinggi saiz post jika post tanpa gambar
summary_img = 340; tinggi saiz post jika post tersebut ada gambar
img_thumb_height = 100; tinggi gambar
img_thumb_width = 120; lebar gambar

Skarang, cari kod ni plak <data:post.body/>, lepas tu replace ngan kod bawah ni

<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 "<data:post.title/>"</a></span>

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

 kod read more kat atas ni korang leh ubah jadi perkataan yang korang suka..

Okay.. Selamat mencuba.. Have Fun.. Hahaha...

Terima kasih kerana membaca Sila ke My Blurbs untuk info menarik