23 September 2010

Tutorial 'Baca lagi' secara automatik setiap post

Tutorial "Baca lagi" ini dibuat pertanyaan oleh cik Ellen. Terdapat beberapa cara untuk membuat "baca lagi" ini seperti memasukkan kod setiap post dan tanpa gambar. Tutorial ini berdasarkan "baca lagi" blog Riwayat Hariku iaitu "baca lagi" secara automatik dan memamparkan gambar 'thumbnail' yang pertama setiap entry.

Ikuti langkah berikut untuk membuat "baca lagi":
1. Setiap kali sebelum membuat sebarang perubahan, pastikan membuat backup template anda. Langkah keselamatan.. huhuhu
2. Masuk ke akaun Blogger > Design > Edit HTML
3. Cari perkataan </head> [tekan Ctrl + F keyboard untuk shortcut]
4. Masukkan kod di bawah sebelum perkataan </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>
5. Yang warna ungu di atas boleh diubah saiz mengikut kesesuaian
6. Kemudian, cari <data:post.body/> dan gantikan [replace] dengan kod di bawah:


<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'> BACA LAGI "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
7. Tekan 'Preview' untuk melihat jika terdapat sebarang masalah. Jika, ok sahaja sila pilih Simpan [Save]

Semoga berjaya :)


EmoticonEmoticon