Membuat Auto Read More di Blog

Membuat Auto Read More di Blog ~
Sobat semua, hari ini saya ingin bebagi tentang Membuat Auto Read More di Blog. Read more adalah istilah yang di pakai oleh para Blogger dalam memenggal atau memotong konten, biasanya hanya pada paragraf pertama dari keseluruhan artikel. Jadi, yang tampak pada home page atau halaman muka blog adalah ringkasan artikel saja. Dari sisi layout ini akan membuat blog kita menjadi lebih menarik.

Kehadiran Auto Read More di Blog tentu akan sangat  membantu para blogger dalam mendesain blog. Sebenarnya, kita bisa menambahkan fungsi ini secara manual. Namun, tentu saja ini sangat menyibukkan kita. Alangkah lebih baik kalau kita bisa membuatnya menjadi otomatis. Nah, posting kali ini membahas tenntang hal itu yaitu bagaimana membuat auto readmore otomatis.Proses otomatis akan dilakukan oleh java script.

Inilah langkah-langkah membuat autoreadmore otomatis :

•     Login di blogger
•     Klik Design/Tata Letak
•     Klik Edit HTML
•     Backup/Download dulu template anda sebelum melakukan instalasi.
•     Conteng expand widget
•     Cari kode :  </head>  kemudian letakan script di bawah ini di atas kode </head>

    <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[
    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/>. Ganti dengan kode dibawah 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>

•     Save/Simpan template.

Keterangan :

    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).