input license here

Làm 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 hước ảnh thực tế.

Làm nét ảnh thumbnail cho blogspot

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ế.
( bài viết này được tham khảo trên trang kslzone.net)

Chúc bạn thành công!
Related Posts
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky