Tạo số đếm cho Threaded Comments

Tạo số đếm cho Threaded Comments của blogger

Threaded Comments đã ra đời khá lâu tuy nhiên rất ít người viết tùy chỉnh cho thủ thuật này nhất là đánh số thứ tự. Hôm nay mình hướng dẫn các bạn các đánh số cho Threaded Comments của blogger.

Bài này mình sẽ giới thiệu 2 cách.

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

Ảnh minh họa:

Phát triển bởi Duypham
1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu(Expand Template Widgets)

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

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

5- Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:

var items_copy=[];
(function() {

6- Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây:

var items = <data:post.commentJso/>;
items_copy=items;

7- 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>

8- 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- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed):

4- 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/AVvXsEi_KcoWklYhZ8VDZeV1J2oaqg7tjeFwvw6fABQLoGs-Ts4UACbgO0AEuVAQN_NUgv7vnGZcP_rGN848VteBRoP_7zTPhkCzFs8UA9kb12khdUi6PQ8OtGFZuDDkABDdXF1kJ57Fkrxbgd_4/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;
 }

Tùy chỉnh:

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

Một số hình ảnh bong bóng bình luận chia sẻ cho mọi người: