Buat Read More Otomatis di Blog (dengan label gambar)

Read More dapat diartikan baca selanjutnya atau selengkapnya atau berikutnya, yang tentunya berfungsi untuk menyekat atau memotong postingan agar tidak tampil semuanya di halaman depan atau beranda. Untuk menggunakan readmore, anda bisa melakukannya secara manual atau bisa secara otomatis, dan tentu saja kita ingin yang otomatis karena lebih praktis. Sebenarnya kita tidak perlu susah-susah membuat Read More Otomatis atau auto read more di blogspot karena ketika anda menggunakan template yang sudah anda download di beberapa situs penyedia template blogspot, kebanyakan sudah terpasang auto readmore. Namun bagi anda yang masih setia dengan template bawaan blogspot atau bagi anda yang ingin menambah wawasan dan pengetahuan, simak tutorial lengkap cara membuat auto readmore di blogspot berikut ini:

Cara I

1. Pertama Login blog anda  >> lalu pilih rancangan >> Pilih Edit HTML (jangan lupa centang Expand Template Widget)
2. Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.
3. Masukan kode berikut tepat ditas </head>
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>

4. Kemudian cari dan gantilah kode : <data:post.body/> dengan :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Ganti Read more dengan pesan anda dan Save pengaturan, kemudian lihat hasilnya ...

Cara II

1. Cari kode </head>
2. Kemudian copy paste kode di bawah ini sebelum kode tersebut.
   
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <script type='text/javascript'>
   var thumbnail_mode = &quot;float&quot; ;
   summary_noimg = 450;
   summary_img =300;
   img_thumb_height = 110;
   img_thumb_width = 130;
   </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:0;margin:0 10px 0 0"><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>
   </b:if>
3. Lalu cari dan hapus kode di antara <div class='post-header-line-1'/></div> hingga <b:if cond='data:post.hasJumpLink'> dan Ganti dengan kode di bawah:
   
       <div class='post-body entry-content'>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <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>
   <span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'>Readmore &#8594;</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   </b:if>
   </b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
4. Simpan Tempelate dan lihat hasilnya