Hướng dẫn thay đổi kích thước hình ảnh trên trang chủ Blogspot

tháng 8 09, 2016

POSTED ON 09/08/2016

n

hư các bạn cũng thấy, Với Template mặc định của Blogger hay là 1 số Template được chia sẻ trên mạng thì hình ảnh Thumbnail của bài viết 1 là sẽ có kích thước ảnh là 72×72 hoặc sẽ là full kích thước của ảnh luôn. Như vậy thì khá là bất tiện và thân thiện với trang web của chúng ta.

Chúng ta đang loay hoay trong việc chỉnh sửa CSS để làm sao cho nó thật đẹp thật vừa vặn? Nhưng tiếc là nếu thumbnail có kích thước là 72×72 thì chẳng thể nào làm nó to lên được vì nếu cho giãn ra thì sẽ bị nhòe hình. Còn nếu là ảnh full thì load trang sẽ rất nặng về hình ảnh.

Cách thay đổi kích thước hình ảnh trên trang chủ Blogspot

Vì vậy mình sẽ quyết định chia sẻ cho các bạn 1 đoạn js nhỏ để cắt hình ảnh theo ý thích của mình. Bạn hãy copy và chèn đoạn Javascript sau đây vào trên thẻ </head> và cảm nhận nhé!

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var w = 340;
var h = 150;
$('.secondary-post').find('img').each(function (n, image) {
var image = $(image);
image.attr({
src: image.attr('src').replace(/s\B\d{2,4}/, 'w' + w + '-h' + h + '-c')
});
image.attr('width', w);
image.attr('height', h);
});
});
//]]>
</script>

Tiếp đến, bạn hãy thay .secondary-post thành class hoặc id bao quanh hình ảnh mà bạn muốn thay đổi kích thước. Nhớ thay đổi 340 và 150 thành con số phù hợp với Template của bạn nhé!

Tổng kết:

Như vậy là mình đã hướng dẫn các bạn cách thay đổi kích thước hình ảnh trên trang chủ cho Blogspot xong rồi. Cách này khá đơn giản phải không ạ? Có lẽ cái khó nhất trong thủ thuật Blogspot này là tìm ra ID/Class của ảnh thôi nhỉ 😀

Nếu bạn không biết cách tìm thì hãy để lại comment mình sẽ giúp nhé!

Lưu ý: Nếu như Template của bạn đã khai báo thư viện jQuery từ trước rồi thì bạn hãy bỏ đoạn này đi nhé!

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Chúc các bạn có một blog với tốc độ tải tốt nhất!

Mocgin.com

.