Beranda » Trik » Memasang Auto Read Mode Thumbnail No Image di Blogger

Memasang Auto Read Mode Thumbnail No Image di Blogger

Memasang Auto Read Mode Thumbnail No Image di Blogger

Auto read more ini adalah sebuah trik dan cara untuk meringkas tampilan posting, seiring perkembangannya kini berkembang menjadi gaya keren tersendidi. bagaimana trik membuatnya? ikuti langkah di bawah ini....

Auto Readmore dengan Default Thumbnail

Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langkah mudah
1. Tambahkan JavaSript
2. Tambahkan HTML

Menambahkan JavaScript

Sebelum melakukan apa pun, saya sarankan backup dulu template anda untuk menghindari hal yang tidak diinginkan.

Untuk menambahkakan kode JavaSript dibawah ini, simpan kode dibawah ini sebelum </head>

<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;

 // ganti angka dibawah untuk merubah ukuran thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200;

 // ganti dengan gambar sesuai selera anda
 img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwMxB31H8zAneRsjSCSw9vlOAAwBpqNCiO89FoAa_80u6CnV6p5pHyWtcOO2KGGhOKPKVS6DTDiG1cMlf1I04XAgyoC0n12UUTUzVRSr3qhq_aKh-2nvVivVhXC14H0GaUIQkFAUv-BTd/s1600/default.png";
</script>

<script type='text/javascript'>
 //<![CDATA[

 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;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>

Menambahkan Kode HTML

Cari kode <data:post.body/> dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != "static_page"'>
 <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:right;margin-top:10px'>
   <a expr:href='data:post.url'>
Read More &#187;
   </a>
  </span>

 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Simpan template Anda, dan selamat.... Anda telah berhasil menambahkan auto readmore dengan default thumbnail. bila Anda sudah menggunakan Auto Readmore dengan Thumbnail lama, dan ingin mengganti cukup lakukan langkah pertama, semoga manfaat

Memasang Auto Read Mode Thumbnail No Image di Blogger

Belum ada tanggapan untuk "Memasang Auto Read Mode Thumbnail No Image di Blogger"

Post a Comment