Senin, 23 Mei 2011

Home » » Cara Membuat readmore Otomatis

Cara Membuat readmore Otomatis

Malem prend, kali saya mo sedikit share tentang membuat readmore secara otomatis dalam postingan kita. Readmore sendiri berguna salah satunya meringankan blog kita jadi postingan artikel kita gak puanjangggg kaya rel kereta. Ok, kita langsung aja ya….

Langkah-langkah pembuatan Read More Otomatis :

  1. Masuk ke akun Blogger teman-teman
  2. Klik Rancangan >> Edit HTML [saran : download template kalian dulu untuk mencegah apabila terjadi kesalahan dalam modifikasi template]
  3. Centang dulu Expand Widget Template
  4. Kemudian cari kode </head> [untuk mempermudah pencarian tekan Ctrl+F], kemudian copy script berikut dan letakkan tepat diatas kode </head> :

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

Keterangan :

1. summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
2. summary_img = 340; adalah tinggi potongan artikel dengan gambar
3. img_thumb_height = 100; adalah ukuran tinggi thumbnail
4. img_thumb_width = 120; adalah ukuran lebar thumbnail

  • Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
      <div style=' text-align: justify;' 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>

Ok, kata readmore bisa kalian ganti menjadi : selanjutnya, baca selengkapnya atau apa aja deh, tapi kalian bisa juga diganti dengan gambar. Kalau belum punya alamat gambarnya, neh ada alamatnya :

 image Kodenya adalah :

<img src="http://i622.photobucket.com/albums/tt309/kokobota/G3YM5x1267976206.gif" />

image  Kodenya adalah :

<img src="http://i622.photobucket.com/albums/tt309/kokobota/j4FIbe1267977517.gif" />

image  Kodenya adalah :

<img src="http://i56.tinypic.com/15etimq.gif" />

image  Kodenya adalah :

<img src="http://i56.tinypic.com/14udj5v.gif" />

image  Kodenya adalah :

<img src="http://i53.tinypic.com/2nicx6t.gif" />

image Kodenya adalah :

<img src="http://i55.tinypic.com/2jer3ly.png" />

image  Kodenya adalah :

<img src="http://i51.tinypic.com/zu4c4o.gif" />

image Kodenya adalah :

<img src="http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png" />

image Kodenya adalah :

<img src="http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif" />

image Kodenya adalah :

<img src="http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg" />
  • Kalau sudah memasukkan salah satu alamat gambarnya simpan tamplate-nya.

 

*diambil dari berbagai sumber

0 komentar:

Posting Komentar

Arsip Populer

 
Diberdayakan oleh Blogger.

Translate

mau pinter

membuat blog atau website? klik saja di sini

© Copyright 2011. All Right Reserved by Pondok Pengetahuan | Designed by Free Blogger Templates | Premium Wordpress Themes | Coupons Code | Free Icons