Cara Membuat Auto ReadMore Blogger dengan Image Thumbnail

Auto Readmore adalah fitur yang berfungsi untuk memotong badan postingan blog yang panjang dan meringkasnya menjadi beberapa karakter. Fitur yang bisa ditambahakan pada auto readmore adalah membuat karakter teks yang bisa rata kanan kiri, rata kiri, rata tengah dan rata kanan. Selain itu, fitur ini juga akan menampilkan salah satu gambar yang termuat didalam badan postingan dan mengubah ukurannya menjadi lebih kecil dibandingkan dengan gambar aslinya.

1. Langkah-Langkah Pemasangan

  • Login ke Blogger
  • Pilih Template » Edit HTML » Centang Expand Template Widget
  • Copy kode di bawah ini dan pastekan tepat di atas tag </head>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</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>
</b:if> </b:if>
Update :
Tag conditional (warna biru) adalah tag yang berfungsi untuk menyembunyikan "Tombol Auto Readmore" pada halaman postingan dan halaman statis (laman).

Pengaturan Lanjutan :
  1. summary_noimg = 500; adalah jumlah karakter yang ditampilkan tanpa image atau gambar
  2. summary_img = 400; adalah jumlah karakter yang ditampilkan jika terdapat sebuah gambar
  3. img_thumb_height = 100; adalah tinggi gambar / image
  4. img_thumb_width = 100; adalah lebar gambar / image
  • Langkah selanjutnya cari tag <data:post.body/> lalu ganti dengan kode di bawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='clear: both;'/><a expr:href='data:post.url' rel='bookmark'><span style='font:bold ;color:#fff;'><b>Read More »</b></span></a>
</b:if>
</b:if>
Keterangan :
Read more » silahkan diganti dengan kata-kata sendiri. Contoh Baca Selengkapnya », Baca Selanjutnya » dan lain sebagainya.
  • Sekarang untuk melihat hasilnya, pilih pratinjau terlebih dulu dan jika anda merasa sudah pas dengan hasil yang ditampilkan, baru pilih simpan.

2. Penambahan fitur

  • Untuk mengganti kata Read more » dengan image atau gambar, ganti kata Read more » dengan kode di bawah ini beserta url gambar yang sudah diupload :
<img border='0' src='url image disini'/>
  • Selanjutnya, untuk membuat karakter teks yang akan ditampilkan menjadi rata kanan kiri, cari kode di bawah ini :
<div expr:id='&quot;summary&quot; + data:post.id'>
  • Dan tambahkan style='text-align:justify;' tepat dibelakang kode "<div" atau di depan kode "expr;id". Jika sudah dimasukkan, maka hasilnya akan terlihat seperti ini :
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>
Kalau penjelasan di atas masih belum bisa dipahami, silahkan meninggalkan komentar.

Lost Sector
Lost Sector

