Cara Membuat Read More Otomatis Artikel Di Homepage

 

 Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Read More Otomatis Artikel Di Homepage.  Ada beberapa cara untuk membuat Read More otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah postingan artikel blog Di Homepage/Beranda.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang diinginkan.

Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.

 Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di Homepage (Beranda):

1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan, 
3. atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
4. Klik Edit HTML.
5. cari kode </head> untuk mempermudah gunakan ctrl+f copy paste kode dibawah ini tepat dibawah kode </head> 

                                                                                                                                                                                    
 <!-- Automatic read more script Start -->
<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 340;
 img_thumb_height = 150;
 img_thumb_width = 150;
 img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXFZhrK02qZKObh_zIHPehRJpm0z4XJ4KVvEFeE9K-fdsGFIpO7dcMOajXWIhqyTcZOVSVhQ_siMOg35Nb0JmaBCfe-PvOd7GraFH6CZkAcuul0EiRtGZGc-_e81tjJOrphi1HoFjQbwC/s1600/default.png&quot;;
</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;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>
<!-- Automatic read more script End -->

                                                                                                                                                                                    

 NOTE:

1.  summary_noimg = 430; adalah jumlah kata pada artikel yang tidak memiliki gambar
2.  summary_img = 340;    kebalikannya dari  summary_noimg, summary_img adalah jumlah kata-kata pada artikel yang mempunyai gambar. 
3.  img_thumb_height = 150; adalah pengaturan ukuran tinggi dari gambar untuk auto readmore
4.  img_thumb_width = 150; adalah pengaturan dari ukuran lebar gambar untuk auto readmore
5.  img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXFZhrK02qZKObh_zIHPehRJpm0z4XJ4KVvEFeE9K-fdsGFIpO7dcMOajXWIhqyTcZOVSVhQ_siMOg35Nb0JmaBCfe-PvOd7GraFH6CZkAcuul0EiRtGZGc-_e81tjJOrphi1HoFjQbwC/s1600/default.png&quot;; adalah gambar pengganti pada artikel yang tidak memiliki gambar

Saran saya sih tidak usah diubah-ubah lagi  karena auto readmore ini sudah diatur denga baik dan rapih

6.cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini

                                                                                                                                                                                   

<!-- Automatic read more script 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 style='text-align:justify;' 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'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->

                                                                                                                                                                                    

 keterangan:
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri

kode warna biru:  icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.