Style đẹp dành cho Thread Comment của Blogger

style thread commentĐây là một style dành cho Thread Comment mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giản, rõ rànghiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.


Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQKqacZEe3yDumjc4TGudhPPDbHQzjwJSL1tk2W8_U2UI4ipCou4UBuOfLiONo7B7eWB9P13kksSKkbpKCwbsNBOpgt8-xltkTIWbDA-DrE4_7mlkDuN3b1EXudwquwLsv2Vx13vDawQ/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

d80556 là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.

Hướng dẫn thủ thuật Blogger, Blogspot

103

Nhận xét
1

Chờ hàng của bác trên FB ^^!

Reply Xóa nhận xét
2

đẹp anh ạ, giống kiểu wp

Reply Xóa nhận xét
3

Rất hợp với cái temp metro ui của mình, xin phép add vào ngay :))

Reply Xóa nhận xét
4

Ngon, hợp với blog mình. Bác Duy có thể chèn thêm bộ đếm thứ tự comments vào đc ko :D

Reply Xóa nhận xét
9

Bộ đếm làm gì nữa bác, thừa bỏ xừ :D

Reply Xóa nhận xét
5

Lỡ áp dụng cái thread comment của bác Tien Nguyen rồi :D
Công nhận code của bác ấy tinh vi thật.

Reply Xóa nhận xét
6

Công bằng mà nói mình khoái cái thread comments mặc định của blogger hơn :)

Reply Xóa nhận xét
7

Thật ra mà nói thì cái comment thread mặc định của blogger nó chán vãi ra, ai mà ngờ được chính các kỹ sư của Blogger/Google lại viết ra cái đó.

Reply Xóa nhận xét
10

Cái của Blogger code nó dài khủng khiếp bác ạ, riêng cái comments.js cũng 392kb rồi, chắc liên quan đến tải feed nữa. Trong khi cái bác TN chỉ có hơn 2kb, tất nhiên chưa tính <data:post.commentJso>

Reply Xóa nhận xét
98

Lâu lắm ko thấy bác đăng bài

Reply Xóa nhận xét
99

Lâu rồi chẳng ngó đến blogspot nữa :D

Reply Xóa nhận xét
100

Vẫn mong thỉnh thoảng bác chia sẻ chút :D

Xóa nhận xét
8

Tùy quan điểm và cách nhìn thôi :-)

Reply Xóa nhận xét
11

He.. mình thì thấy cái nào cũng đẹp, nhưng quan trọng nhất là cái nào phù hợp với blog mình :D

Reply Xóa nhận xét
12

Của bác Duy cái nào cũng đơn giản nhưng mà đẹp! :D

Reply Xóa nhận xét
13

tuyệt vời, thích kiểu của bác Duy => Đơn giản mà đẹp. Đang xài code của bác Tiến, chắc phải chuyển lại thôi, hehee

Reply Xóa nhận xét
14

hì... cái giao diện này đẹp tuyệt... thanks pác nhá... :)

Reply Xóa nhận xét
15

Hì đẹp thiệt á. hì mà đổi màu khác sẽ đẹp hơn

Reply Xóa nhận xét
16

Đẹp, bắt mắt :D

Reply Xóa nhận xét
Nặc danh 22/4/12 00:20
17

toàn máy thằng nịn loz :)) tao co thay đẹp đéo zzzzzzzzzz

Reply Xóa nhận xét
23

Mình giật title như vậy thôi, tùy style mỗi người thấy đẹp hay xấu.

p/s: comment thứ 2 mình reply lại 1 comment nặc danh, lần sau vui lòng k noi tục.

Reply Xóa nhận xét
24

không hiểu sao cứ comment của nặc danh là toàn chửi xéo, chắc là kẻ thù giấu mặt của bác DP đây :))

Reply Xóa nhận xét
25

Tính em cứ nói thẳng nói thật, nói ra đó rồi quên luôn. K biết có đụng chạm đến bác nào k :). Nói là kẻ thù thì nghe nghiêm trọng quá :D

Reply Xóa nhận xét
18

cá là thèn code1k.com hoặc thèn jack

Reply Xóa nhận xét
19

ác... pác này nói oan cho mình rồi... mình không bao giờ làm những chuyện tào lao thế... tớ đang dùng style của DP mà...

Reply Xóa nhận xét
20

Mấy thằng đố kị với người ta đây mà, chấp làm gì!

Reply Xóa nhận xét
21

Nhìn đẹp thật nhưng mà cái này làm rèn áp dụng cho của bac Tiến thì tốt hi!!

Reply Xóa nhận xét
22

