cara membuat auto read more dengan thumbnail

Cara membuat auto readmore pada blog - ya memang artikel yang yang panang terlihat sangat tidak rapih pada halaman beranda blog sobat terlebih lagi jika isi artikel memilik banyak paragraph tentunya ini akan menghilangkan nilai ekstetika tampilan blog di mata visitor. untuk itu saya memberi saran kepada sobat untuk menggunkan auto readmore pada blog sobat seperti yang sudah saya terapkan pada homepage blog ini, apa yang sobat lihat pada homepage blog ini ? menarik dan rapih kan. 

terlebih lagi yang saya sukai dari memakai auto readmore ini dapat menghemat waktu loading blog dan terlihat rapih karena sudah diatur jumlah kata dan ukuran gambar

• 7 tips ampuh mempercepat loading blog.

Sekilas tentang auto readmore

seperti yang sudah saya jelaskan fungsi dari readmore diatas, read more ini auto. maksudnya dari auto adalah read more ini secara otomatis membuat posting pada homepage autoreadmore denga pengaturan jumlah kata dan ukuran lebar dan tinggi gambar,jadi lebih mudah kan :D jadi gak usah pakai lagi cara lama (jump break). kebanyakan auto read more yang saya temui tidak menggunakan tag penkondisian yang mengakibatkan posting pada halaman page/laman masih terbentuk readmore, tapi tidak dengan autoreamore ini karena auto readmore ini sudah dibuat berdasarka tag pengkondisian yang tidak akan tampil pada halama laman/page melainkan hanya pada halaman hompage blog saja.

• login keblogger
• pilih template -> edit html
• centang expand template widget
• cari kode </head> untuk mempermudah gunakan ctrl+f
• copy paste kode dibawah ini tepat dibawah kode diatas

<!-- Automatic read more script Start -->
<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 340;
 img_thumb_height = 150;
 img_thumb_width = 150;
 img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-Xkhe9b6uG5yL-_6k_ZPTFNvTIP0DLyUaxfoSsOJ9zDQuB7blUmeVxc02bCwlkLAC44pswRqwB3V8p8Aq1oCZmQwhq6NVPsNvOPqnmHTMDBDTEeb6eo2oycVlHwnwP_sVzw6_oLX9IdC/s1600/default.png&quot;;
</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>
<!-- Automatic read more script End -->

NOTE:

•  summary_noimg = 430; adalah jumlah kata pada artikel yang tidak memiliki gambar
•  summary_img = 340;    kebalikannya dari  summary_noimg, summary_img adalah jumlah kata-kata pada artikel yang mempunyai gambar. 
•  img_thumb_height = 150; adalah pengaturan ukuran tinggi dari gambar untuk auto readmore
•  img_thumb_width = 150; adalah pengaturan dari ukuran lebar gambar untuk auto readmore
•  img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-Xkhe9b6uG5yL-_6k_ZPTFNvTIP0DLyUaxfoSsOJ9zDQuB7blUmeVxc02bCwlkLAC44pswRqwB3V8p8Aq1oCZmQwhq6NVPsNvOPqnmHTMDBDTEeb6eo2oycVlHwnwP_sVzw6_oLX9IdC/s1600/default.png&quot;; adalah gambar pengganti pada artikel yang tidak memiliki gambar

Saran saya sih tidak usah diubah-ubah lagi  karena auto readmore ini sudah diatur denga baik dan rapih

• cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini

<!-- Automatic read more script Start -->
<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 style='text-align:justify;' 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'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->

keterangan.
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri

kode warna biru:  icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.