Hướng dẫn thay đổi kích thước thumbnail trong blogger

Chào các bạn, thumbnail trong blogspot khá quan trọng tuy nhiên có một số vấn đề đó là một số blog hiển thị thumbnail rất mờ và không đúng tỉ lệ kích thước.

Thường thì kích thước thumbnail mặc định sẽ là 72px x 72px sẽ làm cho thumbnail hiển thị rất mờ, hoặc kích thước thumbnail sẽ hiển thị ở kích thước s1600 đây là kích thước thumbnail rất lớn làm cho tốc độ tải trang của bạn chậm đi. Dưới đây là cách để có thể thay đổi kích thước thumbnail giúp cho hiển thị rõ nét hơn và cải thiện tốc độ tải trang.

CÁC BƯỚC THỰC HIỆN

CÁCH 1: KHÔNG SỬ DỤNG JAVASCRIPT

Để có thể thay đổi được kích thước thumbnail theo cách này chúng ta sẽ sử dụng đoạn code dưới đây:

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

1. Áp dụng cho thumbnail bài viết gần đây ngoài trang chủ
Để áp dụng cho thumbnail ngoài trang chủ các bạn tìm đoạn code sau đây

expr:src='data:post.thumbnailUrl'

và thay thế nó thành đoạn code này:

expr:src='resizeImage(data:post.thumbnail, 200, "1:1")'

Bạn có thể thay đổi giá trị 200 thành giá trị kích thước bạn muốn và tỷ lệ 1:1 thành tỷ lệ mà phù hợp với blog của các bạn, tỉ lệ mà mình sử dụng cho blog của mình là 3:2
Nếu bạn muốn ảnh tự động resize và giữ nguyên chiều rộng thì sử dụng đoạn code sau:

 expr:src='resizeImage(data:post.thumbnail, 200)'

 2. Áp dụng cho thumbnail của widget Popular Posts

Để áp dụng cho thumbnail widget Popular Posts các bạn tìm đoạn code của tiện ích Popular Posts có dạng như sau:

<b:widget id='PopularPosts1' ... > ... </b:widget>

Rồi thay thế tất cả đoạn code đó thành đoạn code dưới đây:

  <b:widget id='PopularPosts1' locked='false' title='Xem nhiều trong tuần' type='PopularPosts' version='1'>
    <b:widget-settings>
      <b:widget-setting name='numItemsToShow'>7</b:widget-setting>
      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
      <b:widget-setting name='showSnippets'>true</b:widget-setting>
      <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><i aria-hidden='true' class='fa fa-signal'/><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a>
              <div class='the-meta'>
                <span class='author'><data:post.author/></span>
              </div>
</div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                    <img border='0' expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage,300,&quot;3:1&quot;)' expr:title='data:post.title'/>
                </a>
              </div>
              <b:else/>
              <div class='item-thumbnail no-thumb'>
                <a expr:href='data:post.href' target='_blank'>
                    <i aria-hidden='true' class='fa fa-ban'/>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget> 

Thay đổi kích thước 300 và tỉ lệ 3:1 cho phù hợp với blog của các bạn. 

Nếu bạn đã biết một chút về code thì có thể áp dụng cách thay đổi kích thước thumbnail bài viết gần đây ngoài trang chủ cho thay đổi kích thước thumbnail widget Popupar Posts.

CÁCH 2: SỬ DỤNG JAVASCRIPT

Đầu tiên các bạn tìm đoạn code sau đây expr:src='data:post.thumbnail' và thêm vào trước nó đoạn code sau class='resizethumbnail' kết quả sẽ thu được như sau:

class='resizethumbnail' expr:src='data:post.thumbnail'

Tiếp theo các bạn tìm đến thẻ </head> và dán đoạn code sau lên trước nó

<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>

Các bạn có thể thay đổi giá trị 500 thành giá trị kích thước mà bạn muốn.
Nếu bạn muốn thay đổi kích thước ảnh về kích thước gốc thì thay đổi giá trị 500 đó thành 1600

LỜI KẾT

Trên đây là các cách giúp bạn thay đổi kích thước thumbnail giúp hiển thị rõ nét hơn và tăng tốc độ tải trang.

Chúc các bạn thành công! Nếu bạn gặp bất cứ lỗi nào trong quá trình thực hiện hãy comment xuống dưới bài viết này mình sẽ hỗ trợ bạn.