Thanks Duy nhiều, đẹp lắm :)

Reply Xóa nhận xét
26

Hehe. Chuẩn thế chứ lị. Em vừa áp dụng thành công. Cảm ơn bác Duy nhiều.

Reply Xóa nhận xét
27

đẹ pđó anh .hi

Reply Xóa nhận xét
28

Nhạc trên blog bạn "bay" quá, lâu rồi mới nghe nhạc sàn :D

Reply Xóa nhận xét
29

cảm ơm nhá .hehe
làm cho vui thôi á .

Reply Xóa nhận xét
30

Đã áp dụng cho blog Vnbooks của mình, thanks Duy!

Reply Xóa nhận xét
32

DuyPham có thể hướng dẫn mình chi tiết làm cái comment phân cấp giống trang demo dc k? Mình cám ơn!

Reply Xóa nhận xét
33

mình muốn ẩn đi "32 comments:" được ko bạn?

Reply Xóa nhận xét
34

Tìm đến <b:includable id='threaded_comments' var='post'> và xóa đoạn

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Reply Xóa nhận xét
39

Cảm ơn bạn! ý mình là ẩn đi trong trang tĩnh thôi, còn ở bài viết vẫn để hiển thị

Reply Xóa nhận xét
41

<b:if cond='data:blog.pageType != "static_page"'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
</b:if>

Reply Xóa nhận xét
81

Ah! đây rồi... cảm ơn bác nhiều nhiều....

Reply Xóa nhận xét
35

Nhận xét này đã bị tác giả xóa.

Reply
36

Style rất đẹp nhưng khi chưa có nhận xét thì nó lại lộ ra 1 khoảng trống nhìn bựa lắm ! Không biết bác có cách nào khắc phục không ?

Reply Xóa nhận xét
37

Cái "bựa" này tự bạn làm ra đó chứ :D
Bỏ height: 400px; ở #comments-block đi.

Reply Xóa nhận xét
38

Ok thanks bác :D
Em muốn thêm cái scroll khi có nhiều nhận xét thì làm thế nào hả bác ?
Như cái hình này đây [img]http://3.bp.blogspot.com/__gVvBdefOLM/Sg-kcKlZXfI/AAAAAAAAAnE/9owe-CjA-Vs/s400/2.gif[/img]

Reply Xóa nhận xét
40

Nhận xét này đã bị tác giả xóa.

Reply
42

good jobs.Many thanks DP

Reply Xóa nhận xét
43

duy giúp mình cái nhé...
mình chèn cái from comment này nhưng chèn xong nó hiển thị không được đẹp mắt cho lắm
-nó ko cách lề.
-phần ghi chú cm nó hiển thị quá xa (khoảng trắng quá lớn)
cái này là do template nhưng mong duy giúp đỡ
blog của mình là
binzon.blogspot.com

Reply Xóa nhận xét
44

