Membuat ReadMore di Blog

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

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

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://bloganda.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'>Read More >></a>

</b:if>

</b:if>

<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Kostumisasi:

Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar. 

readmore bisa rata kiri kanan (justified)? 

Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'

Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.