Monday 21 May 2012

Cara memasang fungsi Read more

Memasang fungsi Read more ni juga boleh dikatakan amat penting bagi seseorang blogger yang inginkan trafik blog mereka meningkat,malah mampu membuatkan blog mereka kelihatan kemas.Jadi kalau korang perasan semua blog2 otai yang pageviewsnya tinggi guna fungsi ni.Jadi,jom ikut tutorial ni skrang :)

Sebelum tu,
Disebabkan langkah ni memerlukan kita edit template kita,jadi lebih baik korang download dulu template korang.

Langkah 1
Pergi ke Dashboard>Template>Edit Html>Proceed>tick pada Expand widget template

Langkah 2
Aktifkan fungsi find dengan cara klik ctrl + F kemudian cari kod </head>


Langkah 3
Paste kod dibawah kemudian paste kod tersebut sebelum kod </head>

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

Langkah 4 
Aktifkan fungsi find dengan cara klik ctrl + F kemudian cari kod <data:post.body/> pada ruang find.

Langkah 5
Gantikan kod <data:post.body/> dengan kod yang diberikan dibawah.
<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyb3s3gfPUGb1oJdoTzS2B-4YnEUg69vqWEd5FKbBYWmex3P2ccBkismOqBgOqW6npqQ24B1S7Sn8wilp46_cOVV_Z21j6JiKUE1jPoKsB2rv7nluEnjPwe34MotLGhfkq12dOVMrQNOI/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>

Dan akhir sekali cuba klik preview dan jika read more tu keluar dan tiada error.Klik saja save.:)

4 comments:

  1. wah, tutorial bergambar, saya ska :)

    ReplyDelete
    Replies
    1. baguslah,saya mmg harap org suka cara saya menyampaikan tutorial..XD

      Delete
  2. saya dah try edit pada test blog.. ok jer tutorial nih,mmg menjadi..mungkin ummi hanifah trtinggal beberapa step.. :D

    ReplyDelete

Jangan malu2 untuk meninggalkan komen~:D