Artikel Kali ini kita akan membahas Cara Membuat Readmore , Fungsi readmore , selain merampingkan artikel kita pada halaman web, juga dapat mempercepat loading website, Hal ini tentu sangat menguntungkan bagi blog kita, dikarenakan tidak akan membebani website kita, sehingga kecepatan loading halaman website kita akan tetap terjaga dan meningkat.

Readmore otomatis di blogspot ini akan memotong artikel blog kita, dan dengan ini kita bisa menentukan panjang tulisan yang muncul pada halaman blog kita sebelum user / pengunjung melihat artikel kita keseluruhan.

Ok. Langsung Saja kita Mulai ,

1. Cara Membuat Readmore otomatis Tanpa Javascript

NB : Jangan Lupa Backup Dulu Template anda Sebelum Melakukan Perubahan.

1. Login ke blogger sobat
2. Pilih Elemen Template -> Edit HTML
3. Cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f
4. Copy / salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

 5. Cari kode <data:post.body/>  , Gunakan Ctrl+ F, untuk membantu anda mencari kode tersebut, apabila sudah ketemu silahkan ganti code tersebut dengan  kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

 6. Jika Sudah Selesai Simpan Template blog anda dan lihat Hasilnya.

 2. Cara Membuat Readmore Otomatis dengan Javascript

NB : Jangan Lupa Backup Dulu Template anda Sebelum Melakukan Perubahan.

1. Login ke blogger sobat
2. Pilih Elemen Template -> Edit HTML
3. Cari kode</head>, untuk mempermudah silahkan menggunakan ctrl+f
4. Copy / salin kode di bawah ini dan letakkan tepat di atas 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>

NB :

1. Summary_noimg = banyaknya huruf / tulisan artikel jika tidak ada gambar di dalam artikel
2. Summary_img = banyaknya huruf / tulisan artikel jika ada gambar di dalam artikel
3. Img_thumb_height = Ukuran Tinggi Gambar
4. Img_thum_width = Ukuran Lebar Gambar

5. Cari kode <data:post.body/>  , Gunakan Ctrl+ F, untuk membantu anda mencari kode tersebut, apabila sudah ketemu silahkan ganti code tersebut dengan  kode di bawah ini. dan apabila sebelumnya anda sudah menggunakan readmore maka hapus kode yang lama, dan jika <data:post.body/> lebih dari satu , cobalah satu persatu. 

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

6. Simpan Template Anda, dan lihat perubahannya.

Ok. Demikianlah artikel Cara Membuat Readmore otomatis di Blog , dengan javascript atau tanpa javascript.