Tricks: Auto Read More Untuk Blogger

Fungsi "Read More" amat penting bagi sesebuah blog. Ia dapat mengelakkan sesebuah post yang terlalu panjang terpapar di muka utama blog. Dengan adanya fungsi "Read More", hanya ringkasan post yang akan terpapar di muka utama blog anda. Jadi, ia akan memendekkan muka utama blog anda. Ini untuk kaedah "Auto Read More". Sebelum ini ada kaedah yang hampir sama tetapi anda perlu menambah beberapa tag di dalam post anda dan post-post yang terdahulu tidak termasuk dalam fungsi "Read More". Susah dan melecehkan.

Kelebihan fungsi "Auto Read More":-

• Automatik mempamerkan gambar post dan kemudian isi post.
• Tidak perlu menambah sebarang kod pada post anda.
• Tidak perlu update post-post yang terdahulu.
• Imej "Read More" yang menarik. Lihat gambar di atas.
  
• Tidak ada javascript. Blog tidak menjadi berat.
• Sesuai untuk semua template yang tidak mempunyai fungsi "Auto Read More"

OK, let see how to do this. Mudah.
Pergi ke Dashboard >> Layout >> Edit HTML, pastikan
Expand Widget Templates
dan cari tag </head>.

Kemudian anda "copy" letakkan kod di bawah SEBELUM tag di atas.

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

Sekarang cari pula tag <data:post.body/> dan GANTIKAN dengan kod di bawah:-

<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'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>

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

Klik "Save Templates" dan selesai.

Anda boleh gantikan url http://i37.tinypic.com/351icqx.jpg dengan salah satu url image di bawah:-


http://img15.imageshack.us/img15/1821/black1q.gif


http://img15.imageshack.us/img15/4785/blackfc.png


http://img27.imageshack.us/img27/6199/black1l.gif


http://img27.imageshack.us/img27/8146/bluedark.gif


http://img27.imageshack.us/img27/3691/pinkua.png


http://img27.imageshack.us/img27/5526/lightorange.gif


http://img27.imageshack.us/img27/7469/red1.gif


http://img20.imageshack.us/img20/4997/grey1.gif

Anda juga boleh DOWNLOAD koleksi butang "Read More" seperti di atas dan upload ke dalam hosting anda sendiri.