Auto Read More Blogspot

Auto Read More.. Untuk Blogspot !

Pernah lihat tulisan di blog yang singkat tapi ada terusan bacaannya?  biasanya populer ditulis dengan "Read More"...
ReadMore... membuat tampilan posting di halaman depan menjadi lebih ringkas dan ada tulisan Read More yang bacaan lengkapnya harus mengklik link dimaksud....
Dulu untuk membuat postingan dengan ReadMore... di blogspot harus menyisipkan sebuah koding tag  <span class="fullpost"></span> secara manual disetiap posting.... sehingga di halaman blog tampil postingan yang ringkas....
Tentunya hal ini cukup merepotkan... kemungkinan gagal readmore karena kelupaan koding bisa terjadi....
Sekarang fasilitas ReadMore ini dapat diterapkan tanpa harus repot repot... karena kesemuanya sudah diurus oleh program aplikasi readmore otomatis untuk membuat ringkasan posting di halaman depan blog.
Metode baru untuk membuat readmore secara otomatis untuk blogspot ini jika dipasang maka akan langsung teraplikasi ke seluruh posting yang sudah pernah kita buat, bahkan secara otomatis membuat thumbnail gambar yang ada dalam postingan.
Yang paling penting bahwa kita tidak perlu menambahkan koding tag apapun.
Yang perlu dilakukan adalah menambahkan beberapa kode HTML.... tidak sampai 15 menit maka seluruh postingan bisa tertampil dengan ringkas dan lebih rapih....
tertarik ?....

Berikut beberapa langkah untuk pemasangan kode HTML nya di blog kita...

• Buka dashboard blogspot anda...
• Pilih Tab menu :
  Tata Letak, dan di bawahnya Pilih Tab menu : Edit HTML
• Centang di Expand Template Widget
• Sebelum anda melakukan perubahan tersebut jangan lupa untuk melakukan backup template yang saat ini digunakan blog anda, sehingga akan memudahkan untuk restore nantinya. Untuk ini klik tombol download full template atau download template lengkap di halaman edit HTML blogger.
• Bagi yang sudah pernah memasang Read More versi lama sebaiknya kodenya dikembalikan ke asal, biasanya kode-kodenya seperti dibawah ini
  

  <b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p></p>
  <b:else/>
  

  dan juga

  <a expr:href='data:post.url'>Read More.. »»</a>
  </b:if>
  

• Cari kode berikut di halaman Edit HTML ini (dengan Ctrl-F supaya cepat)

  <data:post.body>

• Ganti kode diatas dengan kode dibawah 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 == "item"'>
  <data:post.body/></b:if>
  
  
  

  Pada script diatas setelah tulisan Read more... ada koding <data:post.title/>
  koding ini bisa dipakai ataupun tidak sesuai selera, nantinya dia akan memunculkan Readmore... kemudian dilanjutkan judul postingan...
• Selanjutnya cari (dengan tekan tombol ctrl-F saja....) kode </head>
• Kemudian salin koding dibawah ini dan paste diatas kode </head> tersebut

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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> 

• Alternatif lain koding diatas adalah bisa menggunakan koding dibawah ini :

  <script type='text/javascript'>
  summary_noimg = 450;
  summary_img =350;
  img_thumb_height = 100;
  img_thumb_width = 100;
  </script>
  <script src='http://sites.google.com/site/bodonbiz/autoreadmore.js' 
  type='text/javascript'/>
  

• Beda kedua koding tsb adalah karena scipt auto readmore nya ditaruh di hosting sehingga koding kedua lebih ringkas. Untuk hasil.... tidak ada bedanya.... :)
• Jangan lupa untuk disimpan... dengan mengklik tombol Save Template...
• Blog sudah terlihat lebih rapih sekarang.... :)
• File javascript auto readmore dapat juga didownload disini, jika ingin mempelajari lebih jauh
 

Jika ingin mengutak atik koding diatas supaya tampilannya di blog lebih sesuai, maka berikutu ini adalah beberapa parameter yang digunakan di koding diatas:

* var thumbnail_mode = "float"; (letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
* summary_noimg = 250; (karakter yang ditampilkan di posting tanpa gambar / thumbnail)
* summary_img = 250; (karakter yang ditampilkan di posting dengan gambar / thumbnail)
* img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
* img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Oke semoga bermanfaat