29 comments:
Write comment
  1. .Gan .. kalo misal script ada banyak , itu yang dgnti yang mana?

    ReplyDelete
  2. < d a t a : p o s t . b o d y / >

    ReplyDelete
    Replies
    1. Coba ganti <data:post.body/> yang kedua dan kalau masih belum bisa, coba ganti <data:post.body/> yang lainnya satu persatu, tetapi saya sarankan untuk mem-backup template terlebih dahulu karena jika ada kesalahan, maka template kamu bisa dikembalikan seperti semula.

      Delete
    2. .Udah berhasil Gan, tapi ada satu lagi nich yang masih perlu pencerahannya, yaitu ,
      pada laman itu auto readmore nya muncul, dan saat di klik kembali lagi ke laman itu.

      ane dapet solusi dari http://u-sup.blogspot.com/2012/03/mengatasi-halaman-statis-karena-auto.html
      tapi ane cari kodenya gag ada di template ane. (gag sama kaya di tutorialnya)
      Template ane "Rollout" punyanya Kak Lasantha Bandara
      Mohon sekali yha Gan solusinya...

      Delete
    3. Perhatikan script yang ada pada tutorial di atas dan Coba tambahkan kode di bawah ini tepat di atas tag <script type='text/javascript'>

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>


      Dan jangan lupa tempatkan tag penutup </b:if></b:if> tepat di bawah tag penutup </script>

      Semoga membantu...!!!

      Delete
    4. Update : Script di atas sudah saya perbaiki dan tinggal digunakan...!!! Terima kasih...!!!

      Delete
    5. .Wah gan udah ane ganti tetp aja ...
      coba agan cek
      http://mialhudaplus.blogspot.com/p/download-formulr-pendaftaran.html
      bahkan script yang lama udah ane ganti kaya tutorial di atas....
      terimakasih....

      Delete
    6. Bisa kirimkan tamplatenya ke email saya mas (lostsector.blogger@gmail.com) ? Ntar saya bantu perbaiki dari sini...!!!

      Delete
    7. .udah ane kirim gan, mohon reviewnya. hehehe kyak CPA aja. . .
      terimakasih sbelumnya .

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. .ane baru aja nerapin tutorial ini, tap mau tanya gan... bagaimana cara mengatur jarak judul posting ama tulisannya??kuk terlalu jauh ni....
    ex : http://cerpen-bobok.blogspot.com/

    ReplyDelete
    Replies
    1. Coba ubah nilai margin: 3em pada .post-body template kamu, ganti menjadi .75em
      Lebih lengkapnya akan menjadi seperti ini :

      .post-body {
      text-align:justify;
      margin: .75em 0 .75em;
      line-height: 1.6em;
      border-bottom:1px dashed #ceceae;
      }

      Delete
    2. OK Gan... berhasil..... ane ganti 0.50.... kalo 75 ma tmbahpanjaaang... hhehe

      Delete
    3. Bagus dong klo gitu... hehehe canda
      Yang tambah panjang apanya ? Td udah sy cek, tp normal-normal aja tuh ! :p

      Delete
  5. Terima kasih gan... bermanfaat banget.
    kunjung balik boleh ya..

    http://tenlibrary.blogspot.com

    ReplyDelete
  6. CARA BACKUP KODE HTML BLOG GIMANA GAN?

    ReplyDelete
  7. jika ingin tanpa Thumnail bisa gak, Kak???

    Terimakasih :D

    ReplyDelete
  8. berhasil gan. terima kasih banyak atasa ilmunya...

    ReplyDelete
  9. Terima kasih Mamase'... Ane cari2 artikel, coba sana sini, ternyata kode ini yang bisa ana pakai... tapi Mas, ane mau tanya.. cara meletakkan icon read more biar di sebelah kanan gimana Mas..?

    ReplyDelete
  10. gan gimana mau bikin readmoreny7a di kanan

    ReplyDelete
  11. Gan punya ane thumnailnya ancur, saya make template zikazep blue buatan kang ismet, http://ayres30.blogspot.com
    Tlg ya gan

    ReplyDelete
  12. gan, kalau cuma beberapa post ajha yang jumlah karakternya di tampilin banyak bisa gak ?

    ReplyDelete
  13. wiih keren jadinya... makasih gan..sangat membantu
    mampir ke blog saya ya gan...
    udah ane modif-modif dikit script nya...

    http://winwini.blogspot.com/

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. http://zhientianreal.blogspot.com

    ReplyDelete
  16. Supaya letak gambarnya di tengah, dan textnya di bawah gambar gimana caranya mas?

    ReplyDelete
  17. saya udah terapin kode agan di atas semua, tapi ga ada perubahan gan gmana ya .. https://apptuyu.blogspot.com/

    ReplyDelete
  18. kalo readmore kn utk motong kalimat gan,, tapi kok di blog saya read more nya gk motong kalimat,, malah di akhir kalimat,, kok gt y gan, mohon pencerahan nya gan....

    ReplyDelete