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:
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".
- Một số thủ thuật nhỏ với ảnh tải lên ở Blogger và Picasa
- Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger
- Tăng chất lượng ảnh thumbnail của Youtube bằng jQuery 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 Template và AutoReadmore, 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".
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é..
lúc 19:41 21 tháng 5, 2014
Anh sử dụng js ở bài này nhé
Tăng chất lượng ảnh thumbnail của Youtube bằng jQuery cho Blogger http://www.kslzone.net/2014/02/tang-chat-luong-anh-thumbnail-lay-ra-tu.html
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)
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.
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!
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.
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?
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
lúc 16:02 9 tháng 6, 2014
http://www.danangplus.com/ domain đây em :D
lúc 17:14 9 tháng 6, 2014
Em thấy mấy bài có hình thì bình thường mà, còn cái thumbnail của youtube bị mờ thì anh xài thử thằng này nhé Em thấy mấy bài có hình thì bình thường mà, còn cái thumbnail của youtube bị mờ thì anh xài thử thằng này nhé http://www.kslzone.net/2014/02/tang-chat-luong-anh-thumbnail-lay-ra-tu.html
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
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
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.
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
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!
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;
}
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
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>
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...
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;}
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
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
lúc 03:34 19 tháng 9, 2014
Khi add đoạn này vào nó báo lỗi :D
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à =.=
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 ý).
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é.
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 "<"
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
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
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ệ ^^
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.
lúc 18:35 25 tháng 9, 2014
Bạn thử thấy Blog1 thành main-home thử nhé.
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é ^.^
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
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
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.
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?
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à.
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!
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;}
}
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
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ì
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.
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
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
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 "";
}
//]]>
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?
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ó.
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!
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!
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.
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
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
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
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/"
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
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/