Cách tăng nét ảnh thumbnail cho blogspot

Có rất nhiều nguyên nhân dẫn tới chất lượng ảnh thumbnail blog bị mờ. Tuy nhiên nguyên nhân chủ yếu là do chế độ cắt ảnh tự động của blogger ( data:post.firstImageUrl ) s72-c... nó cắt ảnh với kích thước mặc định 72 x 72. Khi đó nếu kích thước hiển thị ảnh thumbnail thực tế trên blog của bạn lớn hơn nó sẽ khiến ảnh kéo to ra, gây mờ ảnh.

Hôm nay mình sẽ hướng dẫn các bạn cách khắc phục lỗi này, và làm nét ảnh thumbnail cho blogspot. Bằng phương pháp resize và cắt ảnh cho đúng với kích thước ảnh thực tế.

Hướng dẫn làm nét ảnh thumbnail cho blogspot

1. Vào Mẫu --> chỉnh sủa HTML và tìm thẻ </head>
2. Copy code bên dưới dán vào vào trên thẻ </head> tìm được.

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  var rong = 200;
  var cao = 150;
  $('#PopularPosts1, #Blog1, #related-posts').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + rong + '-h' + cao +'-c')});
    image.attr('width',rong);
    image.attr('height',cao);
  });
});
//]]></script>

Trong đó:
rong = 200;
cao = 150;
Là kích thước ảnh được cắt cho hợp với kích thước thực tế. cái này bạn xem kích thước ảnh thức tế để điều trình kích thước cắt ảnh thumbnail cho hợp lý. Nếu không bạn cứ để kích thước đều là 1600 nếu ảnh thumbnail là ảnh vuông.
#PopularPosts1, #Blog1, #related-posts là những Id đối tượng khu vực trên template blogspot mà bạn cần làm nét ảnh thumbnail. Nghĩa là những Id bao khu vực chứa tất cả các ảnh cần làm nét ảnh thumbnail.
3. Xong khi chỉnh xong bạn lưu mẫu và ra check xem ok chưa. nếu không được thì do 1 là Id bạn chọn nó chưa chứa ảnh, hoặc kích thước cắt ảnh vẫn bé hơn kích thước thực tế.


Chúc bạn thành công!