Label

06 Juli 2011

Cara Membuat Auto Read More

Wah sudah lama sekali tak mencurahkan tulisan ke blog tercinta ... em em em bikin ini aja cara memasang auto read more pada postingan blogger.

Caranya cukup mudah dan simpel :
  1. Log in ke akun blogger sobat.
  2. Pilih Rancangan -- Klik Edit HTML -- Centang Expand Widget Template (jangan lupa download dulu template anda untuk mengurangi resiko kesalahan penulisan script)
  3. Cari kode </head>dan letakkan kode dibawah ini sebelum kode tersebut.
    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; 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>

  4. Kemudian cari kode berikut <data:post.body/> atau <p><data:post.body/></ p>  apakah sudah ketemu? apabila sudah silakan ganti kode 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  5. Save template anda
nah sudah selesai selamat mencoba

    7 komentar:

    1. Makasih artikelnya, mas. Tadinya nyari pasang adsese di bawah readmore otomatis, kok adsense keliatan terus meskpun belum diklik read morenya, gitu.. :-s

      BalasHapus
    2. terus sekarang udah bisa belum ? kalo belum saya posting

      BalasHapus
    3. makasih ya mas .. ane udah coba .ternyata berhasil.. mohon berilah sedikit pencerahan di blog saya .. visit http://teguhanugrah-teguh.blogspot.com/ .. sekiranya apa yg kurang dari blog saya .terimakasih

      BalasHapus
    4. @Teguhterima kasih kembali atas kunjungannya..

      BalasHapus
    5. makasih gan, berkat tutor dari mas akhirnya bisa juga buat auto read mode.,

      soalnya dari kemarin gagal mulu.,

      BalasHapus
    6. Mantap sekali Gan, tapi kalau mau menyisipkan kode adsense agar iklan muncul setelah Read More diklik bagaimana, Gan? Tolong bikinin panduannya juga, Gan.
      Terimakasih...!

      BalasHapus

    silakan tinggalkan komentar anda, karena komentar anda sangat membantu membangun blog ini.No Spam No Porn.