[Blogger] Tùy biến trang tìm kiếm label Blogspot

Sử dụng nền tảng blogger thì chắc chắn phải biết đến label (nhãn). Nhãn giúp ta phân loại, quản lý bài viết và xây dựng menu tìm kiếm theo từng chuyên đề theo cấu trúc

<Homepage_URL>/search/label/<Label_Name>[?&max-results=XXX]

Khi bạn dẫn người dùng tới trang tìm kiếm bài viết theo nhãn, blogger sẽ hiện 1 đoạn status message nhỏ với nội dung "Showing posts with label XXX" hoặc "Hiển thị bài đăng có nhãn XXX"

Hoặc nếu bạn dùng breadcrumbs thì trông có vẻ đẹp và chuyên nghiệp hơn. Còn nếu bạn muốn tùy biến ? Ví dụ

như này thì làm như nào, bài viết này sẽ giúp bạn.

Cách thực hiện đơn giản thôi vì blogger có cung cấp 1 thẻ if cho riêng trang tìm kiếm bài viết theo nhãn.

Bạn đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML. Tìm trong template thẻ div có id='content-wrapper' (hầu như template nào cũng có) nếu như template của bạn không có thì cần vào 1 trang search label cụ thể, dùng chế độ kiểm tra F12 để tìm id hoặc class thẻ div chứa nội dung chính của website

Dán vào ngay dưới thẻ div đó nội dung

<b:if cond='data:blog.searchLabel'>
<style type='text/css'>
.searchLabel{background:#fff;padding:20px 0;box-shadow:0 7px 20px -6px rgba(202,202,202,.7);width:100%;margin:0 auto;text-align:center}
.searchLabel h1{font-weight:500;font-size:24px;text-transform:uppercase;margin:0 0 15px}
.searchLabel span{font-size:19px;font-weight:400}
.searchLabel a{color:#333}
.searchLabel a:hover{color:#8e0e00;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-ms-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}
</style>
<div class='searchLabel'>
  <h1>Chuyên mục: <b><data:blog.searchLabel/></b></h1> 
  <span>Chia sẻ kiến thức, thủ thuật, các vấn đề liên quan đến nhãn <b><a expr:href='&quot;/search/label/&quot; + data:blog.searchLabel + &quot;?&amp;max-results=10&quot;'>#<data:blog.searchLabel/></a></b></span>
</div>
</b:if>

Bạn lưu ý phải để css trong thẻ if , không được "cho vào b:skin cho gọn", vì ta đang viết code riêng cho trang search label, nếu bỏ vào b:skin nó sẽ apply cho toàn bộ trang.

Trong trường hợp bạn muốn ẩn status message và breadcrumbs thì chèn thêm

.status-msg-wrap,
.breadcrumbs {
    display: none
}

vào đoạn code css trên. Nếu bạn dùng phân trang thì sửa giá trị max-results trùng với perPage trong code phân trang.

Lưu mẫu lại và vào 1 trang search label để kiểm tra thành quả

Như vậy chỉ với 1 đoạn code rất nhỏ nhưng rõ ràng đã tăng thêm tính chuyên nghiệp cho trang web rồi đúng không.

Chúc bạn thành công !