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(http://lh6.ggpht.com/-GDMurKK2tec/T5JCD6hoKoI/AAAAAAAABAc/COHOItBlFWk/author.png);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.
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ẻ

101

Nhận xét
1

Xé tem.
Roẹt roẹt roẹt.

Reply
92

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

Reply
2

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

Reply
3

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

Reply
4

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

Reply
5

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
10

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

Reply
6

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
7

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

Reply
8

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
11

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
9

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

Reply
12

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
13

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

Reply
14

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
15

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

Reply
16

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

Reply
17

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

Reply
Nặc danh 22/4/12 00:20
18

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

Reply
24

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
25

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
26

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
27

Trên đời này còn nhiều GATO mà, chấp những loại đó làm gì bạn. Cảm ơn bạn và cộng đồng blogger đã có nhiều đóng góp cho sự phát triển chung của blogger VN nhé

Reply
19

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

Reply
20

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

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

Reply
22

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
23

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

Reply
28

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
29

đẹ pđó anh .hi

Reply
30

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

Reply
31

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

Reply
32

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

Reply
34

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
35

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

Reply
36

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
41

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
43

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

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

Reply
37

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

Reply
38

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
39

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

Reply
40

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
42

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

Reply
44

good jobs.Many thanks DP

Reply
45

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
46

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
47

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
48

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
49

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
50

thanks for share

Reply
51

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
52

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
53

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

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

Reply
55

Thk u. Style rất hợp với blog mình. Tuy nhiên mình gặp trục trặc về show avatar. Rảnh thì chỉ mình cách khắc phục với.

http://www.conrongcodon.co.cc/2012/07/va-step-up-revolution-ost-2012.html?showComment=1342597757338#c910418114708292172

Reply
56

ok TKS DUY PHAM BLOG :D

Reply
57

Cảm ơn duypham nhé

Reply
58

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

Reply
59

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
60

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
61

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

Reply
62

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
Nặc danh 18/8/12 20:37
63

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

Reply
64

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

Reply
65

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

Reply
66

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
67

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

Reply
68

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
69

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
70

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
71

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
72

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
73

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
75

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
74

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
76

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
77

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
78

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

Reply
79

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
80

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
81

Tuyệt quá nhỉ hihi

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

Reply
82

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

Reply
83

hay, thank you :D

Reply
85

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

Reply
86

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

Reply
87

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

Reply
88

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

Reply
89

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

Reply
90

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

Reply
91

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
93

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
94

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
95

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
96

Có vài cách để khắc phục:

1. Bạn tạo thread comment mới.
2. Kiểm tra xem có bật tính năng sử dụng nhận xét của G+ hay không (khi bật tính năng nhận xét G+ thì nhận xét Blogger sẽ không hiển thị).
3. Kiểm tra code CSS của thread comment (search template từ khóa comments h2 (hoặc cũng có thể là comments h3, comments h4... và xem có lệnh display:none hoặc visibility:hidden hay không. Nếu có bạn hãy xóa nó đi.

Reply
97

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
98

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
99

sao của mình ko đc

Reply
100

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
101

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

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.