Ở 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
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<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!
Belum ada tanggapan untuk "Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger"
Post a Comment