Cara Membuat Read More Otomatis Di Blogger

Ok saya akan membahas tentang Cara Membuat Read More Otomati Di Blogger. Read More adalah postingan yang terpotong oleh read more. jadi kalo kamu memasanh read more di blog maka blog kamu akan lebih cepat loadingnya dari sebelum memasang read more. Ok Brow kita langsung aja ke TKP :

Langkah - Langkah untuk membuat Read More Otomatis :
1. Login dulu ke Dasboar blogger kamu
2. Klik Rancangan >> Klik Edit HTML jangan lupa centang atau contreng Expand Template Widget
4. Kemudian kamu cari kode </head> (gunakan perintah CTRL + F biar cepat pencariannya). Copy Script di bawah ini dan Paste kan atau letakan Script di bawah ini tepat Di Bawah kode tag </head> :

<!-- Auto read more script -http://berbagiilmu28.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://berbagiilmu28.blogspot.com- End -->

5. Kamu bisa ganti yang berwarna merah yang kamu inginkan. yang berwarna merah  adalah jumlah ukuran tampilan
6. Setelah itu kamu harus cari kode <data:post.body/> (gunakan CTRL + F). Setelah kamu menemukan kode <data:post.body/> kamu ganti kode <data:post.body/> dengan kode di bawah ini :

<!-- Auto read more -http://berbagiilmu28.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'><img border='0' src='http://i1119.photobucket.com/albums/k638/berbagiilmu/ReadMore.png'/></a>
</b:if>
</b:if>
<!-- Auto read more -http://berbagiilmu28.blogspot.com- End -->

7.  maka tampilan read more nya akan seperti gambar di bawah ini :

8. Jangan Lupa Save Templatenya.

Selamat Mencoba .......