Hướng Dẫn Ghim Nhận Xét Lên Trên Cho Blogger

Chào mọi người.

Ngồi ngó ngang trang website của bạn bè, mình thấy trang blogspotvn.net có một bài viết khá hay, về việc ghim nhận xét lên trên cùng để làm tiêu điểm hoặc tránh bị thất lạc nội dung.

Nên hôm nay mình chôm về để chia sẽ lại cho nhiều người chưa rỏ về điều này. :D

Về vấn đề ghim nhận xét này cũng giống như việc mọi người ghim bài viết ở facebook, nhưng lại có giao diện khá đẹp mắt và thích thú cho mọi người.

Như mọi người cũng đã biết, cách thức hoạt động ▲

Nói qua một chút về cách thức để đẩy một nhận xét lên trên cùng ta sẽ áp dụng cấu trúc như sau Ví dụ ta có đoạn HTML sau

<ol>
  <li>dòng số 1</li>
  <li>dòng số 2</li>
  <li>dòng số 3</li>
  <li>dòng số 4</li>
  <li>dòng số 5</li>
</ol>

Vậy làm sao để dòng số 5 đẩy lên trên cùng? Ta sẽ áp dụng đoạn CSS sau

ol {
  display: flex;
  flex-direction: column;
}

.pin-cmt {
  order: -1; /* Đặt order là -1 để đưa mục có class "pin-cmt" lên trên cùng */
}

Sau đó ta phải gắn cho thẻ li chứa nội dung dòng số 5 một class là "pin-cmt" như sau

<ol>
  <li>dòng số 1</li>
  <li>dòng số 2</li>
  <li>dòng số 3</li>
  <li>dòng số 4</li>
  <li class="pin-cmt">dòng số 5</li>
</ol>

Và bằng Javascript ta sẽ cho nhận biết rằng nhận xét muốn ghim sẽ nội dung là "dòng số 5" để gắn class "pin-cmt" vào cho nó

document.addEventListener("DOMContentLoaded", function() {
    var listItems = document.querySelectorAll("li");
    listItems.forEach(function(item) {
        if (item.textContent.trim() === "dòng số 5") {
            item.classList.add("pin-cmt");
        }
    });
});

Áp dụng thực tế ▲

Phía trên chỉ là một ví dụ đơn giản thôi, trên thực tế phần nhận xét của blogspot phức tạp hơn nhiều. Nhưng chỉ cần biết được cách thức hoạt động của nó chúng ta hoàn toàn có thể kiểm soát được

Và khi gắn được thêm class "pin-cmt" vào nhận xét rồi thì ta có thể dùng CSS để làm cho nó đặc biệt hơn so với những nhận xét khác ngoài việc nó làm ở trên cùng 😁

Như ở Demo về thủ thuật tại bài viết này, mình còn gắn thêm một điều kiện nữa là kiểm tra xem <li> có chứa một phần tử con có class là "comment-admin" không đồng thời trong nội dung có chứa từ "[pin]" hay không thì mới áp dụng thêm class "pin-cmt" cho <li> nhằm mục đích chỉ cho phép admin của blog mới có quyền ghim nhận xét

Anh em thử nhé, nếu có thắc mắc cùng để lại nhận xét để hoàn thiện hơn nhé, bye! 👌

Chúc mọi người thành công với thủ thuật trên.

DEMO TẠI BÀI VIẾT NÀY.

Theo BlogspotVN.Net