Hướng Dẫn Tạo Thumbnai và Read more Blog

30/5/15

Hướng Dẫn Tạo Thumbnai và Read more Blog

Đăng bởi: Bình luận

Hôm nay mình sẽ hướng dẫn các bạn cách tạo hình thumbnai và read more cho BlogSpot. Mình nghĩ các bạn cũng đã biết làm nhưng một số bạn mới cũng chưa biết hoặc đã biết nhưng đã tạm quên mất. Code viết hoàn toàn bằng javascript nhé cũng khá đơn giản trước tiên chúng ta đăng nhập vào blog và làm theo các bước dưới:

 Vào Template - Edit HTML, Expand widget, tìm đến thẻ<data:post.body/> và thay nó bằng đoạn code sau: 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;đọc tiếp...</a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 

Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template: 

<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 = 120;

 img_thumb_width = 160;

 // ganti dengan gambar sesuai selera anda

 img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOcKYhUKS_1xg702jSVCz4YPznRLcYi4uPBHZpgBIzFaavDmqPEVBG1t88_Z9-QN6geuwmEEYhDxOqtk-71fdFdheeyy5tuIcEbLiFHALrpVMeBf5MS6gtf4gg12B4-Oz1ssxCnNpTiDk/s1600/default.png&quot;;

</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>
Các bạn hãy chú ý các thông số màu đỏ mà tôi đã đánh dấu: 
summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện. 
summary_img là số ký tự phần miêu tả cho các bài có hình đại diện. 
img_thumb_height chiều cao của hình đại diện (pixel). 
img_thumb_width chiều rộng của hình đại diện (pixel). 
Bạn đang đọc bài viết Hướng Dẫn Tạo Thumbnai và Read more Blog tại Website: Học Lập Trình

0 nhận xét: