Cara Membuat Read more secara Otomatis di Blog dengan Script HTML

Read more dalam bahasa indonesia berarti Baca selengkapnya, kurang lebih seperti itu artinya. Dalam sebuah blog read more/ baca selengkapnya digunakan untuk memperpendek tampilan suatu postingan di homepage (halaman depan/awal) suatu blog, sehingga blog tampil lebih rapi dan menarik.

Ada dua cara yang saya ketahui untuk membuat readmore khusunya di blogger/ blogspot, yaitu dengan cara manual adalah cara dimana kita harus mengedit satu persatu post diblog yang harus di tambahkan INSERT JUMP BREAK disetiap posting/ artikel blog kita.


Sedangkan untuk cara ke-2 adalah dengan cara mengedit kode html pada Template blog yang ditambahkan beberapa script baru

Cara Membuat Read More Otomatis Untuk Postingan di Blog

1. Buka Blog sobat> masuk ke Blogger Dashboard

2. Pilih Template kemuadian klik  Edit Html

3. Cari Kode </head> (tekan CTRL + F atau F3 untuk mempermudah dalam pencarian)

4. Letakan Kode Script dibawah ini tepat diatas kode </head>

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

Keterangan yang berwarna biru:

• summary_noimg = 100; adalah banyaknya huruf jika tidak terdapat gambar
• summary_img = 100; adalah banyaknya huruf jika terdapat gambar
• img_thumb_height = 60;  ukuran tinggi gambar
• img_thumb_width = 90; ukuran lebar suatu gambar

5. Selanjunya  cari kode <data:post.body/>   (Klik 2x/ atau cobak kode tersebut satu per satu)

6. Ganti Kode <data:post.body/>  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>

Note: jika anda sudah pernah memasang Kode Read More sebelumnya silahkan dihapus dulu kodenya!!, dan sobat juga bisa mengganti lulisan read more, dengan tuisan yang lainya seperti Baca selengkapnya, dll.

7. Kemudian Simpan Template dan Lihat Hasilnya

Cara ini telah saya cobak di blog saya yang satunya dan ini berhasil!!