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.

Auto Readmore với Thumbnail bằng Javascript

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_heightimg_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
để 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.

9 bình luận

  1. avatar says

    lúc 09:48 10 tháng 4, 2014

    Lâm Kiều ơi, em có thể share giúp code Resent Post mà có hình thumb kô? anh có thử các code của google và code của vài blogger nhưng: của google thì nó load lâu quá, có khi không chạy được, 1 số code của blogger chạy được trên 1 số template thôi.

    Thanks em nhé

  2. avatar says

    lúc 10:01 10 tháng 4, 2014

    Anh muốn nó giống Popular Posts hay sao ạ :D

  3. avatar says

    lúc 10:35 10 tháng 4, 2014

    đúng rồi em, Poular nó chỉ có 10 bài thôi àh. còn resent có thể chỉnh hơn và nó show những bài vừa đăng.

  4. avatar says

    lúc 11:15 10 tháng 4, 2014

    Để tối về nhà tìm hiểu rồi nếu được thì mai em đăng bài đưa code lên đây nhé, hôm nay bận cả ngày trên trường rồi.

  5. avatar says

    lúc 19:32 17 tháng 5, 2015

    ad cho mình hỏi là khi tìm kiếm thì nó có tới 2 dòng luôn. Vậy mình nên thay dòng nào? mình có thử là thay dòng 1 không có tác dụng còn dòng thứ 2 thì code hoạt động đc.
    vậy nếu mình thay dòng thứ 2 thôi mà ko thay dòng thứ nhất thì nó có ảnh hưởng gì đến auto readmore blog ko. hay là phải thay hết.

  6. avatar says

    lúc 19:34 17 tháng 5, 2015

    ý mình là thẻ data post body

  7. avatar says

    lúc 22:11 17 tháng 5, 2015

    Thay một thẻ không ảnh hưởng gì đâu bạn !
    KJ Magic

  8. avatar says

    lúc 22:33 17 tháng 5, 2015

    Theo mình đoán không làm thì cái thứ nhất nằm trong includable dành cho mobile, bạn có thể cgủ thay cái thứ 2 cũng hoàn toàn ok bạn nhé.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.