hung pro vn

Đá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.

Hướng dẫn bình luận

Mọi người để lại bình luận góp ý, nhận xét về những bài viết mà mình chia sẽ văn minh lịch sự hay kích động, Không spam, không chèn link quảng cáo, bán hàng, Không sử dụng từ ngữ thô tục, xúc phạm, kích động, Link chỉ được phép khi thực sự liên quan đến nội dung bài viết, Không mạo danh người khác hoặc sử dụng email giả, Bình luận vi phạm sẽ bị xóa không cần thông báo trước.
Mọi người lưu ý răng, nếu muốn chia sẽ code ở bình luần thì cần mã hóa code trước khi bỏ vào khung nhé. :)
⑴ Chèn ℂ𝕤𝕤 theo mẫu : [pre css] CSS [/pre]
⑵ Chèn ℍ𝕥𝕞𝕝 theo mẫu : [pre html] HTML [/pre]
⑶ Chèn 𝕁𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥 theo mẫu : [pre js] Javascript [/pre]

🖼️ Chèn 𝕀𝕞𝕒𝕘𝕖 theo mẫu : [img] Link hình ảnh [/img]
🎞️ Chèn Video 𝕐𝕠𝕦𝕥𝕦𝕓𝕖 theo mẫu : [youtube] Link Youtube [/youtube]

2 Nhận xét

Top