Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger

Ở những bài trước, mình nó nói mình sẽ chia sẻ với các bạn cách thay đổi kích thước của thumbnail mà không làm cho ảnh bị vỡ hạt. Việc kết hợp jQuery này với "Auto readmore với thumbnail không sử dụng javascript cho Blogger" không những làm cho tốc độ tải trang của blog của bạn không bị ảnh hướng nhiều mà còn làm cho ảnh thumbnail to tùy theo ý thích của bạn.

Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger

Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger

Do đoạn jQuery này đã làm sẵn hết mọi việc rồi nên rất đơn giản, đầu tiên bạn tìm đến thể </body> (thưởng thì nó ở cuối template khỏi tìm chi cho mệt) sau đó thêm đoạn jQuery này lên trên
<script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",150);                 
</script>
trong đoạn mã ở trên Blog1 là id của wiget mà bạn muốn thay đổi thumbnail (Blog1 chỉ đúng nếu bạn sử dụng auto readmore mà mình đã nói ở đầu bài), còn 150 là kích thước mà bạn muốn ảnh thumbnail phần còn lại tùy thuộc vào phần css giới hạn kích thước của ảnh.

Ví dụ thay đổi kích thước của bài đăng phổ biến lên 150px, bạn đổi
changeThumbSize("Blog1",150);
thành
changeThumbSize("PopularPosts1",150);
Sau đó tìm đến thẻ ]]></b:skin> và thêm đoạn này lên trên
.PopularPosts img {
width: 150px;
}

Như vậy thủ thuật thay đổi kích thước thumbnail mà không làm mất chất lượng ảnh đã kết thúc, như bạn đã thấy có rất nhiều mẹo bạn có thể làm cho Blogger rất đẹp mà không ảnh hưởng nhiều đến tốc độ tải trang của chúng ta. Nếu có bất kì thắc mắc nào bạn có thể để lại nhận xét phía dưới.

P/S: Mình đã có một bài viết mới có thể không những resize mà còn cắt được hình ảnh theo đúng kích thước mà bạn mong muốn, ban có thể tham khảo qua bài viết tại đây
Cám ơn bạn đã đọc bài viết!

6 bình luận

  1. avatar says

    lúc 06:52 8 tháng 5, 2014

    Bạn cho mình hỏi, mình muốn dùng tip này để thay đổi ảnh toàn bộ bài đăng ở trang chủ thì làm thế nào

  2. avatar says

    lúc 13:46 8 tháng 5, 2014

    Bạn để lại cho mình địa chỉ blog của bạn nhé, mỗi template sẽ mỗi khác, sau khi xem qua mình sẽ sửa lại đoạn js trên cho bạn :)

  3. avatar says

    lúc 16:58 5 tháng 6, 2015

    Thumbnail của tớ tự nhiên to đột biến so với các bài khác mà biết cách khắc phục, KSL giúp với!
    https://a.disquscdn.com/uploads/mediaembed/images/2121/8202/original.jpg

    còn đây là blog tớ: logictrochoi.blogspot.com

  4. avatar says

    lúc 16:15 21 tháng 8, 2015

    Chào bạn, mình có blog saotop.com, khi ảnh được tải lên thì chất lượng rất kém. Còn nếu ảnh coppy về thì giữ nguyên. Vậy có cách nào để ảnh tải lên có được chất lượng tốt. Mình lấy ví dụ bài này, (http://www.saotop.com/2015/08/cau-ca-nha-beck-tro-tai-truot-van.html) mình upload ảnh lên blog mà chất lượng rất tệ. Mong bạn gỡ rối dùm.

  5. avatar says

    lúc 18:45 22 tháng 8, 2015

    Mình có xem sơ qua thì thấy blog bạn để up hình hình như là để kích thước mặc định. Mặc, bạn có thể vào lại bài viết đó, nhắp vào từng ảnh, sẽ có một thanh nhỏ hiện lên ở dưới. Lúc này thì bạn chọn vào Kích thước gốc hay "Original size" nếu sử dụng tiếng anh nhé.

  6. avatar Nặc danh says

    lúc 14:38 20 tháng 4, 2016

    Anh cho em hỏi tình hình là Blog của em khá ok rồi chỉ có cái là cái ảnh hiẻn thị bài đăng xem trước không được đẹp mắt ảnh gốc của nó là 1280x720 em để trong bài đăng là 640x360 nhưng khi ra ngoài trang chủ thì nó bị co lại còn 600x300 làm cho ảnh bị xấu đi giờ em phải làm sao anh?

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.