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.
Ví dụ thay đổi kích thước của bài đăng phổ biến lên 150px, bạn đổi
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!
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ànhchangeThumbSize("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!
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
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 :)
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
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.
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é.
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?