Khắc Phục Hình Ảnh Thumbnail Bị Mờ Trên Blogspot

Gần đây, tôi thấy một số người trên Facebook thắc về việc hình thu nhỏ hoặc hình ảnh trên trang chủ bị mờ khi đăng bằng phiên bản Blogger mới.

Nên mình đã kiếm được thủ thuật cách khắc phục hình ảnh trở về nét đẹp ban đầu của nó.

Ảnh Thumbnail bị mờ do JavaScript để gọi hình thu nhỏ trên trang chủ với mã dưới đây không còn hoạt động bình thường

JavaScript

<script type=”text/javascript”>
//<![CDATA[
function (e,t){var n=400;var r=280;image_tag='<img width=”‘+n+'” height=”‘+r+'” src=”‘+e.replace(“/s72-c/”,”/w”+n+”-h”+r+”-c/”)+'” alt=”‘+t.replace(/”/g,””)+'” title=”‘+t.replace(/”/g,””)+'”/>’;if(t!=””)return image_tag;else return””}
//]]>
</script>

Trong HTML, mã gọi có dạng như sau

<a expr:href=”https://www.nguyenlamblog.xyz/2020/09/data:post.url” expr:title=”data:post.title”><script type=”text/javascript”>
document.write(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>

Cách Khắc Phục Hình Ảnh Thumbnail Bị Mờ Trên Blogspot

Vào Blogger ➤ Chủ đề ➤ Chỉnh sửa HTML.

Bây giờ, thay thế mã HTML gọi hình thu nhỏ bằng mã bên dưới, bạn có thể tìm thấy mã này ở bất kỳ đâu trong

<div class=”post hentry”>

Code:

<b:includable id=’postthumbnail’ var=”post”>
<div class=”img-thumbnail”>
<b:if cond=’data:post.firstImageUrl’>
<a expr:href=”https://www.nguyenlamblog.xyz/2020/09/data:post.url”><img class=”lazyload” expr:alt=”data:post.title” expr:data-src=”resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)” expr:title=”data:post.title”/>
</a>
<b:elseif cond=’data:post.thumbnailUrl’/>
<a expr:href=”https://www.nguyenlamblog.xyz/2020/09/data:post.url”><img class=”lazyload” expr:alt=”data:post.title” expr:data-src=”resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)” expr:title=”data:post.title”/>
</a>
<b:else/>
<a expr:href=”https://www.nguyenlamblog.xyz/2020/09/data:post.url”><img class=”lazyload” data-src=”https://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/no-image.png” expr:alt=”data:post.title” expr:title=”data:post.title”/>
</a>
</b:if>
</div>
</b:includable>

Lưu ý:  Nếu bạn không thể tìm thấy người gọi hình thu nhỏ, hãy dán mã vào bất kỳ đâu bên dưới

<div class=”post hentry”>

Nhấn Save  để lưu.

Tham khảo từ gistablog

———————————–