Membuat Read More Dengan Thumbnail

Kali ini saya akan share tentang cara membuat auto readmore dengan menggunakan thumbnail, sebenarnya tips ini sudah saya post beberapa kali, tapi karena masih banyak yang minta caranya tarpaksa saya post ulang. tanpa basa basi 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/AVvXsEiqlQwbXO-TfpiEwa_aGTWoyoWTiumr6olJgKHVPFBavpAnDVpNHCGpijcQ1mKUvXS4Tt77sO-nYvq5psMAfnCvDzOYnZAO8nOucIV_hagXEbVcOjHKpQ2lwoO4K29Z6zZs4u5kfvZ0t2o/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/AVvXsEiqlQwbXO-TfpiEwa_aGTWoyoWTiumr6olJgKHVPFBavpAnDVpNHCGpijcQ1mKUvXS4Tt77sO-nYvq5psMAfnCvDzOYnZAO8nOucIV_hagXEbVcOjHKpQ2lwoO4K29Z6zZs4u5kfvZ0t2o/s1600/readmor10.png : bisa kalian ganti dengan URL dimana menyimpan logo read morenya