Cara Memasang Auto Read More Dengan Thumbnail Blogger

Auto Read More dengan Thumbnail berfungsi untuk memotong Postingan dan Menampilkan Thumbnail berdasarkan gambar yang ada di Postingan tersebut secara otomatis. Auto Read More dengan Thumbnail bisa dibilang lebih Praktis daripada Read More yang manual karena kita tidak perlu menambahkan Kode di Setiap Postingan. Thumbnail tentunya juga membuat tampilan lebih menarik dan lebih menjelaskan isi dari Postingan tersebut.

Bagaimana Cara Memasang Auto Read More? 

Oke, untuk memasang Auto Read More, Temen - temen Blogger hanya perlu mengikuti langkah - langkah simple berikut ini :

1. Login ke Blogger dan Langsung menuju ke Dashboard > Template > Edit HTML. (Jangan Lupa untuk Back Up Template terlebih dahulu.)
2. Cari kode : </head>
3. Copy Kode di Bawah ini dan Pastekan di Bawah kode </head> tersebut :
   

   <!-- Auto read more script Mulai -->
   <script type='text/javascript'>
   var thumbnail_mode = "yes";
   summary_noimg = 430; //panjang tulisan tanpa gambar
   summary_img = 340; //panjang tulisan dengan gambar
   img_thumb_height = 200; // tinggi gambar thumbnail
   img_thumb_width = 200; // lebar gambar thumbnail
   </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 Berakhir -->

4. Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :
   

   <!-- Auto read more Mulai -->
   <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'>Baca Selengkapnya</a>
   </b:if>
   </b:if>
   <!-- Auto read more Berakhir -->

5. Save Template!. Selesai.

Memodifikasi Auto Read More. 

• thumbnail_mode : setting menjadi "yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen - temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
• Pada kode kedua, Temen - Temen Blogger juga Bisa merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan Temen - temen Blogger.