Cara Buat Read More Otomatis 2

Cara Buat Read More Otomatis 2. Read more ini sebenarnya melengkapi Cara Buat Read More Otomatis yang pertama. Pada read more ini, kelebihannya dapat mengatasi halaman statis (statics page), maksudnya pada saat menampilkan halaman statis tidak mengalami kendala.

Berikut ini langkah-langkah cara membuat read more otomatis 2 :

• Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
• Download dulu template anda sebelumnya.
• Gunakan Ctrl+F untuk mencari </head>
• Jika sudah, lalu copy script di bawah ini tepat di atas </head>
  

  <script type='text/javascript'>
  var thumbnail_mode = &quot;yes&quot;;
  summary_noimg = 300;
  summary_img = 280;
  img_thumb_height = 100;
  img_thumb_width = 120;
  </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>

  keterangan:
  
  • var thumbnail_mode = "yes" diset yes akan menampilkan thumbnail
  • summary_noimg = 300; adalah banyaknya karakter yang akan ditampilkan jika tidak ada gambar dalam postingan.
  • summary_img = 280; adalah banyaknya karakter yang akan ditampilkan jika ada gambar dalam postingan.
  • img_thumb_height = 100; adalah tinggi gambar thumbnail.
  • img_thumb_width = 120; adalah lebar gambar thumbnail.
Catatan: besarnya angka di atas dapat disesuaikan dengan keinginan anda.
• Selanjutnya cari <data:post.body/> dengan menggunakan Ctrl+F, jika sudah lalu ganti dengan script berikut:
  

  <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>

Keterangan:
• <b:if cond='data:blog.pageType == &quot;static_page&quot;'> dapat mengatasi halaman statis (statics page) yang tidak tampil.
• Selesai, untuk amannya lebih baik di-preview dulu, jika sudah benar baru disimpan.