Cara Membuat Auto Read More dengan Gambar

Read More

Cara Membuat Auto Read More dengan Gambar - Siapa sih yang ga tau apa tu Read More atau yang biasa di tulis Baca Selengkapanya dalam bahasa indonesia, Read More merupakan hal yang cukup penting dalam suatu blog, hampir semua blogger menggunakan auto read more ini.

Pada dasarnya Read More berfungsi untuk menringkas Home Page agar terlihat lebih tertata rapi, apa bila tidak menggunakan Read More, pasti postingan akan tampil semua dan tidak hanya terlihat berantakan, tapi juga akan membuat loading page lambat. Cara memasanga auto read more cukup mudah, seperti berikut.

1. Langkah pertama adalah, masuk ke Edit HTML
2. Lalu masukan kode ini dibawah kode Di bawah </head>
   

   <!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
   <script type='text/javascript'>
   var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
   summary_noimg = 430;
   summary_img = 340;
   img_thumb_height = 150;
   img_thumb_width = 150;
   </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(thumbnail_mode == "yes") {
       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>
   <!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->

3. Huruf / angka berwarna hijau bisa di ubah sesuai selera.
4. Kemudian carilah code <data:post.body/> dan ganti dengan code :
   

   <!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   <b:else/>
   <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>
   <a class='more' expr:href='data:post.url'>Read More >></a>
   </b:if>
   </b:if>
   <!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

5. Ganti kode berwarna hijau sesuai dengan kata yang ingin di tampilkan dalam read more, apabila ingin dirubah dengan gambar, bisa diganti dengan <a href:'URL gambar'></a>
6. Simpan template

Kadang kala apa bila kita menggunakan template dari orang lain templte tersebut biasanya sudah dilengkapi dengan auto read more, seperti blog ini, hehehe..

Sekian dulu dari saya, Terima Kasih

Credit : Buka(n) Rahasia Lagi