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

• Cara Menambahkan Gambar Background Pada Blog
• Cara Membuat Tombol Share Melayang di Blog
• Cara Menambahkan Google Analytics di Blogger
• Cara Membuat Slideshow Postingan Blog
• Cara Mengetahui Blogger Sekota atau Sedaerah
• Cara Membuat Spoiler di Blog
• Cara Membuat ReadMore Otomatis di Blogger
• Cara Bikin Kotak Dengan Sudut Melengkung
• Cara Mudah Membuat Menu Tab View di Blogspot
• Cara Mudah Menghilangkan Read More Otomatis Pada Laman Blog
• Membuat Icon Burung Twitter Berterbangan di Blog
• Cara Menambah Gambar Sebelum Judul Posting
• Cara Membuat Footer 3 Kolom di Blogger
• Cara Mengganti Template Blog
• Cara Membuat Blog agar SEO Friendly