Rasanya kurang menarik apabila dalam halaman utama (Home/Beranda) sebuah Blog berisi postingan utuh yang panjang, ini karena akan menyita ruang halaman utama yang seharusnya menggambarkan sebagian besar dari postingan kita. Untuk itu perlu adanya pemenggalan postingan agar halaman utama blog kita menjadi lebih menarik. Salah satu cara untuk membuat pemenggalan postingan (Readmore) yang bisa dilakukan secara otomatis adalah dengan menggunakan Javascript.

Cara kerja dari script ini adalah membuang tag html, mengambil beberapa huruf saja, menambahkan image serta menambahkan hyperlink yang mengarahkan pada postingan yang sebenarnya.

Fungsi dari pemasangan Readmore:
  • Menghemat Ruang pada tampilan halaman utama sebuah website. 
  • Menjadi Lebih Elegant dan Interaktif. 
  • Membuat pengunjung membaca artikel tersebut hingga selesai. 
  • Menambah pageviews artikel yang dibaca oleh pengunjung. 
  • Menambah Link Anchor terhadap keyword judul. 


<script type='text/javascript'>
 summary_noimg = 550;
 summary_img = 450;
 img_thumb_height = 150;
 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(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>