Membuat Auto Readmore pada Blog

Fungsi READMORE adalah semacam peringkas tulisan atau seringkali disebut dengan PARAGRAF LEAD atau OVERVIEW dalam dunia media. Ini bermanfaat untuk lebih memaksimalkan space blog, supaya pembaca juga tidak langsung disuguhi naskah FULL, tetapi bisa membaca ringkasan-ringkasan naskah terlebih dahulu.

Berikut ini caranya:

1. Login ke blogger
2. Kemudian cari rancangan, trus ke tab EDIT HTML
3. Sebelumnya backup dulu template blog sobat, supaya kalo ada kesalahan bisa langsung download template terakhir yang terbaik.
4. Setelah itu cari kode:

 </head>

Kalo udah ketemu, letakkan kode AUTO READMORE ini di atas kode tadi:

<script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    img_thumb_height = 120;
    img_thumb_width = 120;
    </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)
    (C)2008 by Anhvo
    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    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 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>


Keterangan:
    summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
    summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
    img_thumb_height = 120 adalah tinggi gambar
    img_thumb_width = 120 adalah lebar gambar

Kemudian setelah itu cari kode <data:post.body/> kemudian ganti kode tersebut dengan kode di bawah ini

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya... </a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Sekarang coba preview, jika sudah ada tulisan Baca Selengkapnya.. (Bisa diganti dengan tulisan lainnya) dan tulisannya sudah di tampilkan sebagian saja itu artinya Anda berhasil membuat AUTO READMORE.