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
<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 != ""’><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 ? "item-content" : "item-thumbnail-only"’>
<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,"3:1")’ 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>
CÁCH 2: SỬ DỤNG JAVASCRIPT
class=’resizethumbnail’ expr:src=’data:post.thumbnail’
<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