Tutorial: Auto Read Mode dengan Thumbnail No Image di Blogger

Auto Readmore dengan Default Thumbnail

Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langkah mudah
1. Tambahkan JavaSript
2. Tambahkan HTML

01Menambahkan JavaScript
Sebelum melakukan apa pun, saya sarankan backup dulu template anda untuk menghindari hal yang tidak diinginkan.
Untuk menambahkakan kode JavaSript dibawah ini, simpan kode dibawah ini sebelum </head>

<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;

 // ganti angka dibawah untuk merubah ukuran thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200;

 // ganti dengan gambar sesuai selera anda
 img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XszRZgWFRlvTTWUjVfpX9Vaz3ovUCR6HJoUXnkPLm95EhZz2dnlMV6YoynMmAkOjjbBPMW9JaCnryrQXKrI5ZDOIcaFO0dX2BQwjtLR2BGy8aXHNo0era9O_o5Y-zRdPuo4wH_EDfrBF/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>

02Menambahkan Kode HTML
Cari kode <data:post.body/> dan ganti dengan kode dibawah 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>

03Simpan template Anda, dan selamat.... Anda telah berhasil menambahkan auto readmore dengan default thumbnail.