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

Resize và cắt ảnh nhiều thành phần của Blogger

Cám ơn bạn đã đọc bài viết!