Readmore memang sangat diperlukan dalam suatu blog. Karena dengan menggunakan readmore (baca selengkapnya) tulisan-tulisan kita yang sangat panjang sekalipun akan tampil minimalis ketika di beranda depan.
Sebelum saya menjelasan tentang bagaimana membuat readmore otomatis, perlu kalian ketuhi bahwa readmore juga bisa dilakukan secara manual ketika kamu menuliskan postingan. Caranya adalah Klik "Insert Jump Break" pada tulisan dimana Sobat ingin memotongnya.
Tapi kelemahan menggunakan read more manual ini adalah sobat mesti tidak boleh lupa mengeklik "Insert Jump Break" setiap kali Sobat mau posting tulisan. Selain itu juga tidak akan teratur tampilan di beranda antara gambar dan tulisan.
So, Saran Saling Follow jangan gunakan Read More Manual deh...!

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

1.  Masuk ke desain template, kalo Sobat ada yg belum tahu Cara Desain Template.
2. Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 150;
    summary_img = 150;
    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>

3. Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>
4. Untuk Read More Otomatis Menggunakan Gambar hapus kode tersebut dan gantilah dengan kode berikut :

    <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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
    <b:else/>
    <data:post.body/>
    </b:if>

5. Sedangkan untuk Read More Otomatis yang Hanya Teks hapus kode <data:post.body/> atau <p><data:post.body/></p> dan gantilah dengan kode berikut :

    <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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
    <b:else/>
    <data:post.body/>
    </b:if>

Catatan :
~  Untuk tulisan yang berwarna hijau Sobat bisa menggantinya dengan angka sesuai dengan keinginan Sobat :
summary_noimg = 150; => jumlah karakter di beranda tanpa gambar
summary_img = 150; => jumlah karakter di beranda dengan gambar
img_thumb_height = 100; => tinggi gambar di beranda
img_thumb_width = 120; =>lebar gambar di beranda

~ Untuk tulisan yang berwarna merah 'Read More...' bisa sobat ganti dengan 'Baca Selengkapnya', 'Baca Selanjutnya...' atau apapun sesuai selera Sobat.

6. Sebelum disimpan, Klik Pratinjau dulu. Karena kalau ada script yang salah maka di halaman Pratinjau akan gagal memuat. Segera temukan dan perbaiki script Sobat yang salah, karena kalau tidak pada Template Blogger yang baru sobat akan kesusahan dalam masuk ke Desain Template lagi.

7. Untuk yang sudah terlanjut menggunakan Read More Manual seperti yang sebutkan di paling atas tadi, Sobat tinggal hapus kode :

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>

8. Kemudian gantilah dengan cara nomer 4 atau nomer 5 sesuai keinginan Sobat.

Demikianlah artikel tentang Cara Membuat Read More Otomoatis Dengan Gambar dan Hanya Teks di Blog. Semoga bermanfaat...
Haturnuwun... :)

Salam,

Artikel Terkait: