Jika kita menggunakan template yang di download dari sebagian besar master bloger biasanya fasilitas readmore otomatis sudah terpasang, dan kita sudah tidak perlu lagi repot - repot untuk membuatnya. namun bagi Anda yang mempunyai blog yang belum terppasang readmore, dan ingin membuatnya sendiri dengan maksud agar tampilan blog lebih rapih dan bisa meneampilkan beberapa postingan di halaman utama, maka ada baiknya jika Anda meneruskan untuk membaca postingan ini.

Pada postingan kali ini saya akan berbagi cara untuk membuat read more secara otomatis pada setiap postingan dengan memasang kode script di template blog kita, berikut ini langkah-langkah untuk membuatnya:
  1. login ke akun blogger Anda
  2. Pilih menu Tamplate, kemudian jangan lupa membackup template untuk menghindari resiko kegagalan.dan rusaknya template blog Anda.
  3. Pilih "Edit HTML" dan jangan lupa centang tanda "Expand template widget"
  4. Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3. atau Ctrl+F
  5. Copy dan Paste Code berikut ini sebelum atau diatas kode </head>
    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>
  6. Langkah erikutnya Cari kode <data:post.body/>
    Ganti kode <data:post.body/>  dengan kode di berikut ini :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <span class='rmlink' style='float:right;padding-top:20px;'>
    <a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>
  7.  Simpan Template kemudian lihat hasilnya..
Demikian postingan kali ini mengenai cara membuat readmoresecara otomatis, semoga bermanfaat.

Baca juga Tutorial Blogspot lainnya
  1. CARA MUDAH MEMBUAT BLOG DI BLOGSPOT
  2. Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
  3. Cara Membuat Daftar Isi Blogger di Widget atau Postingan
  4. Cara Membuat Hyperlink Text pada postingan Blogspot
  5. Cara Membuat Kode HTML Link Gambar pada Blogspot
  6. Cara Membuat Link Gambar Berkedip di blogspot
  7. Cara Membuat Link Text Berkedip di Blogspot
  8. Cara Menampilkan Kode HTML dalam Postingan Blog
  9. Cara Mengganti Tampilan Kursor Mouse dengan Gambar Kustom pada Blog
  10. Cara Mengganti/Mengubah Default Icon Bullet/list di Blog 
  11. Cara Menyisipkan Gambar pada Postingan Blog
  12. Cara buat spoiler buka/tutup show/hidden dalam postingan blog 
  13. cara membuat pointer/kursor bertabur bintang
  14. cara membuat tulisan / teks berjalan ( marquee ) di blog 
  15. cara mengcopy artikel blog anti copas (anti block dan klik kanan)