Hướng dẫn thay đổi kích thước ảnh tiện ích popular posts mà không làm ảnh bị mờ

Hướng dẫn thay đổi kích thước ảnh tiện ích popular posts mà không làm ảnh bị mờ

Tiện ích bài đăng phổ biến hay chúng ta hay chúng ta quen gọi là Popular Posts là một trong những tiện ích quan trọng nhất mà mỗi blog đều áp dụng. Tiện ích này vẫn sử dụng ảnh kích thước vuông chuẩn 72px và trong các mẫu có rất nhiều style cho tiện ích này nhưng đa số vẫn sử dụng kích thước ảnh chuẩn, cũng có một số mẫu thay đổi kích thước ảnh có thể bằng css hoặc javascript  nhưng thay đổi theo cách này thường làm ảnh bị mờ hoặc cắt ảnh do đó nhìn ảnh sẽ không được đẹp.


Có một cách đơn giản hơn nhiều mà chúng ta không cần phải can thiệp bằng css hoặc javascript đó là chúng ta sẽ thay đổi kích thước và tỉ lệ trực tiếp trong tiện ích. Cách thực hiện như sau:

Bước 1: Đăng nhập vào Blog truy cập Chủ đề > Chỉnh sửa HTML
Bước 2: Trong mục Chuyển đến tiện ích nhấp chọn PopularPost1

Trong trường hợp blog sử dụng từ hai tiện ích Popular Post trở lên thì chỉnh sửa hết tất cả

Bước 3: Bấm chọn dấu ... mở rông widget ra, tiếp tục trong phần <b:includable id='main'>...</b:includable> các bạn cũng bấm chọn dấu ... mở rộng.


Tiếp tục tìm đến đoạn <div class='item-thumbnail'> bạn hãy để ý phần tôi đánh dấu tròn với 72 là kích thước ảnh và 1:1 là tỉ lệ chiều cao và chiều rộng. Như vậy bạn cần thay đổi kích thước và tỉ lệ mặc định.

Bước 4: Thay đổi kích thước và tỉ lệ với quy tắc sau


Lấy kích thước ảnh chuẩn ví dụ 120 và lấy tỉ lệ ảnh là 120:70 (rộng:cao) hoặc kích thước nào tùy bạn nhưng không được vượt quá kích thước ảnh chuẩn là 120.

Bước 5: Khi sửa xong bạn cần xóa css hoặc javascript (nếu có) đã cố định kích thước ảnh. Cuối cùng Lưu chủ đề.

Như vậy với 5 bước đơn giản chúng ta đã có thể thay đổi được kích thước ảnh của tiện ích bài đăng phổ biến không cần phải can thiệp vào css hoặc javascript mà không làm ảnh bị vỡ hoặc mờ. Hi vọng bài viết sẽ giúp ích bạn.
  1. [img]https://3.bp.blogspot.com/-FAzaC7alY3U/WRH49sDwjuI/AAAAAAAAGoE/HQOji6WQcvg910wfCp4RT2CVgy5rKyjawCLcB/s1600/101Helper.png[/img]

    Trả lờiXóa