Auto Readmore không thumbnail cho Blogger

Thoáng lướt qua tiêu đề chắc nhiều bạn sẽ nghĩ không có thumbnail thì xài làm gì nhỉ. Thực chất để lấy ra hình ảnh đầu tiên trong bài viết của Blogger thì tương đối rất dễ dàng, bạn có thể hoàn toàn sử dụng code mặc định của nó mà không cần phiền hà đến Javascript và các thứ khác chi cho mất công, thêm vào lại chỉ tổ giảm tốc độ tải trang thôi.


Chính vì thế trước mắt bài viết này mình sẽ chia sẻ với các bạn Auto Readmore không thumbnail trước, còn những bài viết tới mình sẽ hướng dẫn các bạn lấy ra ảnh thumbnail khỏi sử dụng js, rồi kết hợp chúng lại với nhau để sử dụng thế nào.

Auto Readmore không thumbnail cho Blogger

Cái này thì tương tự như mấy cái auto readmore đợt trước thôi, mà mình hướng dẫn lại từ đầu kẻo mấy bạn mới không biết. Đầu tiên các bạn chèn đoạn mã sau đây lên trên thẻ </head>

<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 createSummary(pID) {
    var div = document.getElementById(pID);
    var summ = 150;
    var summary = '<div><p>' + removeHtmlTag(div.innerHTML, summ) + '</div></p>';
    div.innerHTML = summary;
}
//]]></script>

bạn có thể thay thế số lượng ký tự sẽ lấy ra ở ngay bên trên summ = 150.

Tiếp tục để nó hoạt động bạn tìm và thay thế toàn bộ đoạn mã sau đây

<data:post.body/>

bằng

<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'> createSummary(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>

lưu ý là bên trong đoạn mã thay thế cũng có chứa <data:post.body/> nên phải để ý không lại chèn một nùi code là tiêu đấy nhé. Xong hết thì lưu lại template và kiểm thử.

Lời kết

Đoạn auto readmore này sẽ hoạt động nhanh hơn vì nó không phải làm công việc tìm hình ảnh đầu tiên mà lôi ra nữa. Có thể là đoạn auto readmore với thumbnail thì tiện hơn, nhưng tiện hơn tương đương tới tăng thêm một tẹo thời gian tải trang web.

Cập nhật thủ thuật tạo auto readmore với thumbnail 2014 mới nhất tiện dụng và tải trang nhanh.