Ass.wr.wb »»   Service - Spare Part - Modifikasi »»» RIZQUNA SERVICE ELEKTRONIK : Jln. Soekarno - Hatta, Jalur 2 Trans, Puncak Indah, Malili, Luwu Timur, Sulawesi Selatan, Indonesia »»» Anda dapat menghubungi ke hp. 085 255 994 779
Cara membuat Read More Otomatis - Rizquna Elektronik Cara membuat Read More Otomatis | Rizquna Elektronik

Cara membuat Read More Otomatis


Edi Sutikno
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم


Sebelumnya Blogger masih pake cara lama untuk untuk membuat Read More blog mereka, dengan cara menambahkan tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang saya gunakan pada Blog Sederhana Saya ini…. Dengan tidak bertele-tele langsung ke TKP….!!!!!
Cara Membuat Read More Otomatis dengan Thumbnail di Blogger adalah sebagai berikut

1. Langkah Pertama
  • Silahkan Login dan masuk 
  • lalu klik Rancangan dan klik  Edit HTML
  • Centang Expand Template Widget
  •  Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
  • Cari kode </head> dan kalau sudah ketemu
  • Tambahkan kode dibawah ini tepat nya diatas kode </head> :
      <script type='text/javascript'>
      var thumbnail_mode = "float" ;
      summary_noimg = 430;
      summary_img = 430;
      img_thumb_height = 100;
      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>


      Jika ingin merubah ukuran read more nya anda ubah aja di bagian bagian kode di bawah ini Ubah angka nya sesuai kebutuhan :

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

2. Langkah Kedua

      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"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <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>
      <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

NB: Tulisan READ MORE - <data:post.title/> bisa anda ganti sesuai selera anda,sedangkan <data:post.title/> bisa anda hapus jika anda ingin menghilangkan tulisan Judul postingan setelah Tulisan READ MORE .
    Kalau dah selesai simpan templete dan lihat hasil nya .
Mungkin ini bisa membantu, seperti terlihat pada contoh di atas, pada template Blogger ada beberapa syntax yang maksudnya merujuk ke jenis halaman tertentu, misalnya:

1. item <== merujuk ke halaman posting/artikel.
2. static_page <== merujuk ke halaman statis (static pages).
3. index <== merujuk ke halaman index. misalnya homepage, archive, dan search label.
  • Jika telah selesai silahkan simpan templete.

semoga bermamfaat dan untuk contoh seperti pada web ini lihat saja perbedaan nya halaman utama dengan laman statis,semoga membantu,jangan lupa saran dan kritik nya di kotak komentar.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين


Category: