Membuat auto read more thumbnail di blog

Auto read more thumbnail adalah sebuah gambar preview dari isi postingan blog sobat.
Berbeda dengan auto read more (baca selengkapnya) dengan auto read more thumbnail, jika auto read more (baca selengkapnya) biasanya digunakan untuk mengirit ruang postingan blog sobat agar tidak membutuhkan latar postingan yang panjang, sedangkan auto read more thumbnail adalah sebuah gambar preview dari postingan blog sobat. Misalnya jika postingan blog sobat di dalamnya terdapat gambar, maka gambar itu akan muncul pada halaman awal-nya... Jika sobat masih bingun, ini saya ada screen-shootnya

Jika sobat tertarik dengan auto read more thumbnail, silahkan ikuti tutorial di bawah ini
1. Pertama sobat login terlebih ke akun blogger sobat
2. Pilih rancangan > template > edit HTML > centang expand template widget
3. Cari kode </head> 
4. Copy dan pastekan kode di bawah ini tepat di bawah kode </head>

<!-- Auto read more script -http://cahblk.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
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");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script -http://cahblk.blogspot.com- End -->

Yang berwarna hijau adalah jumlah dan ukuran tampilan,  
summary_noimg=jumlah karakter tanpa gambar, 
summary_img=jumlah karakter dengan gambar,   
img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan sobat.

5. Kemudian cari <data:post.body/>

dan ganti dengan kode di bawah ini

<!-- Auto read more -http://cahblk.blogspot.com- Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

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

<a class='more' expr:href='data:post.url'>Read More >></a>

</b:if>

</b:if>

<!-- Auto read more -http://cahblk.blogspot.com- End -->

6. Selesai, klik simpan template