Cara Membuat Auto Readmore

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah script untuk meringkas teks artikel blog yang disertai gambar preview pada halaman utama blog sehingga tampilan utama halaman blog dapat diringkas dan dapat mempercepat waktu loading. Auto Readmore (Thumbnails) merupakan penyempurnaan dari script auto readmore v1.00, di mana pada versi 1.00 ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dalam auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di atas kode </Head> tersebut.
  
  
  <script type='text/javascript'>
  var thumbnail_mode = "no-float" ;
  summary_noimg = 430;
  summary_img = 340;
  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(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 :
  • summary_noimg=450 (untuk tinggi postingan tanpa gambar)
  • summary_img=360 (untuk tinggi postingan dengan gambar)
  • img_tumb_height=120 (tinggi gambar)
  • img_tumb_width=150 (lebar gambar)
  • readmore.... (bisa anda ganti dengan baca selengkapnya, dll...)


• Bagi yang sudah menggunakan readmore versi lama, sebaiknya anda mengembalikan kode seperti semula, dengan menghapus kode yang berwarna biru di bawah ini dan sesuaikan dengan template anda karena setiap template memiliki kode yang berbeda-beda. Jika anda belum pernah menggunakan auto readmore v1.00 silakan lewati langkah ini.
  
  
  <div class='post-header-line-1'/>
  <div class='post-body'>
  <b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
  <b:else/>
  <style>.fullpost{display:none;}</style>
  <p><data:post.body/></p>
  <a expr:href='data:post.url'>Readmore</a>
  </b:if>
  <div style='clear: both;'/>
  
  Sehingga sekarang hanya ada satu <data:post.body/>


• Cari dan Ganti kode : <data:post.body/> atau <p><data:post.body/></p> dengan kode di bawah ini.
  
  
  <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:left'><a expr:href='data:post.url'>Read More.... <data:post.title/></a></span>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
  </b:if>
  
  
  Anda bisa mengganti kata "Read More...." dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan "Read More...." tersebut dengan:
  
  
  <img border='0' src='url (direct link) gambar readmore'/>
  
  
  Agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified) ??? Lihat bagian kedua pada script di atas. Jika auto readmore sudah dipasang (gunakan Ctrl + F) cari kode berikut ini :
  
  
  <div expr:id='"summary" + data:post.id'>
  
  
  Kemudian tambahkan kode style css (style='text-align:justify;') kedalam kode tersebut sehingga menjadi :
  
  
  <div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>


• Klik "Save" dan lihat hasilnya...

.: Semoga Bermanfaat :.