Đánh số thứ tự cho Nhận Xét có phân cấp của Blogspot bằng CSS

Bài viết hướng dẫn mọi người đánh số thứ tự cho nhận xét blogspot có phân cấp chỉ bằng CSS
Đánh số thứ tự cho Nhận Xét có phân cấp của Blogspot bằng CSS

Hướng dẫn

Xác định class của khung chứa phần Nhận xét

Phần khung chứa Nhận xét thường có dạng như sau <div class="comment-thread toplevel-thread"></div>
Như vậy ta xác định được class sẽ là comment-threadtoplevel-thread, và ta chọn 1 trong số các class của thẻ này để gắn hiển thị đánh số thứ tự cho các thẻ li trong đó

CSS

.comment-thread ol  {
    counter-reset: section 0;
}
.comment-thread ol li  {
    counter-increment: section;
}
.comment-thread ol li::before  {
    content: counters(section, ".") " ";
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 3px 5px;
    background: #f9f9f9;
    position: absolute;
    z-index: 999;
    margin-top: -9px;
    margin-left: 30px;
}
Vậy là xong, giờ các nhận xét tự động đánh số theo phân cấp dù bạn có đẻ bao nhiêu cấp cho Nhận Xét của bạn đi nữa.

Demo tại khung bình luận ở bài viết này.

2 تعليقات

✔ Bình luận có dấu, lịch sự và đúng chủ đề
❌ Không spam link, quảng cáo, từ ngữ phản cảm
❌ Không hỏi link tải, crack, nội dung vi phạm
⚠ Bình luận vi phạm sẽ bị xóa mà không báo trước

Thêm hình ảnh: [img] link hình ảnh [/img]
Thêm video youtube: [youtube] link video [/youtube]
Thêm code: [code] Đoạn code đã mã hóa [/code]

إرسال تعليق

✔ Bình luận có dấu, lịch sự và đúng chủ đề
❌ Không spam link, quảng cáo, từ ngữ phản cảm
❌ Không hỏi link tải, crack, nội dung vi phạm
⚠ Bình luận vi phạm sẽ bị xóa mà không báo trước

Thêm hình ảnh: [img] link hình ảnh [/img]
Thêm video youtube: [youtube] link video [/youtube]
Thêm code: [code] Đoạn code đã mã hóa [/code]

أحدث أقدم