Cara Membuat Read More di Blog

Cara Membuat Read More di Blog

Untuk Membuat Read More di Blog ikuti cara di postingan ini. Cara ini bisa diterapkan hampir pada semua template Blogspot, tanpa terkecuali. Termasuk template anda yang sedang gunakan sekarang.

Dan juga bagi rekan yang ingin coba-coba buat template Blogspot bisa pergunakan cara saya sharing disini, dan hasilnya bisa lihat seperti pada tampilan muka blog Aku Jalan Terus, dimana setiap artikel terdapat potongan gambar.

Sudah punya gambaran mengenai hasil kamu dapatkan nantinya setelah praktekan cara diatas? Maka langsung lanjutkan kecara berikut ini. Dan jangan lupa share informasi diposting ini, setelah kamu berhasil praktekan caranya.

1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
4. Paste kode berikut, Anda bisa meletakkannya di bawah Kode ]]></b:skin> atau diatas Kode </head> (Terserah Anda)
   <script type='text/javascript'>
   summary_noimg = 500;
   summary_img = 400;
   img_thumb_height = 150;
   img_thumb_width = 210;
   </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>
5. Selanjutnya cari kode <data:post.body/> Atau bila anda Bingung cari Code lengkapnya seperti ini Untuk Template Standar nya Blogspot:
   <b:if cond='data:blog.metaDescription == &quot;&quot;'>
         <!-- Then use the post body as the schema.org description,
             for good G+/FB snippeting. -->
         <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
           <data:post.body/>
           <div style='clear: both;'/> <!-- clear for photos floats -->
         </div>
       <b:else/>
         <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
           <data:post.body/>
           <div style='clear: both;'/> <!-- clear for photos floats -->
         </div>
       </b:if>
6. Ganti Semua Kode Tersebut Diatas dengan kode berikut ini:
       <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
         <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>
   <div style='clear: both;'/>
   <span class='readmore'><a expr:href='data:post.canonicalUrl' rel='bookmark'><b>Read More...</b></a></span>
   </b:if>
   </b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
7. Klik Preview sebelum di save untuk melihat hasilnya
8. Jika tidak ada kesalahan Maka klik save
9. Selesai.