Membuat Auto read More

Kalo yang ini mesti sobat cobain deh, yap "Auto Read More" pastinya bertujuan agar postingan sobat lebih ringkas. Gak perlu lama-lama deh silakan coba langkah-langkah berikut ini :

1. login ke blog sobat, jika sudah masuk ke rancangan >> Edit Html

2. beri tanda centang pada "Expand Widget Templates"

3. lalu copy kode dibawah, letakkan tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-i8j6RDY10iUUDu8hha5snjB14og6NgmsW1QIMc-asWQWZLYu0nzDxc9QfSppbDnF31IeS1eDGno2grRGzOIoVtqSyzhTd-pQTCmH4q6lzAMqtES7oP4pFufi1E2lbV8e70g4Lt9A/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-i8j6RDY10iUUDu8hha5snjB14og6NgmsW1QIMc-asWQWZLYu0nzDxc9QfSppbDnF31IeS1eDGno2grRGzOIoVtqSyzhTd-pQTCmH4q6lzAMqtES7oP4pFufi1E2lbV8e70g4Lt9A/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>

5. Selanjutnya sobat ganti dengan kode dibawah :

<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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>

6. Jika sudah SAVE template sobat

7. lalu lihat apakah berhasil atau tidak.