Đánh số thứ tự cho nhận xét

number commentsThread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Số thứ tự đượ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.


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.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}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:
var items_copy=[];
(function() {

Bước 3: 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;

Bước 4: 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>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

51

Nhận xét
1

chà... thủ thuật này hay đó chứ... cậu giỏi thật đấy :)

Reply
2

+1 cho Duy :)

Reply
6

Chẹp... Bác Duy bây giờ lại được cả đàn ông yêu nữa kìa... Nhất bác rồi :))=))

Reply
4

bác phạm có code sổ dọc chứa link liên kết không bác phạm

Reply
5

Dạo này bác Duy toàn ra mấy bài về Comment nhỉ

Reply
7

Dạo này cao thủ java ra nhiều bài nhỉ.

Reply
8

Sao mình ko hiện đc nhỉ :(

Reply
9

Theo HHV vị trí đặt số đếm có vấn đề... Duy thử nghĩ xem còn chỗ nào hay hơn không?

Reply
10

Bác nói rõ hơn dc k? Là khó nhìn, k hợp lý?

Reply
11

Ý thích cá nhân, anh không thích vị trí đó. Chỉ là vấn đề trang trí thôi, cho nên còn tùy vào cách nhìn; bởi vậy anh mới nói là xem còn vị trí nào hay hơn thôi :)

Reply
12

Em lại thấy mỗi vị trí đó là hợp lý, thêm thông tin ngay dưới avatar. Bác chỉnh tọa độ tới vị trí cảm thấy hợp lý xem.

Reply
14

Bỏ thông số border-radius và đưa ra 1 trong 4 góc của ava... cũng là một lựa chọn...

Reply
16

Em tưởng code có vấn đề, may quá k phải vậy :) Còn style thì thực sự từ trước đến giờ k phải là trọng tâm trong những bài viết của em, nó chỉ hỗ trợ cho code thôi. Em tập trung cho tính năng và style là phần còn lại cho mọi người phát triển thêm, nó là đơn giản.

13

Các bài mới của bác Duy đều hỗ trợ tốt cho threaded comment hay thật .

Reply
17

Thread comment mới ra nên có nhiều vấn đề để viết mà, trong đó có 1 lỗi về tính năng (cũng k quan trọng lắm) k biết ai đã phát hiện ra chưa :D

Reply
18

Thời gian trong thread comments không chính xác...

Reply
19

Vậy hả bác, nhưng nó k phải là tính năng, ý em cái khác kia :D

Reply
22

Bật mí luôn cho mình đỡ mất công đoán mò :D

Reply
15

Hi Duy, Duy có thể làm 1 cái arrow giống như style của Noct không... mình thấy cái đó rất hay đó... chờ đón style mới của Duy nha... :)

Reply
21

Muốn add link tới comment đó thì sao hả Duy, mình thấy cái đó hay mà. Nghĩa là click vào số thứ tự comment sẽ tới link comment đó

Reply
23

Vì có ở time rồi nên mình k thêm nó nữa. Nếu muốn bạn thay <span class="comments-number">'+(i+1)+'</span>
thành
<a class="comments-number" href="'+items_copy[i].permalink+'" rel="nofollow">'+(i+1)+'</a>
hoặc
<a class="comments-number" href="#c'+items_copy[i].id+'" rel="nofollow">'+(i+1)+'</a>

nên chọn cái thứ 2 để khi nhấn permalink k reset lại page

Reply
24

Cảm ơn Duy, mình làm được rồi, nhưng số thứ tự khi có link thì nó thay màu đi nhìn rất khó số, khắc phục sao Duy :D

Reply
25

thêm important cho color của .comments-number

