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

02:29
Số đếm cho Threaded Comments 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:
Số đếm cho Threaded Comments blogger
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/AVvXsEifQhKIux8VG9o2m1fYh3LwvHQgc_YnctNSOV5Spcz_uCPK3aUe-1olOyYjEyjKTOYDVj6w2VVTLiJL_tXMVhjXBvKE0wi04qLrinNWKoLwWdYRSNvfN8Mj9WWGQSzSTWVWqNNhyYnwsLFK/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:

Số đếm cho Threaded Comments blogger Số đếm cho Threaded Comments blogger
Theo: Namkna.blogspot.com

Share this

Related Posts

Previous
Next Post »

Biểu tượng mặt cười ( Copy & paste xuống phần Comment )
Hãy Luôn Comment Để Tạo Động Lực Cho Tác Giả

Emoticon