Cara Membuat ReadMore Otomatis di Blogger

Pada postingan kali ini saya akan berbagi ilmu tentang cara membuat "ReadMore" otomatis pada postingan blog. Trik ini hanya ditujukan untuk blogger pemula (newbe seperti saya).

Readmore fungsinya untuk memenggal postingan yang terlalu panjang dihalaman utama blog, sehingga terlihat rapi dan menarik.

Bagaimanakah caranya? Ikuti totorial berikt ini :

Pertama, login ke akun blogger anda, lalu pilih tata letak. Klik edit HTML, dan jangan lupa centang pada "expand widget template". Download template lengkap untuk menjaga ketika terjadi error pada template blog anda.

Ke-Dua, Cari kode </head>, laku letakkan kode ini tepat diatas kode
</head>.

• <script type='text/javascript'>
  var thumbnail_mode = &quot;float&quot; ;
  summary_noimg = 450;
  summary_img = 500;
  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>

Ke-Tiga, cari kode html berikut ini
<data:post.body/>
Kalo sudah, ganti kode
<data:post.body/>
dengan semua
kode dibawah 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:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
  
  
  </b:if>
  
  <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Klik Simpan dan lihat hasilnya.

Keterangan :
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)

Artikel Terkait Blogging