CARA MEMBUAT READ MORE OTOMATIS DI BLOGSPOT

Cara Membuat Read More Otomatis di Blogspot – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat read more otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat read more otomatis di blogspot secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu read more?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dan sejenisnya.

Manfaat read more juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Klik link dibawah ini untuk demo readmore yang akan saya jelaskan cara membuatnya.

DEMO READ MORE OTOMATIS

CARA MEMBUAT READ MORE DI BLOGSPOT

•  Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
• Cari Kode </head>.
• Copy paste kode dibawah ini tepat 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[
    /******************************************
    Auto-readmore link script, (for blogspot)
    by: http://teknikseomudah.blogspot.com/
    ********************************************/
    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>

• Save Template anda.
•  Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

• Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
• Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

• Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
• Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
• Selanjutnya akan terbuka kode kode yang lain.
• Geser atau scrol ke bawah dan cari kode

     <data:post.body/>

• Setelah ketemu hapus kode diatas dan 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>

• Klik SAVE / SIMPAN dan lihat hasilnya.

Jika kita baca tutorial cara membuat read more di blogspot ini terkesan panjang dan membingungkan, tetapi dalam prakteknya ini yang lebih detail dan palink di jamin keakuratannya untuk para blogger pemula. karena sudah saya jelaskan diatas bahwa tutorial-tutorial yang bertebaran di dunia internet ini hanya untuk blogger yang sudah faham masalah html, jadi saya buat yang beda dan sedetail mungkin.

Silahkan baca da lakukan saya yakin ini sangat mudah untuk di praktekan. Sekian dulu dari saya untuk cara membuat read more otomatis di blogspot, semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.