Chắc dạo này duy bận
nếu rảnh giúp mình câu hỏi bên trên được ko trên được ko:(
,chắc nó chỉ liên quan đến magin hay padding gì đó thui nhưng mình ko biết chỉnh nó chỗ nào cả.
Thanks

Reply Xóa nhận xét
45

hi mình làm được rùi,
đúng là chỉ cần thay đổi magin với padding thui
Ko làm phiền duy nữa...chúc duy luôn vui vẻ và sớm có thêm bài cho anh em:D

Reply Xóa nhận xét
46

Mới đổi tem, mình chèn lại thì nó ko hiện. Không biết tại sao nhỉ? Giúp mình cái !

Reply Xóa nhận xét
47

Duy và mọi người cho mình hỏi, làm cách nào để kích hoạt chức năng Reply Comments của Blogspot vậy? Trang Blog mình thử dùng nhiều cách mà chỉ có thể reply các comment của khách ẩn danh, nếu các comment của những bạn dùng account Google hoặc trang khác thì không hiện nút reply :(

Reply Xóa nhận xét
49

Mình thử áp dụng nhưng không kích hoạt được nút reply...
http://xomnuoctrong.blogspot.com/2012/07/bai-moi.html

Đây là template. Duy Pham có dư thời gian thì xem qua và chỉ điểm cho mình nhé.
http://www.mediafire.com/view/?yfugreiau2fi009

Cám ơn bạn.

Reply Xóa nhận xét
50

Em cá là ngay khi chưa áp dụng style này thì temp đó cũng đã hỏng nút reply, bài viết này chỉ thay đổi style comment nên k có xung đột gì đến reply cả.

Reply Xóa nhận xét
51

Ừ chắc vậy, mình áp dụng comment ngay nên cũng không biết. Đành phải hỏi chuyên gia về js. ^__^. Cám ơn DP đã trả lời.
Thân,

Reply Xóa nhận xét
52

Awesome bro...really Aprreciate the job you done...thanks a lot

Reply Xóa nhận xét
53

ok TKS DUY PHAM BLOG :D

Reply Xóa nhận xét
54

Cảm ơn duypham nhé

Reply Xóa nhận xét
55

Hôm nay bác sửa temp à. Thấy cm admin khác khác :D

Reply Xóa nhận xét
56

Lâu nay có chỉnh sửa gì đâu, hình như hôm nay có sự thay đổi gì đó của Blogger đối với pid của tài khoản comment

Reply Xóa nhận xét
57

Lúc nãy do máy lag nên thấy khác. :D
Không biết có nâng cấp gì nữa k nhỉ!

Reply Xóa nhận xét
58

k phải là lag mà mình vừa phải sửa lại pid để cho hoạt động dúng.

Reply Xóa nhận xét
59

Cám ơn bạn rất nhiều đã cho mình dùng code này của bạn nhe...rất cám ơn và chúc bạn nhiều sức khỏe để cho ra nhiều cống hiến cho dân chơi blog nhe.:-)
À...mình xin hỏi là nếu mình muốn chiều ngang của khung ngắn lại thì mình sửa ở dòng nào?...Mình chờ reply của bạn nha.
Best regards.

Reply Xóa nhận xét
Nặc danh 18/8/12 20:37
60

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

Reply
61

Mình rất thích các tiện ích của DuyPham.

Reply Xóa nhận xét
62

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

Reply
63

Duy ơi duy có thể làm 1 khung comment style giống mp3.zing.vn được không? bỏ cả cái trả lời cho comment ngang cấp hết!

Reply Xóa nhận xét
64

cảm ơn bạn nhé. thật là đơn giản mà đẹp. like

Reply Xóa nhận xét
65

Bạn ơi, cho mình hỏi, muốn đổi màu chữ comment và trả lời comment thì làm sao? Nhờ bạn giúp dùm nhé.

Reply Xóa nhận xét
66

Mình đổi màu chữ được rồi bạn à, NK cám ơn bạn rất nhiều có những thủ thuật làm cho blog đẹp, mới lạ hơn. Chúc bạn cuối tuần vui nhé.

Reply Xóa nhận xét
67

Blogger có thể tùy biến được giao diện hay qua, như site google này www.muabancantho.net thì khó tùy biến được, chỉ thiết kế thôi, k tham chiếu vào giao diện code được.

Reply Xóa nhận xét
Nặc danh 27/12/12 21:59
68

Có thể nào làm cho nhận xét trên Blogspot hiện thị ngược lại khônng anh.
VD:Thay vì hiện thị;
NX số 1(đầu tiên)
NX số 2
...
NX số 'n'
Thì mình lại cho hiện thị;
NX số 'n'
...
NX số 3
NX số 2
NX số 1(đầu tiên)

Nếu như vậy thì cmt cuối cùng sẽ được hiện thị trên cùng,em nghĩ nếu được như thế thì người đọc sẽ tiện hơn nhiều anh ak

Reply Xóa nhận xét
69

Nếu là thread comment thì khó làm, còn comment cũ thì được. Nhưng mình thấy sắp xếp cũ -> mới thì tiện theo dõi hơn chứ, đọc mới rồi tới cũ rất khó theo dõi.

Reply Xóa nhận xét
70

Căm bản cái thread comment này nó ko phân trang đâu duy. Vớj bàj vjết trên 200 comment phảj bấm chữ tải thêm rất phiền hà. Mỗi lần chj taj thêm dc khoảng 20 cmt. Nếu khoảna 400 cmt thì ngồj bấm mỏj tay. Nên nếu thay đổj dc cmt mớj lên đầu cũng có lợj.

Reply Xóa nhận xét
72

Nó vẫn phân trang bình thường. Có điều nếu comment thứ 201 trở đi mà reply lại comment ở page 1 thì nếu thêm phân trang comment này lại hiển thị ở page 2. Vì vậy mà muốn hiển thị nó ở page 1 thì Blogger sử dụng feed để hiển thị comment này. Mỗi lần tải thêm là 50 comments.

Cũng làm được như kiểu fb là hiển thị 50 comments mới nhất chẳng hạn, rồi thêm button bấm hiển thị 50 comments cũ hơn dần. Code nó tốn time, mà làm xong chắc mình xin 1 chân vào Google :D

Reply Xóa nhận xét
Nặc danh 28/12/12 09:52
71

Cá nhân em thấy thích đọc mới->cũ hơn.Em đang dùng template Nexis của anh,và tất nhiên cũng dùng luôn hệ thống comment của temp đó.Anh có thể giúp em làm thủ thuật đọc ngược comment từ mới -> cũ cho temp Nexis đó được không anh?

Reply Xóa nhận xét
73

Bạn nên thay comment mới đi, từ giờ mình tập trung cho thread comment vì cái này nhiều người dùng.

Reply Xóa nhận xét
74

Bác Duy gjớj thjệu comment như của bác đi. Mình thấy cáj thread comment của blogger đc mỗi 2 cấp. Với lại nó có một nhược điểm là phảj đợj trang load xong mới bấm reply dc. E thấy của bác trang đang load vẫn bấm reply đuợc.

Reply Xóa nhận xét
75

Bổ xung thêm một lỗi của thread cmt google là ko reply đc khj dùng mobile.

Reply Xóa nhận xét
76

Thread comment Blogger nó render nên js tải cùng trang, của mình thì load xong comment là đến js repply. Vì khối lượng js của Blogger lớn nên dùng render việc hiển thị trang sẽ đỡ cảm giác bị chậm đi.

Reply Xóa nhận xét
77

Hôm trứớc càj cáj thread đó nhưng nó tảj chậm quá. Bìng thuờng 10s tăng lên gần 20śnên gỡ luôn :-)
Bác vjết Tut cảj tiến cho a e dc không.

