Untuk Post Kali Ini Sy Akan Berkongsi Cara Untuk Membuat Auto Readmore pada blogspot. Dengan mengenakan coding ini pada blogspot, semua post anda akan automatic membuat auto readmore tidak kira untuk post baru ataupun lama. Untuk module sebelumnya sy telah berkongsi cara membuat Readmore pada posting. Untuk membuat auto readmore pastikan anda telah membuang semua readmore effect yang dikenakan pada post2 sebelum ini.

1 Pergi Dashboard > Design > Edit HTML.
2 Back up template.
3 Klik "Expand Widget" check box.
4 Cari coding </head>. (Ctrl + F untuk memudahkan perncarian)
5 Letak coding Read More dibawah selepas </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

6. Selepas itu cari koding <data:post.body/>
7 Gantikan coding tersebut dengan coding dibawah

<!-- Auto read more Start -->
<!-- http://www.syoknyerblogging.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Klik preview, Jika tiada sebarang masalah,tekan save.
Menukar effect

Untuk menukar effect auto readmore sila tukar pada bahagian berikut

1. thumbnail_mode – tukarkan = "no" jika mahu memaparkan text sahaja yakni tanpa gambar.
2. summary_img – jumlah character yang ingin ditunjukkan bersama gambar sebelum auto readmore.
3. summary_noimg – Jumlah character yang ingin ditunjukkan jika tiada gambar.
4. img_thumb_height and img_thumb_width - Tukar kelebaran dan ketinggian gambar dalam pixels.

Diharapkan tutorial ini membantu anda. Selamat mencuba.. (^^,).

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/module-11-cara-membuat-auto-readmore.html">Module 11: Cara Membuat Auto ReadMore Pada Blogspot</a>