Auto readmore không JS với thumbnail tùy chỉnh kích thước 2016

Auto readmore được sử dụng cho hầu hết các Blogger template. Thủ thuật này cũng được chia sẻ rất nhiều, tuy nhiên muốn điều chỉnh kích thước ảnh thumbnail thì lại phải dùng Javascript.

Hôm nay mình sẽ giới thiệu cách tạo Auto readmore cho Blogspot, có thể thay đổi kích thước thumbnail mà không dùng Javascript

Nếu Template đã có sẵn Auto readmore khác thì hãy xóa trước khi áp dụng Auto readmore không JS với thumbnail tùy chỉnh kích thước 2016, xem Hướng dẫn xóa Auto readmore trong Blogger Template

Các bước thực hiện:

Trước khi thực hiện, bạn nên sao lưu (back up) template để đề phòng sự cố không mong muốn xảy ra trong quá trình chỉnh sửa, xem Sao lưu và phục hồi Blogger template

1. Đăng nhập vào Blogger.com

2. Chọn Template > Edit HTML

Tìm trong template đoạn mã <data:post.body/>, rồi thay thế bằng đoạn code bên dưới:

      <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
        <div class='posts-thumb'>
          <b:if cond='data:post.thumbnailUrl'>
            <img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,230,"1:1")' expr:title='data:post.title' height='140' width='230'/>
<b:else/>
<img class='post-thumbnail' expr:alt='data:post.title' width='230' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpPiBp7sY5y6qBtC1UyYFoehhSM5P4GzphIO60utrNjzMPDAlFnTjMgpdACdQHv1jutBlC-4t1dNPcXxb8Zb1ystxRT6w1AgVkoBfauDqWNLwFgIczYd6huGMIoMXIyM4ypo8KN-9Zr0/s72-c/no-thumbnail.jpg'/>
          </b:if>
        </div>
<div class='summary'>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>

Chú ý:

- Trong template có thể có nhiều mã <data:post.body/> , vì vậy thay từng cái một rồi kiểm tra kết quả.
- Thay đổi kích cỡ ảnh thumbnail bằng cách thay đổi giá trị 230 trongresizeImage(data:post.thumbnailUrl,230,"1:1")
- Thay đổi tỷ lệ ảnh hiển thị chiều rộng/ chiều cao: thay đổi 1:1 trongresizeImage(data:post.thumbnailUrl,230,"1:1")
- Nếu muốn ảnh tự động điều chỉnh chiều cao thì thay thếresizeImage(data:post.thumbnailUrl,230,"1:1") bằngresizeImage(data:post.thumbnailUrl,230)
- Đoạn code này đã có ảnh mặc định thay thế trong trường hợp bài viết không có ảnh. Nếu bạn không thích thì có thể chỉnh sửa hoặc xóa bỏ code sau:

<b:else/>
<img class='post-thumbnail' expr:alt='data:post.title' width='230' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpPiBp7sY5y6qBtC1UyYFoehhSM5P4GzphIO60utrNjzMPDAlFnTjMgpdACdQHv1jutBlC-4t1dNPcXxb8Zb1ystxRT6w1AgVkoBfauDqWNLwFgIczYd6huGMIoMXIyM4ypo8KN-9Zr0/s72-c/no-thumbnail.jpg'/>

3. Thêm CSS

Bạn có thể tùy chọn 2 phương án sau:
- Ảnh thumbnail bên trái bài viết: thêm CSS .posts-thumb{float:left}
- Ảnh thumbnail bên trái bài viết: thêm CSS .posts-thumb{float:right}

4. Lưu Template và kiểm tra kết quả