Resize và cắt ảnh thumbnail đúng kích thước cho Blogger

Nếu bạn là một người sử dụng Blogger lâu ngày, bạn sẽ thấy hầu hết các js hỗ trợ Auto Readmore hiện nay đều sử dụng css để căn chỉnh kích thước của ảnh thumbnail được hiện ở trang chủ, và điều này làm cho hình ảnh bị biến dạng. Qua nhiều thủ thuật trước đây mình chia sẻ về các thủ thuật với ảnh tải lên ở Blogger cũng như Picasa:
Cuối cùng mình đã tổng hợp cả thủ thuật trên và viết ra được một đoạn js hoàn chỉnh giúp resize và cắt ảnh đúng kích thước không làm biến dạng hình ảnh. Lần này không chỉ ra hình vuông nữa mà mọi kích thước bạn mong muốn.

Resize và cắt ảnh thumbnail đúng kích thước cho Blogger

Resize và cắt ảnh thumbnail đúng kích thước cho Blogger

Sử dụng đoạn js này rất đơn giản, bạn tim đến trước thẻ </body> và thêm đoạn mã sau vào
<!--KslZone Auto Picasa Image Resize Script Started-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
var _0x9d21=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x6C\x65\x6E\x67\x74\x68","\x73\x72\x63","\x73\x31\x36\x30\x30","\x77","\x2D\x68","\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65"];function resizeThumb(_0xb158x2,_0xb158x3,_0xb158x4){var _0xb158x5=document[_0x9d21[0]](_0xb158x2),_0xb158x6=_0xb158x5[_0x9d21[2]](_0x9d21[1]);for(var _0xb158x7=0;_0xb158x7<_0xb158x6[_0x9d21[3]];_0xb158x7++){_0xb158x6[_0xb158x7][_0x9d21[4]]=_0xb158x6[_0xb158x7][_0x9d21[4]][_0x9d21[9]](_0x9d21[5],_0x9d21[6]+_0xb158x3+_0x9d21[7]+_0xb158x4+_0x9d21[8]);} ;} ;
resizeThumb("Blog1",200,140);
//]]></script>
</b:if></b:if>
<!--KslZone Auto Picasa Image Resize Script Started--> 
Thay thế 200 bằng chiều rộng và 140 thành chiều cao của ảnh thumbnail mà bạn mong muốn. Lưu lại template và kiểm thử!

Lời kết

Đoạn js này bạn có thể sử dụng được với hầu hết các Blogger TemplateAutoReadmore, nếu bạn nào không sử dụng được đoạn js trên hãy để lại nhận xét phía dưới để được hỗ trợ.

Bạn có thể xem qua phiên bản khác cùng chức năng tại "Resize và cắt ảnh nhiều thành phần của Blogger".

