Searching

Friday, July 6

Cara memasang Readmore Otomatis di blog

Cara memasang Readmore Otomatis 2 di blogkali ini kita membahas bagaimana cara menambah readmore otomatis pada blogspot, ini versi yang ke dua. dimana sebelumnya saya post juga versi yang pertama. versi yang kedua ini lebih enteng dari versi yang pertama. jika anda berminat untuk memasangnya ke dalam blog sobat berikut ini caranya.



  • Login ke blogger
  • Klik Rancangan
  • Edit HTML
  • Centang kotak kecil "Expand widget template"
  • Kemudian cari kode </head>
  • Kalau sudah ketemu pastekan kode di bawah ini di atas kode tersebut
    <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)

    ********************************************/
    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>

  • Kemudian cari kode <data:post.body/>
  • Kalau sudah ketemu ganti kode <data:post.body/> tersebut dengan kode di bawah 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>
  • Simpan Template anda.
  • Jika anda masih menggunakan Readmore versi lama anda harus menghapus terlebih dahulu kode lama tersebut. cara menghapusnya anda bisa melihat kembali tutorial yang anda pakek sebelumnya.
  • Semoga berhasil...

No comments:

Post a Comment