Chia sẻ lại Auto Readmore với Thumbnail bằng Javascript

Dù dùng đi dùng lại nhiều cách để tạo autoreadmore với thumbnail trong thiết kế template thì tại một vài giao diện mình vẫn sử dụng đến cách tạo bằng Javascript này, đoạn mã này cũng không có gì mới chỉ là chia sẻ lại với các bạn có nhu cầu.


Sơ lược cho những bạn chưa biết, đoạn js này cho phép các bạn kiểm soát số lượng ký tự được lấy ra ngoài trang chủ, tự động lấy hình ảnh đầu tiên trong bài viết làm ảnh thumbnail dù cho có up lên tại Blogger hay không và nhiều tùy chỉnh nhỏ khác nữa.

Auto Readmore với Thumbnail bằng Javascript

Đăng nhập Blogger » Mẫu » Chỉnh sửa HTML tìm ìm đến thẻ </head> và thêm đoạn mã sau lên trên

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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;
        if(thumbnail_mode == "yes") {
 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>

Bây giờ tìm và  thay thế toàn bộ các thẻ

<data:post.body/>

bằng đoạn mã sau đây

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
        <b:else/>
        <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>
        <a class='more' expr:href='data:post.url'><data:post.jumpText/></a>
        </b:if>
        </b:if>

Lưu lại template là hoàn tất

Hướng dẫn tùy chỉnh

Bạn có thể tùy chỉnh các giá trị sau trong đoạn mã

• thumbnail_mode – để “yes” để hiện ảnh thu nhỏ, và ngược lại “no” không hiện ảnh thủ nhỏ.
• summary_img – số lượng ký tự lấy ra từ bài viết (bao gồm cả khoảng trắng) khi có ảnh thu nhỏ.
• summary_noimg – số lượng ký tự lấy ra từ bài viết (bao gồm cả khoảng trắng) khi không ảnh thu nhỏ.
• img_thumb_height và img_thumb_width - chiều dài và chiều rộng của ảnh tính theo px.
• Bạn có thể thay thế chữ Đọc tiếp trong widget Blog tại phần Bố cục.

Lời kết

Đối với những giao diện không qua phức tạp thì việc sử dụng Auto Readmore này khá là thích hợp, tại đoạn js này đoạn văn bản được lấy ra sẽ xóa hết mọi tùy chỉnh vốn có của nó. Nếu bạn muốn giữ lại thì mình sẽ chia sẽ tiếp tục đoạn Auto Readmore khác. Bạn cũng có thể tham khảo qua

• Auto readmore với thumbnail không sử dụng javascript cho Blogger

để tối ưu hơn về tốc độ tải trang, nhưng ít tùy chỉnh.

P/S: Mới cập nhật cái mới Auto readmore với thumbnail 2014 khá là hoàn hảo.