.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!important;text-align:center}
.comments-number:hover{background:#17b38f}

Reply
26

Yeah, Thanks Duy, cơ mà giờ mình thích không có link nữa rồi :D . Tiện ích hay đó, à rảnh ghé blog mình chỉ giáo với nhé

Reply
27

Blog bạn thuộc thể loại công nghệ thì nên giảm những thứ "lằng nhằng" k cần thiết đi, nhất là cái banner, nó sẽ là đẹp với những blog về truyện tranh, teen chứ cntt thì tạo cảm giác k chuyên nghiệp, thiếu tin tưởng. Tùy đối tượng độc giả mà trang trí.

31

:D, bỏ hôm lâu rồi, có gì không hợp với nội dung phát triển, D tư vấn nhé :D

28

Hi Duy, tớ thấy trang này có cách đánh số nhận xét cũng hay này, Duy nghiên cứu thử xem
http://emiliocoboscmc.blogspot.com/2012/01/pestanas-animadas-con-widgets-dentro-o.html

Reply
29

kiểu của Jack giới thiệu hợp với threaded comment luôn đây

Reply
30

Trang đó k sử dụng thread comment của Blogger mà là custom từ comment cũ, như kiểu thread comment bác TN vậy. Điểm nổi bật nhất là k cần load data:post.commentJso để xác định parentId mà bằng cách nào đó việc xác định này được làm trên server (mình mới xem qua nên chưa chắc chắn, nếu quả thực làm được như vậy thì thật tuyệt). Cảm ơn bạn share link này, đã rất lâu rồi mới có 1 blog nước ngoài mà mình cảm thấy muốn tìm hiểu code của họ :D.

Reply
32

Một thủ thuật hay . Thank nhé

Reply
33

Hi Duy !
Tớ đã tìm cách đánh số cho comment mới rồi nè...
rất good đó
chỉ cần add style này vào là dc
.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(http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/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;
}

Reply
34

Tham khảo link này nha cậu... rồi hướng dẫn lại cho các bạn nha :)

http://helplogger.blogspot.com/2012/06/numbered-comments-on-threaded-comments.html

Reply
35

Hình như cũng có 1 bạn nào đó nói về cách đánh số như vậy rồi, khác biệt là cách trên sử dụng css nên gọn nhẹ, nhược điểm chỉ là k hiển thị trên phiên bản trình duyệt cũ.

Reply
36

Hồi trước cũng chính là mình chứ ai... hồi giờ tìm kiếm nó giờ kiếm được rồi nên share lại đó... cậu phát triển thêm nha. toàn css nên nó nhẹ hẳn ra ...

Reply
37

Mình không viết lại chủ đề đã có, nhất là blog đó lại sử dụng tips từ những blog khác.

Reply
38

Đọc mấy bài trước thấy bác Duy nói có cái comment phân cấp gì đó mà sao chưa thấy share nhỉ!!hi
Hay là chưa hoàn thành vậy bác?

Reply
39

Hiện tại mình dừng share những tips liên quan đến XML code rồi.

Reply
40

ủa. Sao lại vậy bác?hix
Vậy là mất thêm 1 người cung cấp thủ thuật Blogspot rồi! :(

Reply
41

Bài viết này của bạn thật sự rất thú vị, mình cũng có một thủ thuật tương tự nhưng nó đánh số thứ tự theo kiểu hơi khác 1 chút.
Ví dụ như comment thứ nhất sẽ được đánh số 1, reply của nó sẽ đánh số 1A , 1B,...
Mong các bạn góp ý về thủ thuật này hộ mình với

Reply
42

Bác Duy ơi cho em hỏi cái....
www.giasutheoyeucau.com của em bị lỗi ở phân trang
Khi xem theo nhãn ( khi xem tất cả các bài thì không vấn đề ) thì ở trang thứ 2 trở đi nó chỉ post có 6 bài ( trong khi nó lấy đi 9 bài )
Đồng thời nó hiển thị thiếu bài.:(
Bác có thể chỉ cho em sửa chỗ nào ko... cám ơn bác:(
( sorry bác trước vì em ăn trộm 2 cái mũi tên của bác mang về dùng^^ )

Reply
43

Bạn backup bài viết nên có nhiều bài giống nhau (trùng thời gian đăng bài) dẫn tới hiện tượng trên. Xóa những bài giống nhau hoặc chỉnh lại thời gian đăng bài khác nhau đi.

p/s: mũi tên đó không thuộc về bản quyền 1 ai cả :D

Reply
44

oh để em xem nào:) thank bác

Reply
45

Tiện bác cho em hỏi luôn là khi em ấn vào "xem thêm" ở mỗi nhãn... nó lại hiển thị "max-results=20" và không phân trang...
trong tem của em có một đoạn code mã hóa thuộc phần label_readmore....
em muốn nó phân trang như bình thường thì làm như nào ạ...
Ngại quá...( ko biết có bị gọi là lạm dụng bác Duy ko nữa )^^

Reply
46

hi...được rùi bác ạ....cám ơn bác ! Tính em khi đang dùng cái gì mà ko đúng ý mình thì bực lắm....

Reply
47

Ngày xưa cái này quan trọng với blogspot phết, giờ có reply nên không cần thiết mấy nữa!

Reply
48

Nhận xét này đã bị quản trị viên blog xóa.

Reply
49

bài viết rất hay
nhac dj up cho bác

Reply
50

Nhận xét này đã bị quản trị viên blog xóa.

Reply
51

Gracias por los aportes amigo, saludos desde HONDURAS. ñ.ñ

Thanks man

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.