Thay đổi dòng chữ " Hiển thị các bài đăng có nhãn ..." trên blogger.com

Thay đổi dòng chữ " Hiển thị các bài đăng có nhãn ..." trên blogger.com

Chào các bạn, hôm nay mình xin giới thiệu với các bạn một thủ thuật khi viết blog trên trang Blogger, đó là việc thay đổi dòng chữ "Hiển thị các bài đăng có nhãn ..... Hiển thị tất cả bài đăng" xuất hiện khi chọn một nhãn bất kỳ trên trang blog của mình. Ví dụ:

Dòng chữ hiển thị khi chọn nhãn Hoạt hình tự làm trên trang blog

Các bạn có thể chọn cách thay đổi dòng chữ này thành dòng chữ khác, hoặc xóa bỏ hẳn dòng chữ này. Theo suy nghĩ của mình, các bạn không nên xóa bỏ hẳn dòng chữ này. Vì khi đó người xem sẽ gặp khó khăn khi xác định những bài viết đang xem viết về chủ đề gì.

Hướng dẫn xóa bỏ dòng chữ

Bước 1: Các bạn  đăng nhập vào Blogger => Chủ đề => Chỉnh sửa HTML
Bước 2: Các bạn bấm tổ hợp phím Ctrl + F, nhập dòng chữ 'top' name để tìm kiếm, sau đó ghi chú dòng tìm được bằng cách thêm <!-- dòng tìm được --> vào trước và sau dòng tìm được như dưới:

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

Bước 3: Chọn Lưu chủ đề để lưu lại những thay đổi, và quay lại trang blog của mình để xem kết quả.

Hướng dẫn thay đổi dòng chữ

Bước 1: Các bạn  đăng nhập vào Blogger => Chủ đề => Chỉnh sửa HTML

Bước 2: Các bạn bấm tổ hợp phím Ctrl + F, nhập dòng chữ <data:navMessage/>, sau đó ghi chú dòng đầu tiên tìm được bằng cách thêm <!-- dòng tìm được --> vào trước và sau dòng tìm được.
Bước 3: Ngay chỗ tìm được ta thêm đoạn code bên dưới:

<b:if cond='data:blog.searchLabel'>

 Bạn đang xem chuyên mục: <font color='##7401df'><data:blog.searchLabel/></font>

<b:else/>

 <data:navMessage/>

</b:if>

Bước 4: Ta tiếp tục tìm kiếm ]]></b:skin> và thêm vào bên trên dòng này đoạn code sau:

.status-msg-body {    /* Thay đổi font chữ, màu chữ, kiểu chữ  */
font-family: 'Roboto Condensed', sans-serif;
color: #008aff; /* các bạn có thể thay mã màu này bằng mã màu các bạn thích*/
text-transform: uppercase;
font-weight: bold;
}
.status-msg-bg {    /* Thay đổi màu nền thanh trạng thái */
background-color: #fff; /* các bạn có thể thay mã màu này bằng mã màu các bạn thích*/
}
.status-msg-border {   /* Thay đổi đường viền */
border: none; /* Xóa đường viền */
}

Bước 5: Chọn Lưu chủ đề để lưu lại những thay đổi, và quay lại trang blog của mình để xem kết quả.

Với ví dụ ban đầu, sau khi ta thực hiện việc thay đổi như trên, nó sẽ có dạng như sau:

Dòng chữ sau khi hoàn thành việc thay đổi

Cám ơn các bạn đã xem và chúc các bạn thành công!!