cara membuat auto read more dengan thumbnail

meringkas isi artikel dengan auto readmore
Cara membuat auto readmore pada blog - ya memang artikel yang yang panang terlihat sangat tidak rapih pada halaman beranda blog sobat terlebih lagi jika isi artikel memilik banyak paragraph tentunya ini akan menghilangkan nilai ekstetika tampilan blog di mata visitor. untuk itu saya memberi saran kepada sobat untuk menggunkan auto readmore pada blog sobat seperti yang sudah saya terapkan pada homepage blog ini, apa yang sobat lihat pada homepage blog ini ? menarik dan rapih kan. 

terlebih lagi yang saya sukai dari memakai auto readmore ini dapat menghemat waktu loading blog dan terlihat rapih karena sudah diatur jumlah kata dan ukuran gambar

Sekilas tentang auto readmore


seperti yang sudah saya jelaskan fungsi dari readmore diatas, read more ini auto. maksudnya dari auto adalah read more ini secara otomatis membuat posting pada homepage autoreadmore denga pengaturan jumlah kata dan ukuran lebar dan tinggi gambar,jadi lebih mudah kan :D jadi gak usah pakai lagi cara lama (jump break). kebanyakan auto read more yang saya temui tidak menggunakan tag penkondisian yang mengakibatkan posting pada halaman page/laman masih terbentuk readmore, tapi tidak dengan autoreamore ini karena auto readmore ini sudah dibuat berdasarka tag pengkondisian yang tidak akan tampil pada halama laman/page melainkan hanya pada halaman hompage blog saja.
  • login keblogger
  • pilih template -> edit html
  • centang expand template widget
  • cari kode </head> untuk mempermudah gunakan ctrl+f
  • copy paste kode dibawah ini tepat dibawah kode diatas
<!-- Automatic read more script Start -->
<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 340;
 img_thumb_height = 150;
 img_thumb_width = 150;
 img_thumb_nosrc = &quot;http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/s1600/default.png&quot;;
</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;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>
<!-- Automatic read more script End -->

NOTE:


  •  summary_noimg = 430; adalah jumlah kata pada artikel yang tidak memiliki gambar
  •  summary_img = 340;    kebalikannya dari  summary_noimg, summary_img adalah jumlah kata-kata pada artikel yang mempunyai gambar
  •  img_thumb_height = 150; adalah pengaturan ukuran tinggi dari gambar untuk auto readmore
  •  img_thumb_width = 150; adalah pengaturan dari ukuran lebar gambar untuk auto readmore
  •  img_thumb_nosrc = &quot;http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/s1600/default.png&quot;; adalah gambar pengganti pada artikel yang tidak memiliki gambar



Saran saya sih tidak usah diubah-ubah lagi  karena auto readmore ini sudah diatur denga baik dan rapih

  • cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini

<!-- Automatic read more script Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->


keterangan.
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri

bluishkode warna biru:  icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.

Comments

  1. template ku nggak kode (). jadi gimana?

    ReplyDelete
    Replies
    1. pada semua template ada kok kode

      tekan ctrl+f pada bagian dalam template, nanti akan muncul kotak search yang menyatu di atas pojok kanan template

      Delete
  2. kode data post body.. maksudnya

    ReplyDelete
  3. kalau gak pakek gambar alias tulisan readmore , gmna scriptna gan ??

    ReplyDelete
    Replies
    1. tata letak >> blog post >> edit >> ganti read more dengan yang agan inginkan kemudian save,

      pada saat di posting gunakan jump break

      Delete
  4. hemm ,, coba test dulu ya gan ..

    ReplyDelete
  5. Templat ane kagak ada nya gan. sebagai pemula ane bingung syehkali. Tolongdi bantu gan

    ReplyDelete
    Replies
    1. "kode yang agan maksud" pada semua template ada kok.., mungkin permasalahannya ada di pada kotak search, karena blogger telah memperbarui edit html jadi sekarang kotak SEARCH pada edit html blogger yang baru sudah terpisah.
      jadi penyelesainnya klik template >> edit html kemudian klik dimana saja pada bagian kode ditemplate kemudian tekan ctrl+f dan akan keluar kotak search yang menyatu di pojok kanan template, pada kotak search ketikan kode yang agan maksud dan tekan enter..

      Delete
  6. Gan, kok Icon Read More nya ga muncul.. adanya Tulisan "Sorry. This Person moved or deleted this image." Saya boleh minta yang ga pake Icon ga Gan.. yang Tulisan Read More aja.. Mohon Penjelasannya

    ReplyDelete
    Replies
    1. hehe maaf gan, gambar yang itu sudah saya hapus hehe,

      kalo mau pakai tulisan hapus kode <img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/
      bluish_zps515fdacf.pnghttp://i1307.photobucket.com/albums/
      s597/depermana/bluish_zps515fdacf.png'/>


      kemudian ganti dengan tulisan sesuka agan seperti
      read more → , dll..

      Delete
  7. di hatml yang baru kok gak ada

    ReplyDelete
  8. matur nuwun gan...ijin pake scriptnya :)

    ReplyDelete
  9. trimakasih, sangat membantu :)

    ReplyDelete
  10. sangat membantu gan...
    makasih banget

    ReplyDelete
  11. Kebetulan saya mau nyoba bikin template sendiri. Thanks Ya :D

    ReplyDelete
  12. gan yang di pastenya di di bawah kode Head atau gimana? kok gabisa ya??? tolong pencerahannya ya gan :D

    ReplyDelete

Post a Comment

Silakan berkomentar dengan sopan sesuai dengan topik bahasan.
Komentar dengan menyertakan tautan hidup akan otomatis terhapus.