Thay đổi tỷ lệ hình thu nhỏ của bài đăng trong Median UI Template?

Xin chào Mọi người, nhân dịp này, tôi sẽ chia sẻ Cách Thay đổi Tỷ lệ Hình thu nhỏ của Bài đăng trong Median UI Template. Median UI Template là mẫu Blogger tốt nhất từ ​​trước đến nay. Mọi người thích sử dụng mẫu này vì tải nhanh. Ngoài ra, nó hoàn toàn thân thiện với seo do đó mọi người thích sử dụng nó hơn.

Mẫu này thực sự được tạo ra bởi Mas Muhammad Maki của Nhóm thiết kế Jago. Cùng với việc tạo ra nhiều tính năng tuyệt vời, tôi quyết định nâng cấp trang blog để có giao diện hấp dẫn hơn.

Nhưng có một điều đằng sau tất cả những điều này mà tôi không thích chút nào, đó là việc cắt bớt các hình thu nhỏ của bài đăng. Hiện tại Mean UI sử dụng tỷ lệ hình thu nhỏ 18: 9 trong v1.5, trông không đẹp lắm. Vì vậy, nếu bạn muốn chuyển đổi kích thước này sang tỷ lệ youtube 16: 9 thì hãy đọc toàn bộ bài đăng.

Thay đổi tỷ lệ hình thu nhỏ của bài đăng trong Median UI Template?

Median UI Template có tỷ lệ hình thu nhỏ của bài đăng rất thấp, có vẻ như khá vô dụng. Bạn có thể thấy rõ rằng mẫu bạn đã sử dụng cho đến nay có tỷ lệ và chiều rộng hình thu nhỏ cao hơn. Do đó, hình ảnh được cắt theo kích thước tỷ lệ 18: 9 nhỏ hơn. Tuy nhiên, để giải quyết vấn đề này, bạn có thể thay đổi tỷ lệ hình thu nhỏ theo ý muốn bằng cách chỉnh sửa HTML và CSS.

Cách thay đổi tỷ lệ hình thu nhỏ của bài đăng trong Median UI Template: -

Bước 1 :- Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2 :- Trên Trang tổng quan Blogger, nhấp vào Chủ đề .

Bước 3 :- Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy Chỉnh' .

Bước 4 :- Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển hướng đến trang chỉnh sửa.

Bước 5 :- Sau đó sao chép mã Css đã cho và đặt nó ở trên ]]></b:skin>.

Mã này sẽ được tìm thấy dưới mã này /* Article Section */.

.postThumbnail > *{display:block;position:relative;padding-top:52.335%; transition:var(--transition-2); color:inherit}

Bước 5 :- Sau đó thay thế nó bằng mã Css đưa ra bên dưới.

.postThumbnail > *{display:block;position:relative;padding-top:55%; transition:var(--transition-2); color:inherit}

Bước 6 :- Sau đó tìm mã Html được cung cấp bên dưới.

Mã này sẽ được tìm thấy dưới mã này <b:defaultmarkups> <!--[ Blogger defaultmarkups ]--> <b:defaultmarkup type='Common'>.

<b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

Bước 7 :- Sau đó thay thế nó bằng mã Html được đưa ra bên dưới.

<b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

Bước 8 :- Sau đó, nhấp vào Lưu chủ đề.

Lưu ý quan trọng: -

1. Trước khi bắt đầu quá trình chỉnh sửa, đừng quên sao lưu mẫu HTML trước.

2. 55% trong phần mã, hãy thay thế nó bằng một tỷ lệ phần trăm phù hợp với kích thước của tỷ lệ mới.

3. Trong phần mã 16: 9, bạn có thể thay đổi nó thành tỷ lệ dài x rộng mà bạn muốn.

Note :- Bài viết này được cập nhật cho giao diện người dùng trung bình v1.5. Nhưng bạn có thể thử trên một phiên bản khác.

Kết luận :-

Trong bài đăng này, tôi đã nói với bạn Cách Thay đổi Tỷ lệ Hình thu nhỏ của Bài đăng trong Median UI Template. Nếu bạn có bất kỳ câu hỏi nào khác liên quan đến chỉnh sửa Mẫu giao diện người dùng trung bình thì bạn có thể cho biết bằng cách bình luận. Bạn thích bài viết này như thế nào, bạn có thể cho biết bằng cách bình luận.

Truy cập Bypass Google Account APK để tải file APK nhé