U must b lucky: PASANG 'READ MORE' OTOMATIS PADA BLOG

Seperti biasa, saat pagi mulai dan rutinitas pun kembali bergulir seperti biasa. Untuk mengisi waktu, pagi ini saya melakukan jogging jari alias blog walking ke tempat-tempat sahabat melalui sang pendekar search engine 'Mbah' Google yaitu mencari cara pasang 'Read more' buat Blog ku yang lain.

Sobat, hal ini dikarenakan saya sedang belajar sedikit-sedikit sekalian menghapal karena besok ada ujian (hehehe...ngak kok.. cuma pengen bisa mengerti sedikit aja kode script xhtml). Walaupun sudah banyak yang membahas ini, tapi saya kembali mengangkat pokok bahasan ini buat sobat yang ingin belajar seperti saya.

Langsung aja ke inti permasalahan, karena saya baru membangun blog dengan template standard yang telah disediakan oleh pengembang domain blog (blogger.com). Hasilnya akhirnya tentu sudah dapat diperkirakan sebelumnya belum memuaskan, karena tampilan pada laman utama 'home' tidak proporsional (bagian posting artikel terlalu panjang dan tidak seimbang dengan bagian sidebar). Supaya blog kita terlihat rapi seyogyanya pada laman utama 'home' dimana bagian posting artikel sebanding panjangnya dengan bagian sidebar. Caranya dengan memenggal artikel yang terpajang pada laman utama 'Home' dengan memasang 'Read more'.

Yuk kita langsung ke TKP.......!!!!

Seperti yang sudah saya sebutkan di atas bahwa blog ini dibangun dari awal, jadi bagaimana kalau blog kita sudah terlanjur pakai 'Read More' versi lama.

Kata Kang O-OM, "Sebaiknya kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah di bawah ini. Lakukan penyesuaian karena setiap template mungkin berbeda-beda."

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Nah kalau sudah sekarang kita bisa pasang 'Read More' Otomatis pada blog kita :

1. Login ke akun kamu di blogger.com.
2. Pada dashboard klik Rancangan atau Design lalu klik Edit HTML.
3. Jangan lupa beri centang "v" Expand Template Widget.
4. Jangan lupa buat backup template blog melalui Download Full Template.
   
5. Lalu kita cari </head> dengan menggunakan bantuan fungsi ctrl+f.
   
6. Kemudian di atas kode </head> masukkan (copy-paste) kode script berikut ini :
   
   <script type='text/javascript'>
   var thumbnail_mode = &quot;no-float&quot;
   summary_noimg = 450;
   summary_img = 360;
   img_thumb_height = 120;
   img_thumb_width = 150;
   </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>
   
   
7. Sekarang dengan menggunakan bantuan fungsi ctrl+f cari kode <data:post.body/> atau <p><data:post.body/></p>.
8. Ganti kode tersebut di atas <data:post.body/> atau <p><data:post.body/></p> dengan kode berikut 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 == &quot;item&quot;'><data:post.body/></b:if>


9. Kemudian Simpan Template lalu lihat hasilnya disini.
   

Jika sobat ingin merubah variabel letak thumbnail sebagai berikut :

• var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
  
• summary_noimg = 450 –-> jumlah karakter postingan tanpa gambar.
• summary_img = 360 –-> jumlah karakter postingan dengan gambar.
• img_thumb_height = 120 –> tinggi gambar.
• img_thumb_width = 150 –> lebar gambar.
• Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Gampangkan sobat membuatnya.. Selamat mencoba..!

Terima kasih saya sampaikan pada Kang O-OM dan Mas Dody FariaL dimana artikel mereka, saya jadikan bahan inspirasi penulisan artikel ini. Maaf jika masih banyak kekurangan dalam penulisan artikel ini, namanya juga pemula / rookie yang mencoba senam otak dan joging jari dengan ilmu alakadarnya.

[Sumber inspirasi tulisan : http://www.o-om.com/ dan http://miscah.blogspot.com/]
by