Menambahkan Auto Read More pada blogspot - Script

Apa itu Auto Readmore?

Kalau kamu membuka halaman awal blog ini, maka kamu akan menemukan daftar posting artikel hanya menampilkan beberapa teks awal posting saja sebagai cuplikan dan di bawahnya akan terdapat link seperti Baca Selengkapnya ==> Judul Post
                                             
Yups, itu adalah Read More, tapi Read More kali ini lain karena semuanya sudah otomatis karena sudah diatur pada layout template html. Oleh karena itu maka disebut Auto Read More.

Gimana sih caranya buatnya?

Ayo kita sama-sama belajar untuk mencobanya.

1. Pertama, Pastinya kamu harus login dulu ke blog kamu. hehehe.
2. Lalu pergilah ke halaman Edit HTML (pada tab Perancangan)
3. Centang pada Expand Template Widget 
4. Masukkan script dibawah ini dimanapun, asal masih di dalam code html.
   
   <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>
5. Setelah itu cari (ctrl + f)  kode <data:post.body/> 
6. Ganti kode diatas dengan kode dibawah ini (ingat, diganti. bukan di sisipi. jadi tag diatas dihapus, lalu diganti 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' target='_blank'>READ MORE - <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
7. Silahkan langsung Simpan Template atau Pratinjau terlebih dahulu
8. Selamat blog anda sudah memiliki fitur Auto Read More

Keterangan :

berikut ini beberapa penjelasan tentang variabel pada kode JavaScript diatas:

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

Pada  kode yang dibawah

target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.


READ MORE - <data:post.title/>

READ MORE - dapat diganti sesukanya misalnya, Baca Selengkapnya di  atau Selanjutnya ==> atau terserah kreasi kamu.

Jika tidak ingin menampilkan judul halaman di sebelah Read More hapus kode <data:post.title/>

Yaps,.!! :-) Semoga Bermanfaat.

Oleh Bani Adam Setiadi