Tùy biến dòng chữ "Hiển thị các bài đăng cũ hơn" khi xem các bài đăng cùng nhãn

Trên Blog chúng ta có thể tạo nhiều nhãn (Label), trong mỗi nhãn này đều có các bài cùng chuyên mục, cùng chủ đề...Khi bạn click chọn một nhãn bất kỳ nào đó, các bạn sẽ thấy dòng chữ: "Hiển thị các bài đăng mới nhất có nhãn...Hiển thị các bài đăng cũ hơn" ở đầu trang Blog.

Việc xuất hiện dòng chữ này làm cho Blog mất đi phần nào đó sự thẩm mỹ vốn có của nó. Nếu muốn dòng chữ này mất đi khi xem một nhãn bất kỳ, bạn có thể áp dụng thủ thuật nhỏ dưới đây.

Bài viết này mình sẽ hướng dẫn các bạn 2 cách đơn giản sau để tùy biến nó:

• Xóa nó khỏi blog của bạn
• Tùy chỉnh thông điệp có trên đó.

Bây giờ chúng ta sẽ lần lượt tìm hiểu vấn đề này. 

» Cách 1: Xóa hẳn dòng thông báo "Hiển thị bài đăng cũ hơn" khi xem nhãn.

1.1- Đăng nhập vào Blog > Chọn Mẫu > Chỉnh sửa HTML > đánh dấu chọn Mở rộng mẫu tiện ích.
1.2- Tới đây bạn có thể làm theo một trong 2 cách nhỏ bên dưới:
1.2.1. Tìm đoạn code tương tự bên dưới (Mẹo: bấm Ctrl + F để tìm):

<b:include data='top' name ='status-messager'/> 

Bạn thêm vào 2 đầu ký tự sau

<!-- và -->

Khi đó bạn được như sau

<!-- <b:include data='top' name ='status-messager'/> --> 

- Chọn lưu mẫu và ra xem kết quả
1.2.1. Cách khác: Các bạn cũng có thể xóa Code bên dưới đi:
<b:include data='top' name ='status-messager'/>
- Nhưng như thế sau này nếu Blog có chức năng mới bạn xẽ khó cập nhật tốt nhất nên thêm 2 dấu <!-- và -->như bên trên

» Cách 2: Tùy chỉnh thông điệp trên thông báo "Hiển thị bài đăng cũ hơn" khi xem theo nhãn theo ý thích của bạn.

Với cách này thì dòng chữ Hiển thị các bài đăng cũ hơn khi xem các bài viết cùng nhãn sẽ được thay thế bằng một thông điệp của bạn. Với nội dung, màu sắc, màu nền,.... được tùy biến theo ý của bạn. Bạn có thể xem ảnh minh họa sau khi namkna thay đổi ở bên dưới:

Bạn cũng có thể xem trực tiếp trên blog demo của mình theo link bên dưới:

» XEM DEMO


2.1. Đăng nhập vào blog -> Chọn Mẫu -> chọn Chỉnh sửa HTML và tìm đoạn code bên dưới:

<data:navMessage/>

Thủ thuật này chỉ áp dụng với đoạn code đầu tiên bạn tìm thấy (nó thường có dạng như bên dưới có thể khác đôi chút tùy vào mẫu và người thiết kế nó, nhưng đa phần là như vầy):

<div class='status-msg-body'>
  <data:navMessage/>
</div>

Ngay lập tức thay thế nó thành đoạn mã bên dưới:

<b:if cond='data:blog.searchLabel'>
 Hiện tại bạn đang xem chuyên mục: <font color='#810541'><data:blog.searchLabel/></font>
<b:else/>
 <data:navMessage/>
</b:if>

2.2. Giờ đến phần định cấu hình cho nó. Bạn hãy thêm tiếp đoạn mã như bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn nha.

.status-msg-body {
font-family: 'Roboto Condensed', sans-serif;
color: #8D38C9;
text-transform: uppercase;
font-weight: bold;
}
.status-msg-bg {
background-color: #46C7C7;
}
.status-msg-border {
border: 1px #e9d8d9 solid;
}

» Tùy chỉnh:

• color: #8D38C9; là màu chữ "Hiện tại bạn đang xem chuyên mục". Nếu chưa biết mã màu bạn có thể tham khảo bài viết sau.
• #46C7C7 là màu nền của thanh trạng thái
• border: 1px #e9d8d9 solid; Lần lượt là độ rộng đường viên 1px, màu đường viền #e9d8d9 và kiểu đường viền solid
• #810541 là màu của tên nhãn, bạn có thể đổi thành màu khác nếu thích.

Lưu mẫu lại và kiểm tra kết quả nha.
Chúc thành công!