Cara Membuat Auto Read More di Blog

Cara Membuat Auto Read More di Blog. adalah cara umum yg 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 :

•     Login di blogger

•     Klik Template

•     Klik Edit HTML

•     Backup/Download dulu template anda sebelum melakukan instalasi.

•     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 / thumba

    img_thumb_height =120 ; (Thumbnail 'tinggi dalam piksel)

    img_thumb_width = 120 ; (Thumbnail 'lebar dalam piksel).

Itulah cara Membuat Auto Read More di Blog. Dengan cara seperti ini, kita pasti akan sangat terbantu dalam menulis sebuah artikel. semoga artikel singkat ini bisa bermanfaat. meskipun script dalam auto read more ini sudah banyak yang memposting. 

1. Cara Menempatkan Iklan di Atas dan Bawah Postingan
2. Cara Meningkatkan Google Page Rank Terbaru
3. Cara Pasang Tombol Share Button DiPostingan
4. Membuat Auto Read More di Blog
5. Tips SEO & Trik SEO pada Blog
6. Widget Untuk Parse HTML/JavaSript

source http://doyock-online.blogspot.com/2013/07/cara-membuat-auto-read-more-di-blog.html