Thay đổi kích thước ảnh thumbnail trong Blogspot không dùng Javascript

Ảnh đại diện thumbnail mặc định của Blogspot được sử dụng khá nhiều trong Blogspot, như widget bài đăng phổ biến, autoreadmore (sử dụng thumbnail mặc đinh)...  Tuy nhiên nhiều lúc mình thấy chưa hài lòng vì kích thước ảnh khá nhỏ, không thay đổi được kích thước nếu không dùng javascript (mặc định là 72px x 72px). Gần đây Blogger đã có thể cho phép ta thay đổi kích thước ảnh thumbnail mà không cần dùng Javascript bằng cách sử dụng phương pháp:

resizeImage(url, size, ratio);// đường dẫn của ảnh, kích thước, tỷ lệ

Ta có thể áp dụng để thay đổi kích thước ảnh thumbnail cho các Widget như sau:

Thay đổi kích thước ảnh thumbnail ngoài trang chủ của tiện ích Autoreadmore

Tìm đoạn code tương tự bên dưới trong template:

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='148' width='230'/>

- Nếu thích ảnh vuông thì thay thế bằng đoạn code bên dưới(ảnh sẽ bị crop theo tỷ lệ):

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail, 200, &quot;1:1&quot;)' expr:title='data:post.title' height='148' width='230'/>

- Nếu muốn ảnh tự động resize, chỉ muốn khống chế chiều rộng thì sử dụng:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail, 200)' expr:title='data:post.title' height='148' width='230'/>

Thay đổi kích thước ảnh thumbnail của Widget Popular Posts

- Đối với template đã được cài widget Popular posts từ trước: làm tượng tự như trên, thay thế đoạn code tương tự bên dưới:

<img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='70' width='120'/>

bằng đoạn:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail, 120, &quot;1:1&quot;)' height='70' width='120'/>

hoặc:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail, 120' height='70' width='120'/>

- Đối với Widget Popular được cài mới thì trong code đã có sẵn đoạn code resize ảnh như sau:

<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>

Chúng ta chỉ cần thay đoạn bôi vàng bằng kích thước mong muốn.

Sau khi làm xong lưu template lại và kiểm tra.