Cara Membuat Readmore Otomatis

Readmore atau baca selengkapnya merupakan cara yang digunakan untuk memotong kalimat yang ditampilkan pada halaman utama sebuah website.

Selain itu readmore juga berfungsi untuk :
- Menghemat ruang pada halaman utama
- Membuat pengunjung untuk membaca artikel lebih lengkap dengan mengklik readmore
- Menambah trafik blog
- Membuat desain template menjadi lebih elegant tentunya.

Banyak sekali pembuat template terkenal yang memanfaatkan fitur ini untuk membuat desain templatenya menjadi lebih elegant dan enak di pandang oleh pengunjung. Coba saja anda cari beberapa template seo friendly yang terkenal, kebanyakan template tersebut menggunakan fitur readmore otomatis pada halaman utamanya.

Sebenarnya banyak cara pemasangan readmore otomatis pada blog, ada yang hanya menggunakan kata-kata, gambar, dll. Tetapi kali ini saya akan share tentang Cara Membuat Readmore Otomatis yang hanya menggunakan kata-kata agar tidak mengurangi loading blog kita :D.

Berikut Cara Membuat Readmore Otomatis

1. Login blogger
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>
   

   <script type='text/javascript'>
   var thumbnail_mode = &quot;float&quot; ;
   summary_noimg = 150;
   summary_img = 150;
   img_thumb_height = 80;
   img_thumb_width = 120;
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
   //]]>
   </script>

5. Selanjutnya cari kode <data:post.body/>
6. Ganti kode tersebut dengan kode dibawah ini
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&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:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
   </b:if></b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

7. Simpan template.

Note:
Tulisan Readmore bisa anda ganti sesuai dengan keinginan anda.
Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan.

Contoh hasil pada blog acakadul saya :