Tạo số đếm cho threaded Comments

GroupMMO tháng 10 18, 2015

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ự cho các comment theo dạng 1,2,3,...n

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ự cho các comment theo dạng 1,1a,1b,2,2a,2b,3,...n 1

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/AVvXsEjoZufAP6muoIeLr8-qucK7k4u3jazLefx9P2lE3CT7CMI77w5vMoU1vxAor7ymrHT2Yxy3jo96XGbSlxBKZBT0PlZ2-J8jeDE_j92uc68UKr_YgCvRHz0mcdUl2AFy5b5cV2vE2526kNrH/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 chia sẻ cho các bạn: