Membuat fungsi readmore untuk memotong halaman blog

Jika kita men-setting halaman posting dalam beberapa halaman di halaman depan blog kita, maka akan tampil semua, dan jika tulisan kita panjang maka tentu akan turun sangat panjang. sehingga blog kita kelihatan kurang rapi. untuk itulah kita membutuhkan script yang akan memotong halaman posting kita dihalaman depan, dengan menggunakan fungsi readmore.

Membuat fungsi readmore di blog kita sangat penting, karena itu akan membuat halaman depan posting kita akan terlihat simple dan rapi berikut cara meletakkan fungsi readmore di blog.

1. Login ke Blog sobat setelah itu klik Template lalu Klik Edit HTML.

2. Setelah itu Klik Lanjutkan.
   
3. Centang Expand Template Widget
   
   
4. Cari kode </head> Lalu masukkan code berikut di atasnya.
   
   <script type='text/javascript'>
   summary_noimg = 500;
   summary_img = 300;
   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>
5. Kemudia cari kode <data:post.body/> dengan Menekan Ctrl + F di keyboard lalu masukkan kata kunci yang akan dicari. Dalam hal ini masukkan <data:post.body/>
   
   Cari kode berikut :
   
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
   <data:post.body/>
   Hapus kode <data:post.body/> ganti dengan kode dibawah. *catatan :Kalau anda menemukan kode <data:post.body/> ada 2 pilih yang pertama.
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <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>
   <span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
   <b:else/>
   <data:post.body/>
   </b:if>
6. Simpan Template Anda dan lihat hasilnya.

Selamat mencoba semoga sukses... :)