Cara memasang Readmore di Blogger

Cara memasang Readmore Otomatis 2 di blogspot

kali ini kita membahas bagaimana cara menambah readmore otomatis pada blogspot, ini versi yang ke dua. di mana cara yang kedua ini lebih enteng dari cara yang pertama, saya pernah mencoba, tapi ydk berhasill. jika anda berminat untuk memasangnya ke dalam blog sobat berikut ini caranya.

• Login ke blogger
• Klik Rancangan
• Edit HTML
• Centang kotak kecil "Expand widget template"
• Kemudian cari kode </head>
• Kalau sudah ketemu pastekan kode di bawah ini di atas kode tersebut
  <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)
  
  ********************************************/
  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>
• 
  
• Kemudian cari kode <data:post.body/>
• Kalau sudah ketemu ganti kode <data:post.body/> tersebut 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>
• Simpan Template anda.
• Jika anda masih menggunakan Readmore versi lama anda harus menghapus terlebih dahulu kode lama tersebut. cara menghapusnya anda bisa melihat kembali tutorial yang anda pakek sebelumnya.
• Selesai...

Catatan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga artikel diatas bermanfaat buat sobat semua dan selamat mencoba, salam sukses...