Reply Xóa nhận xét
78

Tuyệt quá nhỉ hihi

http://didong.net/vo-lam-3.html

Reply Xóa nhận xét
Nặc danh 15/2/13 18:21
79

Thật là ấn tượng, quá chi tiết dễ hiểu. Cám ơn bạn nhiều ly le

Reply Xóa nhận xét
80

hay, thank you :D

Reply Xóa nhận xét
82

Cho mình hỏi có cách nào thay chữ "author" thành "admin" để phân biệt ko?

Reply Xóa nhận xét
83

Thay link ảnh là được bạn nhé

Reply Xóa nhận xét
84

mình không có link ảnh, aj cho mình được không?

Reply Xóa nhận xét
85

Cái này bạn tự thiết kế được mà...biết Photoshop cơ bản là làm được

Reply Xóa nhận xét
86

sao blog e nó bị lỗi ko hiển thị khung cmt a Duy ơi

Reply Xóa nhận xét
87

Bác DP xem dùm, mẫu comment này không áp dụng được trên blog của em

Reply Xóa nhận xét
88

Mình làm y như bạn rồi mà cái chỉ số page view nó ko hiển thị là do gì đó Duy ơi. Giúp mình nhé. tks

Reply Xóa nhận xét
90

Cho em hỏi ngu tí mà chẳng biết hỏi ai: cái http://www.ngonluanho.net/ của em khi post comment xong nó báo là đã xuất bản, nhưng lại chẳng thấy đâu cả. Khắc phục ra sao vậy bác :)

Reply Xóa nhận xét
91

Những bài viết cũ có bài nào hiện comment cũ k bác, nếu k có thì bác làm mất code của comment rồi

Reply Xóa nhận xét
92

Bài cũ có comment cũng không xuất hiện comment đã xuất bản luôn. Chắc chắn em xóa cái code nào liên quan tới nó roài . Mỗi tội là không biết nó là cái nào

Reply Xóa nhận xét
93

bạn cho mình hỏi là có cách nào resize cái avatar comment xuống s45 để cho nhẹ và load nhanh không ?

Reply Xóa nhận xét
94

Với hệ thống comment mới thì không can thiệp vào HTML được, nó vốn load size 512 mặc định từ đầu. Còn hệ thống comment cũ thì resize được.

Reply Xóa nhận xét
Nặc danh 5/4/15 02:03
95

sao của mình ko đc

Reply Xóa nhận xét
96

Anh ơi blog em không hiển thị ảnh avatar của người dùng khi nhận xét, có cách nào khác phục không ạ? Đây là blog của em

Reply Xóa nhận xét
97

Mình vừa test vẫn hiển thị được mà bạn

Reply Xóa nhận xét
101

Bác Duy giúp em với ạ, blog của e đang lỗi phần comment, giờ muốn về mặc định nhưng không biết phải sửa sao bác ạ :(
https://www.huydc.net

Reply Xóa nhận xét
102

Gửi mình temp để sửa lại nhé

Reply Xóa nhận xét
103

Dạ, em có gửi inbox qua FB bác rồi ạ. Cảm ơn bác nhiều!

Reply Xóa nhận xét

Đăng nhận xét

Cancel