57 bình luận

  1. avatar says

    lúc 19:00 21 tháng 5, 2014

    anh đang bị mắc vấn đề này, em xem thử có cách nào ko mầ viết tut nhé!
    Anh làm 1 trang video , lấy nguồn từ youtube và dùng code chèn video loại dùng để lấy ảnh thumb trên server củ youtube làm ảnh thumb hiện ra trang chủ của site mình ấy..:D nhưng ảnh bị mờ căm out net...em nghiên cứu xem nhé..

  2. avatar says

    lúc 14:49 22 tháng 5, 2014

    A có trang http://kemtrinam24g.blogspot.com/ - đang cài đặt thử nghiệm từ một mầu temp sưu tầm trên mạng, trang bị lỗi ảnh thumbnail hiển thị không đúng tỷ lệ nhìn rất xấu, anh chỉnh hoài không được, sử dụng đoạn code của em trong bài viết này cũng không có kế quả. Em vui lòng kiểm tra giúp a xem có cách nào khắc phục được không
    Cảm ơn em!

    Nguyễn Duy (ĐT: 0909 144 599)

  3. avatar says

    lúc 14:51 23 tháng 5, 2014

    Với template của anh thì anh thay thử Blog1 thành main-wrapper nhé, rồi nói em biết được không.

  4. avatar says

    lúc 12:14 29 tháng 5, 2014

    Không được Lâm Kiều ơi, a thay Blog1 = main-wrapper thì không lưu temp được, em cho a địa chỉ mail để a gửi html của temp này cho em chỉnh giùm được không

    Thanks em!

  5. avatar says

    lúc 18:11 29 tháng 5, 2014

    Ok, email em là rainbow.lam25@gmail, anh cứ gửi qua em xem rồi làm được hay không em trả lời anh.

  6. avatar says

    lúc 00:44 8 tháng 6, 2014

    bloganh bị lỗi ảnh vui lắm chú, blog có phần bài viết xem nhiều mặc định của blogspot đó..
    trang chủ thì ảnh nó bị nhòe, trang bài viết lại ko bị ! :v khó hiểu dã man..chú có cao kiến gì ko?

  7. avatar says

    lúc 09:09 8 tháng 6, 2014

    Anh cứ để lại domain cho em rồi em mới xem được có cao kiến gì không :3

  8. avatar says

    lúc 16:02 9 tháng 6, 2014

    http://www.danangplus.com/ domain đây em :D

  9. avatar says

    lúc 23:14 9 tháng 6, 2014

    phần Tiêu điểm Popularpost đó em, nhòe hết luôn T^T

  10. avatar says

    lúc 09:07 10 tháng 6, 2014

    vậy anh xài js trên thay Blog1, bằng PopularPosts1, chiều rộng chiều cao anh tự đặt nhé tại em vào blog anh thấy anh tắt mất tiêu thumbnail rồi :D

  11. avatar says

    lúc 14:53 31 tháng 8, 2014

    Chào Lâm Kiều! Những bài viết của bạn rất hữu ích. Cho mình hỏi là mình có trang http://www.zoizoizoi.com/. Ở mục BÀI VIẾT MỚI NHẤT của trang mình khi post bài có nhãn là Infographic thì nó lấy ảnh không được đẹp. Bạn có thể hướng dẫn mình cách chỉnh hình này không? Cám ơn bạn trước nhé. Mình hỏi thêm nữa là, nếu mình muốn xóa cái mục BAÌ VIẾT MỚI NHẤT ở trang chủ thì trong phần Chỉnh sửa HTML mình phải xóa từ đâu vậy bạn.

  12. avatar says

    lúc 19:34 31 tháng 8, 2014

    Bạn vừa muốn chỉnh sửa muốn xóa nó, ý bạn là sao mình không hiểu lắm :D

  13. avatar says

    lúc 22:06 31 tháng 8, 2014

    Giờ mình muốn xóa mục BÀI VIẾT MỚI NHẤT luôn Lâm Kiều, bạn hướng dẫn mình với!

  14. avatar says

    lúc 09:50 1 tháng 9, 2014

    Giờ mà xóa nó đi mang nó lại sẽ rất phiền, bây giờ mình sẽ hướng dẫn bạn ẩn nó đi chỉ sử dụng CSS đơn giản, vì mình thấy cái đó nó cũng ít không ảnh hướng nhiều.

    Bạn chèn đoạn css sau đây lên trên thẻ ]]> nhé
    #singlepage {
    display: none;
    }

  15. avatar says

    lúc 17:09 1 tháng 9, 2014

    Cho mình hỏi là thẻ ]]> đó mình xác định vị trí nó bằng cách nào? Có cái ]]> và //]]> (/script) thì mình chọn cái nào zậy? Mình không chuyên lập trình lắm

  16. avatar says

    lúc 17:11 1 tháng 9, 2014

    Eo, sorry bạn nhé, thẻ HTML ghi vào đây nó bị ẩn, quên mất chèn lên trên thẻ này nhé
    ]]></b:skin>

  17. avatar says

    lúc 22:16 1 tháng 9, 2014

    Mình đã thử và kết quả là trang chủ không hiện bài viết luôn bạn, nên mình chuyển hướng khác là chỉnh số bài viết hiện ra ở trang chủ ít lài cụ thể là 2 bài, nó có 1 vấn đề phát sinh mình vừa thấy là ở mục BÀI VIẾT MỚI NHẤT nó đánh số trang 1 2 Next . Khi nhấn vào trang 2 thì chỉ có 1 bài viết. Giờ mình muốn hỏi là xóa nút trang 1, 2 Next ở trang chủ có dc hok và phải làm như thế nào vậy Kiều Lâm...

  18. avatar says

    lúc 22:21 1 tháng 9, 2014

    Bạn nối bỏ cái bài viết mới nhất thì mình đưa đoạn đó nó ẩn hết là đúng rồi mà.

    Còn như muốn bỏ cái điều hướng thì chèn đoạn này lên vị trí tương tự
    .pagenavi {display:none!important;}

  19. avatar says

    lúc 17:07 17 tháng 9, 2014

    Bạn cho mình hỏi là tại sao mình đặt size cho ảnh trong css (heigh, width) nhưng khi show thumbnail nó lại load kích thước natural về nhỉ? Mong bạn giúp đỡ, blog của mình http://csttol.blogspot.com

  20. avatar says

    lúc 19:45 17 tháng 9, 2014

    Bạn nói rõ hơn là bạn đặt css cho phần ảnh nào, tên class hoặc id của ảnh đó là gì được không, vì mình ghé qua cũng không biết là cái nào để hỗ trợ nữa :D

  21. avatar says

    lúc 03:34 19 tháng 9, 2014

    Khi add đoạn này vào nó báo lỗi :D

  22. avatar says

    lúc 08:27 19 tháng 9, 2014

    Sắp tới chắc em share đoạn khác, cắt từ lúc bắt đầu luôn, đoạn này nó chạy sau khi ảnh được lấy ra, mà sao nhiều template chạy không được em cũng không biết nữa :D

    Đơn giản là dùng for duyệt ảnh trong id hoặc class của thẻ thôi mà =.=

  23. avatar says

    lúc 23:10 20 tháng 9, 2014

    Mình đặt cho css các div box. vd : .box1 left {height : 230px;width :280px} Có điều khi mình lấy bài viết từ RSS về thì ảnh tuy được đưa về giá trị trên nhưng nó vẫn load cả kích thước thực vì khi kiểm tra phần tử sẽ thấy là : 230 x 280 (natural : 800 x 600 ) . Mình muốn ảnh được load với giá trị thumbnail chứ không chỉ thay đổi kích thước (mất luôn cái phần natural ý).

  24. avatar says

    lúc 08:25 21 tháng 9, 2014

    CSS chỉ có nhiệm vụ chế biến lại hình dạng của ảnh đó cho đúng kích thước mà người dùng mong muốn thôi, có vẻ bạn không hiểu bản chất của width height trong CSS rồi.

    Bạn có thấy những ảnh thumbnail của bạn bị méo mó đi không, đó là do CSS bóp hoặc bành cái ảnh của bạn cho nó lại cho đúng kích thước mà bạn đã quy định, width height không phải là thứ dùng để cắt ra hình ảnh.

    Bạn tham khảo bài này
    http://www.kslzone.net/2014/06/resize-va-cat-anh-nhieu-thanh-phan-cua.html
    sử dụng với các class ".box1-left" "box2-left" và ghi chiều rộng ảnh bạn mong muốn vào nhé.

  25. avatar says

    lúc 18:13 25 tháng 9, 2014

    Đoạn mã của bạn ở dòng thứ 3 bị lỗi, hình như thừa 1 dấu ngoặc "<"

  26. avatar says

    lúc 18:17 25 tháng 9, 2014

    Đúng rồi, bữa anh Dư nói mình tưởng nó chạy ko được, thì ra là lỗi không lưu được luôn. Cám ơn bạn mình sửa rồi :D

  27. avatar says

    lúc 18:19 25 tháng 9, 2014

    bạn xem giùm mình với nhé, http://123congnghethongtin.blogspot.com/, mình nên thay blog1 thành gì hay như thế nào, cám ơn bạn trước :D

  28. avatar says

    lúc 18:28 25 tháng 9, 2014

    Mình để ý thì blog của bạn, ảnh trên trang chủ hình như không phải cắt ảnh mà bạn resize lại đúng không ? vì ảnh trên trang chủ với ảnh trên bài viết là giống nhau về tỷ lệ ^^

  29. avatar says

    lúc 18:30 25 tháng 9, 2014

    Trang mình xài script khác bạn nhé ^^, mình xử lý ảnh ngay từ lúc bắt đầu lấy ra ảnh rồi. Nên mọi thứ đều ok. Mình sẽ share trong thời gian sắp tới.

  30. avatar says

    lúc 18:35 25 tháng 9, 2014

    Bạn thử thấy Blog1 thành main-home thử nhé.

  31. avatar says

    lúc 20:51 28 tháng 9, 2014

    Thủ thuật rất hay, mình đã thử thành công. Tuy nhiên trong quá trình test trên PageSpeed Insights thì mình có phát hiện ra 1 vấn đề nhỏ là : ảnh tải xong rồi mới resize, tức là vẫn tốn bằng đầy dung lượng để tải về. Khi nào có code resize ảnh trước khi tải về bạn share cho anh em nhé ^.^

  32. avatar says

    lúc 21:59 28 tháng 9, 2014

    Không có cách nào để sử lý trước khi ảnh nó ra được hết bác ơi :D Blogger nó không cho tác động vào code của nó mà :D

  33. avatar says

    lúc 22:48 19 tháng 10, 2014

    Anh ơi hiện tại em đang có vấn đề về Bài viết trên trang chủ của Blog, cụ thể là ảnh Thumnail bài viết lúc hiện, lúc không, có bài viết thì hiện ảnh thumnail bài viết, có bài đăng thì không hiện. Trong khi đó ở phiên bản di động thì đều hiện hết anh ạ. Anh giúp em chỉ em cách giải quyết vấn đề này được không?
    Em cảm ơn anh ạ. Blog của em: prtrongtoi.blogspot.com

  34. avatar says

    lúc 21:48 20 tháng 10, 2014

    Chào bạn, mình nghĩ cái template đó đoạn Auto Readmore không được tốt cho lắm, hoặc là nó sung đột với cái gì đó mình không chắc, mình nghỉ chắc phải thay thủ công nó bằng một đoạn Auto Readmore khác là nó sẽ ổn.

  35. avatar says

    lúc 16:20 9 tháng 12, 2014

    Trang của mình như thế này http://apdesignvn.blogspot.com/
    Các ảnh ở mỗi bài viết đều đc tự động resize và bị mất hình. Mình đã làm như hướng dẫn của bạn mà vẫn bị. Bạn còn cách làm nào khác không?

  36. avatar says

    lúc 18:31 9 tháng 12, 2014

    Mất hình ý là sao vậy bạn, mình thấy mọi thứ vẫn ok mà.

  37. avatar says

    lúc 16:50 9 tháng 1, 2015

    Chào bạn!
    Sau khi xem qua bài viết và những dòng bình luận mình thật sự rất khâm phục bạn.
    Mình có blog này http://thuviencuaban.blogspot.com và mình muốn hiển thị bìa sách ở dạng hình chữ nhật nhưng làm hoài không biết phải sửa chỗ nào. Mong bạn chỉ giúp! Cám ơn bạn rất nhiều!

  38. avatar says

    lúc 13:57 11 tháng 1, 2015

    Bạn tìm thử trong template:
    /* Responsive */
    và chèn đoạn này xuống dưới nhé
    @media screen and (max-width:1920px){
    .post img {height:500px;}}
    @media screen and (max-width:1680px){
    .post img {height:470px;}}
    @media screen and (max-width:1440px){
    .post img {height:410px;}}
    @media screen and (max-width:1366px){
    .post img {height:380px}}
    @media screen and (max-width:1280px){
    .post img {height:360px}}
    @media screen and (max-width:1024px){
    .post img {height:280px}
    @media screen and (max-width:800px){
    .post img {width:50%;height:480px}
    @media screen and (max-width:640px){
    .post img {height:250px}}
    @media screen and (max-width:600px){
    .post img {height:360px;}
    }

  39. avatar says

    lúc 23:24 5 tháng 4, 2015

    @Lâm Kiều ơi cho mình hỏi là muốn giữ nguyên ảnh thumnail mà không cắt thì phải làm như thế nào? mình đang sử dụng file js này nè (https://fileitviet360.googlecode.com/svn/trunk/json.js) nhưng mình không hiểu về js

  40. avatar says

    lúc 23:31 5 tháng 4, 2015

    Mình tạo widget theo hướng dẫn của trang (http://www.vuvanphong.com/2014/07/widget-label-bai-viet-theo-nhan-blogspot.html) nhưng thấy admin trang ây không giải thích gì

  41. avatar says

    lúc 21:14 6 tháng 4, 2015

    Bình thường json nó cung cấp cho chúng ta link ảnh mặc định với kích thước 72px. Như vậy muốn ảnh trở lại định dạng mà nguyên bản của ảnh, có lẽ bạn sẽ cần sửa lại đoạn js sẵn ở link trên chuyển s72-c lại thành s1600.

    Cụ thể là bạn tìm
    + thumburl +
    và thay bằng
    + thumburl.replace(/s72-c/g,"s1600") +
    bạn nhớ nó sẽ làm chậm tương đối thời gian xử lý của js một tẹo nhé. Hi vọng là đúng câu trả lời mà bạn đang tìm kiếm.

  42. avatar says

    lúc 22:06 29 tháng 5, 2015

    Site của em không hiểu sao khi đăng bài ảnh to nhỏ lộn xà ngầu. Ví dụ: ảnh thứ 1, 2, 4 thì kích thước to max là 800, nhưng ảnh thứ 3, 5, 7 thì kích thước chuẩn của blogger mặc dù tất cả các ảnh em đều cùng 1 kích thước ví dụ như: 980, 1080 chẳng hạn. Khi em viết bài và upload ảnh nếu tốc độ internet tải nhanh tự dưng ảnh quay về mặc định của blogger là 320 đó anh. Một số bài em viết khi dùng mạng internet tải chậm thì blogger load không nổi khiến bài đăng viết bài cùng 1 kích thước chuẩn giới hạn max là 800px.
    Đây là site của em, anh vào hỗ trợ giúp em:
    Hình Đẹp 3S

  43. avatar says

    lúc 22:07 29 tháng 5, 2015

    Cảm ơn anh rất nhiều, mong anh giúp đỡ cho câu hỏi của em. Thân ái.! Chúc site anh luôn phát triển.:D

  44. avatar says

    lúc 23:07 15 tháng 9, 2015

    Hi Bạn, mình cũng bị tình trạng resize nên hình đại diện bị chuyển thành hình nhỏ định dạng rất thấp Bạn có thể hướng dẫn giúp mìh được không?


    //';
    if(post_title!="") return image_tag; else return "";
    }
    //]]>

  45. avatar says

    lúc 07:43 7 tháng 10, 2015

    Chào bạn, trang saotop.com của mình ấy, có cái ảnh thumbnail to đầu trang của trang chú ấy, nó cố độ phân giải ảnh sao mà xấu vậy. Nếu mình muốn chỉnh cho nó về độ phân giải trung thực của nó thì làm thế nào hả bạn?

  46. avatar says

    lúc 19:47 7 tháng 10, 2015

    Mình thấy chất lượng ảnh như vậy là ok rồi bạn. Thực chất tác gải template đã cắt chính xác kích thước size của từng ảnh lấy ra trang chủ. Như vầy vừa load nhanh hình ảnh cũng đúng với chất lượng của nó.

  47. avatar says

    lúc 23:13 7 tháng 10, 2015

    Cảm ơn bạn, cái mà bạn thấy có next top đó còn đẹp đấy chứ. Còn cái ảnh trước đó, có cái bài hoa hậu đó xấu lắm. Ảnh rất là mờ. Mặc dù ảnh gốc nó cũng đẹp. Dù sao cũng cảm ơn bạn!

  48. avatar says

    lúc 23:31 7 tháng 10, 2015

    Mình còn một vấn đề muốn hỏi bạn nữa là mục comment của mình ở siddebar bên phải không hiển thị như minh họa của nó. Vậy phải điều chỉnh sao hả bạn!

  49. avatar says

    lúc 11:16 8 tháng 10, 2015

    Chào bạn, cái comment mình hỏi bạn đó thì mình làm được rồi. Còn điều mình thắc mắc là mục bài đăng mới của mình đó, tự dưng nó nhảy số lượng từ 6 còn 3. Không biết là chỉnh cho nó nhu thế nào nữa. Vì mình cũng chỉnh trong setting rồi mà không được.

  50. avatar says

    lúc 12:31 8 tháng 10, 2015

    Mình vẫn thấy 6 bài bình thường mà ta :D

  51. avatar says

    lúc 19:11 9 tháng 10, 2015

    bạn thử chèn readmore vào bài viết xem sao, không thì vào cài đặt nguồn cấp dữ liệu chuyển đầy đủ thành ngắn xem sao

  52. avatar says

    lúc 10:07 16 tháng 11, 2015

    Chào bạn, Mình đăng ảnh từ App trên Di động lên web, nhưng khi xem trên web thì ảnh không được crop mà bị méo nhì. Còn đăng ảnh từ máy PC thì vẫn tự Crop.

    Bạn có cách nào hỗ trợ mình đăng ảnh từ Mobile lên mà vẫn crop ảnh được không

    Cảm ơn bạn

  53. avatar says

    lúc 12:31 17 tháng 12, 2015

    bạn hỗ trợ dùm mình trang chủ nhé <a href="http://www.toilaquantri.com/"

  54. avatar says

    lúc 23:32 22 tháng 12, 2015

    Hi bạn, mình bị lỗi trang web này mà đi kiếm sư phụ chỉ mà chưa có ra. Hình thì thì biến dạng, còn slider thì không hiện thị. Mình cần làm gì để bạn giúp chỉ mình với ?

    http://phuong-english.blogspot.com/2015/11/dior.html

    Cám ơn bạn

  55. avatar says

    lúc 17:25 19 tháng 5, 2016

    Có cách nào giảm anh thumb cho WP không bạn? xin lỗi vì mình hỏi không liên quan chủ đề ạ.

    Website mình đây: http://timvere.vn/

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.