Cara Membuat Auto Readmore

Pada saat membuat suatu artikel / postingan pada blog maka pada halaman home apabila sebuah artikel tersebut telah kita publish disanalah akan tampil seluruhnya isi dari yang telah di buat tadi,apabila dalam blog tersebut baru cuma satu artikel yang di buat  kelihatannya mungkin ga ada masalah buat para pembaca walaupun isi dari artikel tersebut panjang bahasannya.
Tetapi kalau didalam blog tersebut artikel nya sudah banyak yang dibuat maka keseluruhan dari artikel akan muncul pada halaman home,dan tentunya apabila isi dari tiap-tiap artikel tersebut panjang-panjang bahasannya maka pada halaman home akan memanjang ke bawah dan kemungkinan para pembaca tidak tahu akan semua artikel apa saja yang telah dibuat pada suatu blog tersebut karena mungkin para pembaca enggan membaca keseluruhan dari halaman home tersebut dibaca sampai ke bawah.

Jump Break

Untuk mengatasi hal tersebut diatas kita buat setiap artikel yang dibuat kita ringkas untuk tampil dihalaman home,jadi buat para pembaca akan tahu semua artikel yang telah dibuat oleh si pemilik blog.

Sebenarnya pada bawaanya blogger sudah diberikan untuk melakukan jump break tersebut,namun kemungkinan apabila kita lakukan secara manual jump break tersebut disetiap artikel hasilnya tidak akan sama pada setiap artikel panjang karakternya,dan akan kelihatan kurang rapi tampil pada halaman home.

Untuk itu kita buat cara supaya bisa meringkas isi dari setiap artikel sama panjang isi karakternya dan akan kelihatan rapi tampil pada halaman home,inilah yang dimaksud membuat Auto Readmore sesuai dengan tema kali ini.

Cara pembuatan auto readmore 

Langkah pembuatan auto readmore pertama kita cari kode

</head>

gunakan bantuan ctrl+f biar cepet dalam pencarian,setelah ketemu coba tambahkan kode ini diatasnya:

<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;
 // ganti angka dibawah untuk merubah ukuran thumbnail/image
 img_thumb_height = 200;
 img_thumb_width = 200;
 // ganti dengan gambar sesuai selera anda,ini yang akan tampil pada saat suatu postingan tidak ada image
img_thumb_nosrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2EFt-lyASLBeE4Y_cLOtlyc51MtisC9VMEuDrZEMGGkGTMRj9Fs9uZ-ay5w-tIHoaaALZWjRkoxmsL9A7CYM0e17matKJr374PIEyqmRE8zu7SYaqnf0hsFjcEUkmoolSSwK1N5wBmbmH/s1600/default.png";
</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;
  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>

Setelah itu lanjut cari kode

<data:post.body/>

Kemudian coba ganti kode tadi dengan yang ini

<b:if cond='data:blog.pageType != "static_page"'>
<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;margin-top:10px'>  
<a expr:href='data:post.url'> Read More &#187;</a></span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Apabila sudah diganti coba di simpan atau di save template,apabila tidak ada kesalahan dalam penyimpanan maka sudah selesai lah pembuatan auto readmore,dan coba lihat pada halaman home gimana sudah berhasilkah.
Sekarang postingan sudah bisa auto readmore,jadi tidak usah melakukan jump break lagi secara manual.

Oke Happy Blogger.