Membuat Readmore Otomatis

Published by Kang Fathur Friday, October 22, 2010

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog kita. Kelebihan dari Readmore Otomatis ini kita tidak perlu menambah kode-kode setiap kita posting seperti readmore versi sebelumnya. Artinya Readmore Otomatis ini langsung secara otomatis dibuat setiap kita posting (gak perlu repot-repot).

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Sobat, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Sobat, ada baiknya perhatikan hal-hal sebagai berikut :

• Download dan simpan template Sobat terlebih dahulu, karena jika pemasangan gagal Sobat masih bisa mengembalikan blog Sobat seperti semula;
  
  
• Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
  
  
• Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Sobat klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Sobat, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
  
  
• Ini yang paling penting, apabila sebelumnya Sobat sudah menggunakan Readmore versi lama, maka hapus dulu codenya.
  

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Seperti biasa Login ke Account Blogger Sobat;
   
   
2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
   
   

   <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[
   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>
   

   
   
   
3. Cari dan 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:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

# Keterangan:

Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.

# Simpan/Save Template, selesai.


Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
   
   
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
   
   
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
   
   
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
   
   
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
   
   
6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat bisa menghapus code script ini <data:post.title/>.
   

Selamat mencoba semoga berhasil dan bermanfaat

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI