Meringkas Tampilan Blog dengan Read More

Sekarang saya mau mengulas tentang cara Meringkas Tampilan Blog dengan Read More , yang mana Kebanyakan Blogger sering bingung dengan urutan-urutan dan tahapan-tahapan yang diposting oleh kebanyakan Blogger.
Disini saya membuat tahapan Meringkas Tampilan Blog dengan Read More agak lebih simple dan mudah di mengerti. Kita mulai langsung...

1. Pertama Log in ke blog Anda.
2. Buka Template / Rancangan
3. KLik Edit HTML
4. Jangan langsung mencentang Expand Template widget
5. Cari terlebih dahulu Kode </head>
6. Dan Letakan kode di bawah ini tepat di atas kode </head>

Kode Javascript Read More :

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width  = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
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 alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>

7. Klik Simpan Template.

8. Setelah Anda Simpan Template , Lalu Centang Expand Template widget dan Cari Kode di Bawah ini,
<data:post.body/>
namun biasanya kode seperti ini tidak hanya ada satu. Ingat! cari kode paling atas...
9. Setelah ketemu , Hapus kode Tersebut dan Ganti dengan Kode ini ,

Kode Javasript Read More :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'> READMORE....!! </a>
</b:if>
</b:if>


10. Klik SIMPAN.

Bisa anda lihat hasilnya . . . :)

Inspirasi dan Sumber : SYSTEM OF BLOG