TRUCBLOG JOURNAL GÓC ĐỌC • GÓC VIẾT

Bài viết / Góc chia sẻ

Tạo số đếm cho threaded Comments

Đỗ Trực tháng 10 18, 2015 2 phút đọc 4 bình luận … Lượt xem

Bạn muốn biết xem có bao nhiêu bình luận trong bài viết của bạn, bạn muốn đánh số thứ tự để dễ quản lý bình luận của các độc giả ?
Để trả lời các câu hỏi đó. Hôm nay mình hướng dẫn các bạn cách đánh số cho Threaded Comments của blogspot với hiệu ứng xoay vòng bằng css.

Một số tính năng và hạn chế:

Số thứ tự sẽ được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau.
Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.

Trong bài viết này mình sẽ giới thiệu đến các bạn 2 cách để thêm số đếm vào khung Threaded Comments của blogspot. Nào bắt đầu thôi.

Cách 1: Đánh số thứ tự theo dạng 1,2,3

1- Dán đoạn code bên dưới vào trước thẻ ]] ></b:skin>

.comments-number { display:block; position:absolute; top:11px; left:-36px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background-color:#066; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); width:20px; height:20px; font-size:10px; line-height:2em; color:#fff; text-align:center; transition:0.6s; -o-transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -ms-transition:0.6s }
.comments .comment-thread.inline-thread .comments-number { background-color:#5D974C; position:absolute; top:11px; left:-36px; transition:0.6s; -o-transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -ms-transition:0.6s }
.comments-number:hover,.comments .comment-thread.inline-thread .comments-number:hover { background-color:#f78d1d; -moz-transform:scale(1.8) rotate(-360deg); -webkit-transform:scale(1.8) rotate(-360deg); -o-transform:scale(1.8) rotate(-360deg); -ms-transform:scale(1.8) rotate(-360deg); transform:scale(1.8) rotate(-360deg) }

2. Tìm đoạn mã var items = <data:post.commentJso/> trong template của bạn và thay bằng đoạn mã dưới đây
var items = <data:post.commentJso/>; items_copy=items;

3. Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.

<script type='text/javascript'> //<![CDATA[ for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b} //]]> </script>

Code by Duy pham Blog

4. Lưu mẫu lại!

Cách 2: Đánh số thứ tự theo dạng 1,1a,1b

1.Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left:10px; padding-top:3px; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZ_27KUUlSnIyiPiGTDOOwHNW4V0SXX1Or2vlwE_kUicB851tuK00xR_loJblnQDyGM-knvdnkY-uhwReizuCgPxtNaERnxFLmT5w-lrhzpf4PN2vKxlajxCURpe2OLIiZtPhAVHIrdEu/h120/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }

Nếu các bạn muốn loại bỏ bong bóng bình luận thì xóa hết các phần chữ màu đỏ đi .Nếu các bạn muốn thay thế bong bóng bình luận, thay thế mã của dòng chữ màu xanh là link ảnh biểu tượng của bạn.
2. Lưu mẫu lại.

Một số hình ảnh bong bóng bình luận

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

Đỗ Trực Tác giả / Admin

Chia sẻ kiến thức lập trình, phát triển web, công nghệ và các thủ thuật thực tế. Cảm ơn bạn đã ghé thăm Truc Blog.

Trang chủ Email Zalo WhatsApp

Thảo Luận & Nhận Xét (4)

Công cụ bình luận nâng cao:

Nội quy bình luận của blog

Hãy cùng giữ phần thảo luận thân thiện, hữu ích và an toàn cho mọi người.

Trao đổi lịch sự, tôn trọng người khác; góp ý vào nội dung, không công kích cá nhân.
Bình luận đúng chủ đề bài viết; tránh spam, quảng cáo lặp lại hoặc đường dẫn đáng ngờ.
Không đăng mật khẩu, số giấy tờ, thông tin liên hệ riêng tư hay dữ liệu nhạy cảm.
Khi chia sẻ mã nguồn, hãy dùng công cụ mã hóa code để giữ nguyên ký tự và dễ đọc.
Chỉ chia sẻ hình ảnh, video và tài liệu mà bạn có quyền sử dụng; không đăng nội dung vi phạm pháp luật.
Quản trị viên có thể ẩn hoặc xóa nội dung spam, xúc phạm, không an toàn hoặc không phù hợp.

Công cụ Mã hóa HTML & Chèn Code vào Bình luận

* Nhấn Chèn Ảnh/Video, dán liên kết công khai rồi sao chép URL vào bình luận. Sau khi bình luận được đăng, mẫu sẽ tự hiển thị ảnh trực tiếp, video MP4/WebM hoặc video YouTube nếu URL thuộc định dạng được hỗ trợ. Blogger không cho tải tệp trực tiếp lên bình luận.