Ghim nhận xét blogspot lên trên cùng

9.3.24 | 2 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Trong các ứng dụng tin nhắn, hay các bài viết ở forum thường có chức năng ghim nội dung bài viết, hình ảnh quan trọng nhằm tạo sự chú ý, nhắc nhở hoặc nhấn mạnh tới người khác. Và ở bài viết này mình sẽ hướng dẫn một thủ thuật nhỏ để áp dụng được việc này cho phần nhận xét của blogspot
    Xem Demo tại phần nhận xét ở bài viết này

    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 JS 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! 👌
    Bạn đang xem bài viết "Ghim nhận xét blogspot lên trên cùng" tại chuyên mục: Blogspot , CSS , Javascript

      2

      nhận xét
      Mới nhất ⇅

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link