Membuat Auto Read More di Blogspot dengan Javascript

Sebelumnya saya pernah menuliskan Cara Membuat Auto Read More di postingan terdahulu, dan ini tanpa JS. Script ini berhasil dan saat saya menulis artikel tutorial ini, saya masih menggunakannya untuk blog Taruih Baraja. Hanya saja, persoalannya adalah saya tidak menemukan di mana letak salahnya kenapa gambar thumbnail-nya menjadi buram. Sampai akhirnya saya coba-coba script yang lain, yaitu script JS ini yang saya temukan di postingan blog sebardi.id ini.

Saya akui memang belum semua bahasa pemrograman dapat saya artikan. Jadi begitulah kenapa saya masih copas script, dan edit sedikit mana yang saya mengerti. Itupun tak jarang setelah mengalami trial and error. Seperti script dari sumber yang sedikit saya sesuaikan untuk blog travel saya: darisinidandarisana (blog baru nih, masih anget banget, nggak tahu gimana nasibnya besok, apakah saya ganti url-nya, ganti judulnya, atau gimana, tapi untuk sekarang, mohon doanya semoga blog ini bisa memberikan manfaat ya).

Caranya tetap menaruh script di atas </head> dan mengganti <data:post.body>. Hanya script-nya saja yang diubah.

Tempelkan script di bawah ini sebelum atau di atas </head> 

    <!--AUTOREADMORE-->
    
    <script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 250;
</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 30px 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>
  
  <!--END AUTOREADMORE-->

Setelah itu, cari <data:post.body/> yang kedua (Jangan tanya kenapa yang kedua ya, saya gak tahu kenapa, di tutorial banyak bilang gitu, saya belum ngulik lebih lanjut), lalu ganti dengan ini:

      <!-- MENGGANTI <data:post.body/> UNTUK AUTOREADMORE -->
      <b:if cond='data:blog.pageType == &quot;item&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>
  <p><a class='more' expr:href='data:post.url'>Lanjut baca ...</a></p>
</b:if>
      <!-- END AUTOREADMORE -->

Setelah itu, simpan

Auto read more dari blog yang masih berbenah

Masih Lorem Ipsum banget nih. Masih belum diisi. Masih otak-atik template dari awal. Meski butuh kesabaran, akhirnya ada kepuasan tersendiri setelah berhasil memodifikasi template blog sesuai keinginan.

Jadi pengen ngelampirin screenshot dari sumber materi kali ini:

Dari blog sebardi.id

Sekian, semoga bermanfaat.