Tutorial Membuat Readmore di Blog

Cara Memasang Read More Otomatis ini mungkin agak sedikit ribet oleh karena itu sahabat harus teliti dan hati hati untuk Memasang Read More Otomatis ini supaya tidak terjadi eror pada template. Baiklah sekarang kita akan mencoba mengatasi masalah Read More Otomatis pada halaman statis, silahkan sahabat baca langkah langkah dibawah ini, jika ada yang kurang jelas bisa kirim koemnetar di kolom komentar di bawah. Langsung saja yah,,, berikut ini langkah - langkah yang harus di cermati (bahasanya kaya jagoo saja hahaha,,,) selamat mencoba.

1.     Login ke Blogger

2.     Pilih Rancangan

3.     Pilih Edit HTML

4.    Jangan lupa centang Expand Widget Template, dan download terlebih dahulu template sahabat, supaya apabila terjadi eror template asli bisa dikembalikan.

5.   Selanjutnya silahkan sahabat cari kode </head> dan letakan kode dibawah ini tepat dibawah kode    

       </head>

Berikut scriptnya : 

<!-- Read More Otomatis script -http://ngebagiilmu.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>
<!-- Read More Otomatis script - ttp://ngebagiilmu.blogspot. -End-->

NB : Sahabat dapat mengganti tulisan yang berwarna biru sesuai dengan keinginan sahabat
7. Selanutnya silahkan sahabat cari kode <data:post.body/> kalau sudah ketemu silahkan sahabat ganti   

     kode tersebut dengan kode dibawah ini :

<!-- Read More Otomatis script - ttp://ngebagiilmu.blogspot.-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>
<!-- Read More Otomatis script - ttp://ngebagiilmu.blogspot.-End-->

8. Sekarang silahkan sahabat simpan template dan lihatlah hasilnya

Nah itulah Cara Memasang Read More Otomatis, untuk mengatasi masalah pada Cara Memasang Read More Otomatis sebelumnya. mungkin itu dulu yang dapat di share mohon maaf bila ada kekurangan. sekian dan terimakasih.