Home » » Cara Membuat Read More Otomatis

Cara Membuat Read More Otomatis

Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.postingan ini saya dapat kan dari berbagi sumber, dan mungkin saya praktekan langsung pada blog saya ini

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

Buat blogger baru, seperti saya ini saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.,yang sebelumnya saya lakukan memang agak ribet pada saat posting artkel atau pun tulisan...saat ini saya menggunakan read more otomatis...


Berikut langkah – langkah dalam membuat read more otomatis :
  1. Silahkan login ke blogger terlebih dahulu.
  2. Klik Tata Letak.
  3. Kemudian klik Edit HTML.
  4. Centang Expand Template Widget.
  5. Letakkan kode berikut ini tepat diatas kode </head>
    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>

6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda : 

<div class='post-header-line-1'/>
<div class='post-body'>
<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/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>      



sehingga sekarang hanya ada satu <data:post.body/>


7.   Kemudian hapus kode :


<data:post.body/> atau <p><data:post.body/></p> 




  1. Ganti kode tersebut dengan kode berikut 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>


  2. Kemudian Simpan Template.

Keterangan :
  • summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 –-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 –> tinggi gambar.
  • img_thumb_width = 150 –> lebar gambar.
  • Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Silahkan sobat atur sesuai template sobat. Selamat berkreasi. Happy






Artikel Terkait:

18 komentar:

  1. payah
    tapi setelah di teliti akhirnya bisa
    thx for postingannya, dgn ini Anda membantu saya mengurangi beban membuat read more artikel
    akhirnya jadi juga automatic!!^_^

    BalasHapus
  2. Boss sy blum brhasil dg trik readmore tp sblum'y thank bgt trik2'y udh sy coba bnyk yg di pke tp dg readmore sy msh kebingungan

    BalasHapus
  3. soal'y di step ke 7 untuk mencari code'y gk ketemu di mn sy hrs simpan code selanjut'y tolong boss minta solusi'y
    blog sy noorhidayat08.blogspot.com

    BalasHapus
  4. thanks so much
    solusi yang indah

    BalasHapus
  5. Thx..akhirnya aku bisa mengaplikasikan readmore ke blogku..penjelasannya sangat gamblang shg mudah diterima..thx bro keep on writing

    BalasHapus
  6. aaaaaaaaggggggggggaaaaaaaaannnnnnn!!!!!!!!!!!
    ありがとうございます!!!!!!!!!!
    help fuLL...
    *banjir air mata*
    baru ini yg berhasil,kmrn2,pke tutorial yg laen,g bs smua...
    fufufufufu...

    BalasHapus
  7. waduh..
    kok gak ada efek apa2 gan ?
    punyinggggg....

    BalasHapus
  8. trim's
    tp kok gak bs yaaa, gmn doonk? :(

    BalasHapus
  9. KAK INI GAK BISA...!!!
    GIMANA TO..??
    KOK GAK BISA..???

    BalasHapus
  10. mantap ne gan artikelnya...numpang share ya :
    http://budiono.0fees.net

    BalasHapus
  11. Terima Kasih bro, Ilmu anda telah saya terapkan dan telah berhasil. Yang ingin saya tanyakan adalah, kenapa tulisannya berwarna coklat kemerah-merah an. Karena saya kira hurufnya tetap berwarna hitam, karena saya kuatir orang-orang akan sulit membaca hurufnya.
    Mohon bantuannya,

    best regard
    http://y4nd0.blogspot.com

    BalasHapus
  12. susah...blog ane udah pull abiz...
    plizz gimna cara nge back up nya //?

    BalasHapus
  13. KOK g berhasil mas oktri,,mlah yang muncul kode2 aneeeh...mohon bantuannya yang laen,,siapa tahu masih da trik yg lainnya...;)

    BalasHapus
  14. @Muhammad syafi' coba di cek lagi sudah bnr apa lom, soalnya blog ini menggunakan tutorial read otomatis ini...

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri