Auto Read More Untuk Blogspot - Supaya Tampilan Tambah Cantik

Pernah lihat tulisan di blog seseorang yang pendek ? tapi ada terusan bacaannya.... biasanya populer ditulis dengan "Read More".... Pasti sudah pernah lihat dong.... biasanya bentuknya seperti gambar dibawah ini :

Yup... ReadMore membuat tampilan posting di halaman depan menjadi lebih ringkas... dan ada tulisan Read More yang bacaan lengkapnya harus mengklik link dimaksud.... Kok baru sekarang ? bukannya dari dulu sudah ada ?....  Betul... tapi sekarang lebih gampang dan mudah...  dan akhirnya saya juga memasang aplikasi ini di blog saya di blogspot... :)

Dulu... untuk membuat postingan dengan readmore di blogspot... kita harus menyisipkan sebuah koding tag  <span class="fullpost"> secara manual disetiap posting.... sehingga pada saat tampil di halaman blog kita akan tampil postingan yang ringkas.... tentunya hal ini cukup merepotkan... karena kemungkinan gagal readmore karena kelupaan koding bisa terjadi.... Beruntung... saya bisa berhasil menggunakan fasilitas ReadMore ini tanpa harus repot repot... karena kesemuanya sudah diurus oleh program aplikasi readmore otomatis untuk membuat ringkasan posting di halaman depan blog saya...

Metode yang baru untuk membuat readmore secara otomatis untuk blogspot ini jika kita pasang di blog kita, maka akan langsung teraplikasi ke seluruh posting yang sudah pernah kita buat, bahkan secara otomatis membuat thumbnail gambar yang ada dalam postingan kita di hasil ringkasannya. Yang paling penting bahwa kita tidak perlu menambahkan koding tag apapun. Yang perlu dilakukan adalah menambahkan beberapa kode HTML di blog kita..... tidak sampai 30 menit... seluruh postingan saya bisa tertampil dengan ringkas dan lebih rapih....

tertarik ?....

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

1. Buka dashboard blogspot anda...
2. Pilih Tab menu : Tata Letak, dan di bawahnya Pilih Tab menu : Edit HTML
3. Centang di Expand Template Widget
4. 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 seperti gambar di bawah ini
   
   



5. Oh ya.... 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><data:post.body/></p>
   <b:else/>
   

   
   dan juga
   
   

   <a expr:href='data:post.url'>Read More.. &#187;&#187;</a>
   </b:if>
   



6. Temukan kode berikut di halaman Edit HTML ini dengan cara menekan Ctrl-F supaya cepat.... (soalnya kalau dicari satu persatu lama dong.....) 
   
   

   <data:post.body>
   

   
   
7. 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 anda... nantinya dia akan memunculkan kata kata Readmore kemudian dilanjutkan judul postingan kita...
   
8. Selanjutnya cari (dengan tekan tombol ctrl-F saja....) kode </head>
   
9. Kemudian kopikan koding dibawah ini dan paste diatas kode </head> tersebut.... jangan ketuker dibawahnya ya... :) dibawah ada contoh gambarnya kok.... :)... kodingnya seperti ini....
   
   

   <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>
   

   
   
   
   
10. Alternatif lain koding pada point 9 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'/>
    

    
    
11. Beda koding di point 9 dan point 10 adalah karena scipt auto read more nya ditaruh di hosting sehingga koding di point 10 lebih ringkas. Untuk hasil.... tidak ada bedanya.... :)
    
12. File javascript auto readmore dapat juga didownload disini, jika anda ingin mempelajari lebih jauh
    
13. Oh ya... jangan lupa untuk disimpan... dengan menekan tombol Save Template...
    
14. dan blog anda sudah terlihat lebih rapih sekarang.... :)

Jika anda masih ingin mengutak atik koding diatas supaya tampilannya di blog lebih sesuai, maka beriktu ini adalah beberapa informasi tentang parameter yang digunakan di koding diatas

• var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 250; (Menetapkan berapa banyak karakter akan 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