Cara Membuat Readmore dengan Thumbnail

Kali ini saya akan share tentang cara membuat auto readmore dengan menggunakan thumbnail, sebenarnya versi ini milik teman saya tapi saya modifikasi dengan menambahkan thumbnail, dari pada berlama lama mending langsung saja kita mulai.
Pertama, masuk ke mode Design > Edit HTML (Expand Widget Template) lalu temukan kode </head>
dan letakkan kode berikut tepat diatasnya:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ; summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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;
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> 

Langkah kedua,  temukan kode <data:post.body/> atau <p><data:post.body/></p>
ganti salah satu kode di atas dengan kode di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img alt='read_more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZMA7C3t3iYOrgCYPoMSWam_6xg3sIguOC5iLpmhEmOHyLfWeBNG568tGUlwms0wTb4Sk7nUFQFFbYHQYTWcNM5av5ZzGbi-9vmXlPRAl6C1dSxavEMBG6Q61YupBC1o1ZjnfQ7MJr0M/s1600/readmor10.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:

1. summary_noimg = 250 : berarti jumlah karakter yg dipenggal tanpa gambar
2. summary_img = 250 : berarti jumlah karakter yg dipenggal disertai dg gambar
3. img_thumb_height = 120 dan img_thumb_width = 120 : ukuran gambar dalam satuan piksel
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZMA7C3t3iYOrgCYPoMSWam_6xg3sIguOC5iLpmhEmOHyLfWeBNG568tGUlwms0wTb4Sk7nUFQFFbYHQYTWcNM5av5ZzGbi-9vmXlPRAl6C1dSxavEMBG6Q61YupBC1o1ZjnfQ7MJr0M/s1600/readmor10.png : bisa kalian ganti dengan URL dimana menyimpan logo read morenya