Auto Read More Dengan No Image

Auto Read More Dengan No Image ~Pada kali ini saya akan memberikan tutorial auto read more. Sebenarnya tutorialnya sudah banyak digoogle akan tetapi kebanyakan script auto read more tidak akan menampilkan thumbnail pada artikel yang tidak disertai gambar.
Gimana, langsung saja ketutorialnya:
~Masuk ke blogger >> Template >> Edit HTML
~Cari kode </head> lalu simpan kode dibawah ini tepat diatasnya:
<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 = "http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/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>
Tulisan yang berwarna merah bisa anda sesuaikan sendiri sesuai selera.
~Cari kode <data:post.body/> lalu hapus 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...
Selesai, dan selamat mencoba semoga berhasil.

Sumber: ~Tutorial: http://blog.kangismet.net/2012/10/auto-readmore-dengan-thumbnail-no-image-di-blogspot.html

Mas Arif :

2 komentar

sangat membantu heheh ijin comot y tempenya

Balas

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)