Cách khắc phục hình ảnh Thumbnail bị mờ cho Blogspot

22.9.22 Cập nhật : Add Comment

Xin chào các bạn đã quay trở lại với Yingvn.com. Hôm nay mình xin chia sẻ với các bạn Cách khắc phục hình ảnh Thumbnail bị mờ trên Blogspot/ Blogger. Hiện nay do cập nhật từ blogger nhiều bạn đã bị tình trạng mờ thumbnail, nhiều bạn thắc mắc nên mình xin chia sẻ cách khắc phục tình trạng này, làm cho hình ảnh Thumbnail Blogspot nét hơn, hãy cùng mình tìm hiểu nhé.

Cách khắc phục Thumbnail hình ảnh bị mờ trên Blogspot. Độ phân giải tiêu chuẩn cho hình ảnh thu nhỏ Blogspot chỉ được 72pixel, có thể được nhìn thấy trong url hình ảnh thumbnail mã được liệt kê S72-c.

Khắc phục hình ảnh Thumbnail bị mờ trên Blogspot

Cách thứ 1:

Bước 1: Tìm đoạn mã sau:

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>{codeBox}

Bước 2: Thay đoạn mã trên bằng mã code dưới đây:

<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, "4:3") : data:post.thumbnail' var='image_bro'>
<img expr:alt='data:post.title' expr:src='data:image_bro'/>
</b:with>{codeBox}

Lưu ý: Bằng cách sử dụng đoạn mã trên, nó sẽ tự động thay đổi mã S72-c

Thay đổi số 300 theo nhu cầu của bạn
Trong mã HTML ở trên, mình sử dụng tỷ lệ 4: 3 (bạn có thể thay đổi theo nhu cầu của mình).

Cách thứ 2:

Dán đoạn mã dưới đây trước thẻ ~~</body>~~

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.popular-posts img').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script>{codeBox}

Hướng dẫn :

Thay .popular-posts img
s72-c kích thước ảnh gốc
s640 kích thước hình ảnh bạn muốn hiển thị

Khắc phục Thumbnails blogspot bị mờ do URL đổi thành mặc định googleusercontent.com

Hiện nay các website blogspot hiện đã đổi sang lưu trữ sang googleusercontent.com (https://blogger.googleusercontent.com/...) làm cho ảnh Thumbnails blogspot bị mờ. Do vậy chúng ta cùng khắc phục lỗi này để blogspot của chúng ta nhìn mượt hơn.

Bước 1: Vào trong chỉnh sửa HTML rồi tìm kiếm ~~/s72-c/~~ và xác định cụm ngoặc đơn chứa ~~/s72-c/~~

Bước 2: thay thể cả cụm cả ngoặc đơn đó thành ('s72-c', 'w500') lưu vào và xem kết quả

Lời Kết :

Như vậy là mình vừa chia sẻ với các bạn Cách khắc phục hình ảnh Thumbnail bị mờ trên Blogspot/ Blogger. Hy vọng nó sẽ hữu ích với các bạn. Chúc các bạn thành công!