Cara Membuat Auto Read More

Bagaimana cara membuat auto read more pada blogspot? Pertanyaan ini seringkali dicarai para pemula blogger. Kegunaan dari read more untuk menyingkat postingan yang ada pada blog kita. Seperti yang Anda lihat pada beranda Bebas Berkarya ini, terdapat tulisan selengkapnya.

Sudah mengerti bukan? Oke..kita langsung saja praktekkan dalam pembuatan auto read more ini. Perhatikan langkah-langkahnya di bawah ini:

1. Login/masuk ke Blogger dengan account Anda
   
   
2. Kemudian pilih tab design, lalu klik edit html. Selanjutnya centang expand widget templates. (ini gunanya agar semua script dapat dilihat).
   
   
3. Cari tulisan </head>. Gunakan control F untuk mempercepat pencarian. Jika sudah ketemu copy dan pastekan kode script di bawah.
   

   <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)
   
   (C)2008 by Anhvo
   
   visit http://en.vietwebguide.com to get more cool hacks
   ********************************************/
   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>
   

   Pastekan tepat di atas </head>
   
   
4. Langkah selanjutnya temukan kode <data:post.body/>
   
   
5. Gantikan semua kode <data:post.body/> dengan script 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>
   

Klik save template

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).

Untuk tulisan "READ MORE" yang berwarna merah dapat diganti dengan tulisan bahasa Indonesia atau apa saja.

Dengan keterangan di atas anda dapat merubah script fungsi auto read more sesuka hati.
Selamat bereksperimen…

Bila anda ingin melanjutkan pembahasan lainnya, maka saya akan memberikan tutorial bagaimana Cara Mengganti Favicon di Blog