Cara Membuat Read More Di BLOG

Sebenarnya Membuat Read More Otomatis Seperti di Blog Ini sangat mudah, yg terpenting adalah  bagaimana kalian mencermati dengan teliti, menyimak dan katakan tidak untuk "Menyerah".

Sebelum melangkah  ke cara Membuat Read More Otomatis Seperti di Blog Ini, lebih baik kita tahu Apa itu Read More? dan Apa Fungsi dari Read More Tersebut? Kenapah ? hehehehe 

"Read more" dalam bahasa indonesia yaitu "Baca Selengkapnya" dan Fungsi Read More itu sendiri adalahMeminimalis penggunaan halaman blog agar terlihat lebih rapi, menarik, indah dan cantik. Read more otomatis ini akan memotong tampilan depan postingan atau artikel panjang yang sudah anda buat dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan atau home, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis seperti di blog ini.

                       Berikut langkah-langkah Membuat Read More Otomatis Seperti di Blog Ini

• Login ke Blog anda
• Pilih Template -» Edit HTML -» Expand template widget
• Klik kiri pada mouse 1x dimana saja didalam kotak template
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste-kan kode berikut tepat diatas kode </head> 

  /* --- Start Read More ---- */
  <script type='text/javascript'>
  var thumbnail_mode = &quot;float&quot; ;
  summary_noimg = 250;
  summary_img = 250;
  img_thumb_height = 120;
  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>
  /* --- End Read More ---- */

• 
  

  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> (gunakan CTRL + Funtuk mempermudah pencarian).

  *Kode di atas tersebut biasanya memiliki jumlah 2

  • Jika sudah ketemu silahkan anda ganti kode <data:post.body/> dengan kode dibawah ini : 

    <!-- Start Auto Read More -->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
      <b><span class='rmlink' style='color: #38761d float:left'><a expr:href='data:post.url'>Read More &#8594; <data:post.title/></a></span></b>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <!-- End Auto Read More -->

  • Jika terdapat 3 kode seperti template saya, maka ganti ketiga kode tersebut 
  • Selesai simpan template dan lihat hasilnya......                                                                                                                                                                                                                                                                                                                                                                                     _____SELAMAT MENCOBA______