Membuat Read more / Baca Selengkapnya Otomatis Blogger [Versi Baru]

Wah kelihatannya menarik dan perlu dicoba cara- cara yang satu ini. karena apa? soalnya setelah kita berhasil dengan cara- cara nanti, kita posting maka read more / baca selengkapnya akan mengatur sendiri secara otomatis...enak bukan. Tanpa kita menanamkan kode- kode di postingan kita. Saya berani share ini karena saya sudah mencobanya di blog saya ini. dan saya dapatkan dari oom. terima kasih oom.

Sekarang gantian saya share barangkali ada teman- teman yang kebetulan mampir di blog saya ini dan membutuhkan tutorial ini. OK...kita mulai saja: ., Eits saya lupa, sebelum kita masuk cara ada baiknya saya beritahukan bahwa jika teman- teman dulu pernah membuat read more [read more yang dulu], maka sebaiknya dihapus dulu.

Cara membuat Read More Otomatis di Blogspot

• Pertama , Login ke akun blogger teman
• Pada Dhasboard Pilih Tata Letak - Edit HTML
• Cari kode </head>
• Letakkan Kode di bawah ini di atas kode </head> tadi
  

  <script type='text/javascript'>
  var thumbnail_mode = "float" ;
  summary_noimg = 250;
  summary_img = 250;
  img_thumb_height = 120;
  img_thumb_width = 120;
  </script>
  
  
  <script type='text/javascript'>
  //<![CDATA[
  /******************************************
  Auto-readmore link script, version 2.0 (for blogspot)
  
  (C)2008 by Anhvo
  
  visit http://en.vietwebguide.com to get more cool hacks
  ********************************************/
  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:
   var thumbnail_mode = "float" [kita dapat memutuskan apakah letak thumbnail atau gambar kita di (float) kiri atau kanan atau jika tidak ganti dengan (no-float)]
   summary_noimg = 250 [menetapkan berapa banyak karakter yang ditampilkan pada posting tanpa gambar]
  summary_img = 250 [menetapkan berapa banyak karakter yang ditampilkan pada posting yang menggunakan gambar / dengan gambar]
  img_thumb_height = 120; [mengatur tinggi thumbnail / gambar dalam ukuran pixel]
  
  img_thumb_width = 120; [mengatur lebar thumbnail / gambar dalam ukuran pixel]
  
  
  
  
• Klik Simpan Template
• Kita masih ada pada halaman Edit HMTL , sekarang teman- teman centang kotak kecil Expand Template Widget
• Sekarang cari kode di bawah ini
  
  

  <data:post.body/>
  

  atau Jika tidak menemukan kode tadi, cari kode ini
  
  

  <p><data:post.body/></p>
  

  
  
• Hapus kode tadi, lalu ganti dengan kode- 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>
  

  
  
• Selanjutnya, klik Simpan Template
• Lihat hasil dan previewnya