Minggu, 06 Maret 2011

Cara memasang Readmore Otomatis 2 di blogspot "Tutorial blogspot"


  • 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.
  • Selesai...

Catatan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga artikel diatas bermanfaat buat sobat semua dan selamat mencoba, salam sukses...

Cara memasang Readmore Otomatis 2 di blogspot , pasang readmore otomatis, tutorial membuat readmore otomatis pada blog, langkah menambah readmore otomatis pada blogger, readmore otomatis tutorial, readmore otomatis versi terbaru, penggal artikel blog secara otomatis, script readmore otomatis pada blog.

Tidak ada komentar:

Poskan Komentar