Cara Membuat Read More Otomatis Pada Blog

Jika sobat melihat di beberapa blog ataupun website biasanya terdapat tulisan read more atau icon yang bertuliskan read more. Untuk memasang raed more sendiri pada artikel pada pihak blogger telah menyediakan fasilitas ini pada saat anda hendak menulis artikel yaitu perintah “Split post”. Akan tetapi cara ini dianggap rumit serta merepotkan bagi sebagian sobat blogger apabila setiap menulis artikel harus menekan perintah split post, oleh karena itu pada postingan kali ini saya akan membahas bagaimana cara membuat Read more otomatis pada blog. Cara memasangnya adalah sebagai berikut:

1. Terlebih dahulu login ke blogger atau klik disini
2. Pilih template >> Edit Html >> Lanjutkan
3. Centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code </head>

<script type='text/javascript'>
      var thumbnail_mode = "float" ;
      summary_noimg = 250;
      summary_img = 250;
      img_thumb_height = 120;
      img_thumb_width = 120;
      </script>
      <script type='text/javascript'>
      //<![CDATA[
      /******************************************
      Auto-readmore link script, version 2.0 (for blogspot)
      (C)2008 by Fais
      visit http://en.vietwebguide.com to get more cool hacks
      ********************************************/
      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. Cari code <data:post.body/> setelah ketemu hapus dan ganti dengan code di bawah ini

<b:if cond='data:blog.pageType != "item"'>
      <div style=' text-align: justify;' 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
      </b:if>
      <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>