Cara Membuat Read More Otomatis

Jumpa Lagi sob, hehe gak bosan2 nie..

Oya sob, nie kalo mao pasang readmore otomatis.

Biasanyakan kita kalo bikin readmore ato baca selengkapnya secara manual.

Ato copy sana copy sini.emang ribet sie.

Nah, ini misteri jalan ke mbah google, ketemu dengan artikel bagus neh.wkwkwk.

Langsung di praktekkan ya sob.

Berikut langkah – langkah dalam membuat read more otomatis :

Silahkan login ke blogger terlebih dahulu. 

1.Klik Tata Letak. 

2.Kemudian klik Edit HTML. 

3.Centang Expand Template Widget. 

4.Letakkan kode berikut ini tepat diatas kode </head>

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>



 6.   Kemudian hapus kode :


<data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More â�¦ <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Kemudian Simpan Template.

Keterangan :

summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.

summary_img = 360 –-> untuk tinggi postingan dengan gambar.

img_thumb_height = 120 –> tinggi gambar.

img_thumb_width = 150 –> lebar gambar.

Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Selesai.

Semoga bermanfaat..!!

Thanks,

Misteri ^_^

Baca Juga Yang Lain Sob..^_^