Thay đổi kích thước ảnh thumbnail của blogspot

   Thông thường, blogpost sẽ lấy hình ảnh đầu tiên của bài viết do bạn up lên ra để làm thumbnail và nó sẽ có kích thước là một hình vuông. Trong các template mặc định, phần Popular Post hay bất cứ widget nào sẽ có thumbnail là 72x72. Blogspot không cho phép bạn thay đổi điều này, dù bạn có tìm trong phần Edit HTML.

Tuy nhiên, đôi khi chúng ta muốn tạo một template riêng, với kích thước thumbnail riêng thì thật không đơn giản. Vì vậy mình sẽ chỉ cho các bạn cách thay đổi kích thước ảnh thumbnail để các bạn có thể tùy biến template của chính mình.

Trước tiên, bạn cần nắm rõ cách lưu trữ ảnh của picasa. Để các bạn dễ hình dung mình xin lấy 1 ví dụ.
Đây là link ảnh full: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_dToV3lc2OgqX0hKfZgcUE4FGFFAWF3FlvEjDIxITyf9Ow8TJ3poH9PZgEuwUd45otHQPHRE_WdLExjbOPf5Or1Fy7OgXXYQdPmSbGAVgMo9TSWrV3aCJCOu0jQmFaUX3jp9y_9j15iV/s1600/blogger-blogspot-google.jpg
Đây là một thumbnail vuông kích thước 500px: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_dToV3lc2OgqX0hKfZgcUE4FGFFAWF3FlvEjDIxITyf9Ow8TJ3poH9PZgEuwUd45otHQPHRE_WdLExjbOPf5Or1Fy7OgXXYQdPmSbGAVgMo9TSWrV3aCJCOu0jQmFaUX3jp9y_9j15iV/s500-c/blogger-blogspot-google.jpg
Còn đây là ảnh thumbnail mặc định: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_dToV3lc2OgqX0hKfZgcUE4FGFFAWF3FlvEjDIxITyf9Ow8TJ3poH9PZgEuwUd45otHQPHRE_WdLExjbOPf5Or1Fy7OgXXYQdPmSbGAVgMo9TSWrV3aCJCOu0jQmFaUX3jp9y_9j15iV/s72-c/blogger-blogspot-google.jpg

Chú ý rằng những link nào có “-c” thì hình ảnh đó sẽ có kích thước vuông. Nếu bạn muốn kích thước thường thì chỉ cần bỏ “-c” ra khỏi link. Con số 1600 bạn có thể thay bằng bất cứ số nào cũng đều ra được hình ảnh với chiều ngang mong muốn.

Thay đổi kích thước thumbnail:

Bạn tìm đến thẻ </body> 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 đó: Blog1 là id của wiget mà bạn muốn thay đổi thumbnail và 150 là kích thước mà bạn muốn cho ảnh thumbnail.

Các bạn sẽ thấy code này tạo ra 1 ảnh vuông kích thước 150px thay cho 72px truyền thống.

Để có 1 ảnh thumbnai tỉ lệ với ảnh gốc thì bạn sửa thành: 

<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);
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
}
}
changeThumbSize("Blog1",150);                 
</script>

Ở đây sẽ có 1 ảnh width: 150px còn chiều cao theo tỉ lệ ảnh gốc.
Còn trong trường hợp chiều cao hơi thừa hay hơi thiếu với mong muốn của bạn thì chỉ cần code CSS: #id img{height: ...px;} lúc này ảnh của bạn sẽ bị thay đổi không đúng với tỉ lệ ban đầu nhưng mắt thường khó nhận ra, vì vậy bạn khỏi lo.

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