Cara Membuat Auto Readmore di Blog

Cara Membuat Auto Readmore di Blog-Auto Readmore yang berfungsi untuk mempersingkat atau meringkas postingan di beranda blog. Mungkin sebagian blogger sudah memiliki Auto Readmore otomatis di template blognya. Namun jika belum ada, sobat bisa gunakan cara manual berikut.

Cara Membuat Auto Readmore di Blog :
1. Masuk akun blogger sobat.
2. Pilih Template > Edit HTML
3. Cari kode <head/> , gunakan tombol CTRL + F untuk mempermudah pencarian.
4. Jika sudah ketemu, masukan kode berikut di bawah  <head/>.

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
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 End -->

Keterangan kode di atas :
Summary_noimg = 430; Jumlah huruf tanpa gambar.
Summary_img = 340; Jumlah huruf dengan gambar.
img_tumb_height = 150; Tinggi gambar.
img_tumb_width = 150; Lebar gambar.

5. Selanjutnya cari kode  <data:post.body/> dengan kode berikut.

<!-- Auto read more 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 style='text-align:justify;' 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'><font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a>
</b:if>
</b:if>
<!-- Auto read more End -->

6. Jika ada 3 kode yang sama dengan <data:post.body/>  ganti semua dengan kode diatas.
7. Terakhir Simpan template. Semoga bermanfaat...