Loại bỏ khoảng trống khi ẩn ngày đăng bài viết blog

date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, sau khi dùng thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.

ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {

font-weight:bold;

text-transform:uppercase;

letter-spacing:.1em;

font-size:90%;

color:#F00;

display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

 

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:

1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>

<span style='padding: 0 40px 0 0; text-align: right;'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</span>

</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, nên dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--

<b:if cond='data:post.dateHeader'>

<span style='padding: 0 40px 0 0; text-align: right;'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</span>

</b:if>

-->

6. Save template.