Trang chủ \4.3.11

Thêm chú thích cho nhận xét của tác giả bài viết

Việc thêm ghi chú cho nhận xét của tác giả bài viết là chủ đề không mới nhưng thực sự những thủ thuật về nó ở một số blog, thậm chí blog nổi tiếng về templates và thủ thuật Blogger như chethstudios cũng mắc phải sai lầm khi dùng điều kiện so sánh <b:if cond='data:comment.author == data:post.author'>

data:comment.author là tên người nhận xét, data:post.author là tên người viết bài, nếu giống nhau sẽ thực hiện lệnh bên trong. Như vậy với tên người nhận xét chỉ cần giống tên người viết bài thì lệnh so sánh trên được thực hiện.

Blogger XML code cung cấp cho chúng ta một số "định nghĩa" về người quản trị blog trong đó data:comment.adminClass là dữ liệu về nhận xét của người quản trị blog, data:post.adminClass là dữ liệu về người viết bài. Như vậy thay vì dùng lệnh điều kiện so sánh tên chúng ta sẽ so sánh dữ liệu của người nhận xét và người viết bài xem có giống nhau không. Ở đây mình sẽ hướng dẫn các bạn thêm ghi chú Tác giả bài viết sau tên nhận xét của người viết bài.

1. Tìm trong template của bạn đoạn mã <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>. Đoạn mã trên là hiển thị tên người nhận xét có liên kết tới địa chỉ profile của người đó (cần chú ý là không phải template nào đoạn mã trên cũng y nguyên như vậy, nó có thể thêm vài thuộc tính trong cặp thẻ <a></a> này). Thêm đoạn mã dưới đây vào sau nó:
<b:if cond='data:comment.adminClass == data:post.adminClass'>
 <span class='author-comment'>Tác giả bài viết</span>
</b:if>

2. Thêm một class author-comment quy định màu cho chữ Tác giả bài viết. Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn:
.author-comment{background:#FF0000;padding:0 3px;color:#FFF}

Chữ Tác giả bài viết với màu trắng trên nền đỏ được hiển thị bên cạnh tên nhận xét của người viết bài, đây là cách đơn giản nhất để tạo sự khác biệt cho nhận xét của tác giả bài viết với các nhận xét còn lại. Có thể tùy biến thêm với lệnh <b:if cond='data:comment.adminClass == data:post.adminClass'> cho những thành phần khác của nhận xét như màu nền để tạo thêm sự khác biệt.

3. Nếu blog có nhiều người viết bài có lẽ bạn muốn thêm ghi chú Admin sau tên nhận xét của mình nữa. Để làm được điều này chúng ta sẽ dùng lệnh so sánh địa chỉ profile của người nhận xét. Thêm đoạn mã dưới đây vào trước đoạn mã ở bước 1:
<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>
 <b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/14698901063970946455&quot;'>
  <span class='author-comment'>Admin</span>
 </b:if>
</b:if>

Nhớ thay http://www.blogger.com/profile/14698901063970946455 thành địa chỉ profile của bạn.

<b:if cond='data:comment.adminClass == data:post.adminClass'> là lệnh rất hay, các bạn có thể thử nghiệm cho dù tên 2 người quản trị có giống nhau thì lệnh so sánh trên vẫn hoạt động đúng.

Tùy biến thêm lệnh so sánh profile ở phần 3 để thêm ghi chú Author sau tên nhận xét của những người cộng tác viết bài trên blog của bạn.

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

42

Nhận xét
1

Phải thừa nhận rằng kiến thức của mình về các lệnh trong XML của Blogspot vẫn thua Duy Pham =))

Dùng adminClass để tô đậm cái comment-body của admin được ko hèo ?

Reply Xóa nhận xét
2

@NoctĐược chứ bác, thay đổi bất cứ thành phần CSS nào của comment người viết bài, tùy biến vị trí đặt lệnh so sánh đó thôi.

Reply Xóa nhận xét
3

Đúng là khi đã hiểu được bản chất của vấn đề thì việc tùy chỉnh trở nên rất đơn giản.

Trước đây khi chưa dùng Disqus thì mình cũng loay hoay nhiều với form comment của Blogspot.

Reply Xóa nhận xét
Nặc danh 5/3/11 00:16
4

Bài viết rất hay.

Chỉ thắc mắc một chút nhờ Duy giúp là khi có nhiều người viết bài mà người mạo danh dùng nhận xét kiểu anonyms với tên trùng với mình URL nhập vào URL profile của mình :(

Thanks, bác rành blogger data tag quá, xách gáo qua học một tháng mới được.

Reply Xóa nhận xét
5

@Tien Nguyen Đúng rồi bác, em có test đến trường hợp này nhưng không hiểu sao hôm qua không cần so sánh data:comment.adminClass == data:post.adminClass vẫn được :-?. Em cập nhật thêm lại rồi, so sánh URL profile trong lệnh điều kiện data:comment.adminClass == data:post.adminClass là toàn diện.

Reply Xóa nhận xét
6

Cuối cùng cũng vét hết các trường hợp rồi :)

Reply Xóa nhận xét
Nặc danh 5/3/11 18:08
7

Thanks bác, để em thử của em liền. :)

Reply Xóa nhận xét
8

Duy ơi, cho Duy này xin cái temp đê =P~

Reply Xóa nhận xét
9

ohhh, giờ mới để í là mình cũng đặt compare sai thành post.author, tks ae

Reply Xóa nhận xét
10

@NAD Tạm thời em chưa share template bác ạ, với lại nó vẫn đang trong quá trình thử nghiệm thôi, code cho widget blog khá loằng ngoằng :D

Reply Xóa nhận xét
11

:))Footer với Logo Dp very "bro" :P

Reply Xóa nhận xét
12

hay lắm thak bạn nhiều :))

Reply Xóa nhận xét
13

@Bang chủ hội môi giới Forex Bác đang dùng template của Anup, đây là template mà trước đây Duy Pham Blog customize và sử dụng gần nửa năm. Mặc dù viết lại layout và code toàn bộ XML code nhưng em vẫn ghi nguồn từ Hacktutors để ghi nhận công sức convert của Anup. Đáng tiếc là template này nhiều Blogspoter VN "quên" ghi nguồn [-(.

Reply Xóa nhận xét
14

:-SS oh, mình là Blogger nghiệp dư. Thiết kế Blog chỉ là thú tiêu khiển,xả stress thui nên chả biết chỉnh sửa ji nhiều. Để em thêm nickname designer " H" ở footer cho fair-play b-(

Reply Xóa nhận xét
15

@ Duy Pham Thân mến !
Em đã tìm trong Templates của (Vatinam +) nhưng chẳng thấy đoạn mã như Bác nói, muốn thử mà không được!

Reply Xóa nhận xét
16

@Joseph : Phạm Minh Tâm Bác đưa blog không có bài viết và phần commnet thì em chịu không xem được code của comment sao hướng dẫn bác được.

Reply Xóa nhận xét
17

Công nhận Duy rành về blogspot quá. Hiện thì mình ít config templates blog mình nữa vì giao diện đã ổn định. Mình dùng simplex.
Riêng về comments, mình không thích dùng native mà dùng disqus. Thích hơn vì xây dựng cộng đồng dễ hơn :) nếu mình có dùng thêm những site khác.
Dù sao cám ơn Duy hén. Sau này nếu có đổi temp nhứt định sẽ tham khảo bog Duy

Reply Xóa nhận xét
18

@Minh Triết Dùng hệ thống commnet của Blogger ít được người dùng WP ghé thăm, thậm chí người dùng Blogger sử dụng disqus... cũng ngại commnet nữa :( Blog của bác đầy đủ các chức năng và một giao diện sáng sủa, hợp lý. Bài viết rất chuyên nghiệp trong bố cục, một điều ít gặp ở các blog nền tảng Blogger =D>. Đơn giản nhưng đầy đủ, không có chi tiết thừa, em rất thích phong cách đó ở bác.

Reply Xóa nhận xét
19

ae thêm cái follower wg để mọi ng tiện theo dõi cái nhỉ

Reply Xóa nhận xét
20

thanks bạn nhiều nha! =D>

Reply Xóa nhận xét
21

@Pika Rock Em không thích cái đó lắm, làm chậm blog :)

Reply Xóa nhận xét
22

Bên tớ có cái follower nè, Duy Pham đọ speed không :D
Cái này chưa kinh khủng bằng Facebook Fanpage đâu @-)

Reply Xóa nhận xét
23

@Noct Code XML loằng ngoằng khiến blog em chậm chạp mất rồi :D Đang làm cái temp lấy cảm hứng từ themeforest, đây là một trong những website mà em kết giao diện ngay từ lần đầu nhìn :D

Reply Xóa nhận xét
24

Sao temp lại đổi, lại đẹp vãi vậy nhỉ, thèm trôm quá :((

Mình lấy temp cho blog mình nha :-"

Reply Xóa nhận xét
25

Ồ, Duy lại mới "thay...người iu" nữa à ! Thanh niên bây giờ chán quá, đúng là "thay người yêu như thay áo" mà !:)

Reply Xóa nhận xét
26

@NAD Em sẽ chia sẻ Nexis với màu đỏ, nó phù hợp với blog bác hơn. Vì hơi phức tạp nên em cần viết hepl cho nó chi tiết một chút.

@iTechPlus Em làm temp thường theo ngẫu hứng, cái Nexis kia không phù hợp với phong cách của em lắm, em thích sự đơn giản :D

Reply Xóa nhận xét
27

@Duy Pham : bác share cái Nexis đi ! nhìn ngon lắm ! :D

Reply Xóa nhận xét
28

muốn thay bằng hình ảnh thì sao hả anh. Hướng dẫn luôn cho em mặc dù em đã làm được. Em muốn theo cách khác anh có thể hd.
Cám ơn anh trước

Reply Xóa nhận xét
29

@hl4vVới ảnh size nhỏ bạn có thể để bên cạnh tên, thay <span class='author-comment'>Tác giả bài viết</span> bằng <img src="url-ảnh"/>

Reply Xóa nhận xét
31

Mình muốn đổi màu tên Tác Giả khác với các nhận xét khác thì làm thế nào?

Reply Xóa nhận xét
32

@blue79blog Bạn thay <data:comment.author/> đầu tiên thành

<b:if cond='data:comment.adminClass == data:post.adminClass'>
<span style="color:#F00"><data:comment.author/></span>
<b:else/>
<data:comment.author/>
</b:if>


Trong đó #F00 là mã màu của tên tác giả.

Reply Xóa nhận xét
33

hi, hay quá=D> cảm ơn DuyPham
có thế mà mình nghĩ cũng không ra

Reply Xóa nhận xét
34

Sao mình làm đúng y như các bước rồi mà vẫn không thấy hiện thêm chú thích gì cả!!

Reply Xóa nhận xét
35

Blog mình không dùng comment nên ko quan tâm vụ này lắm :)

Reply Xóa nhận xét
36

@Duy PhamDear DP, mình có dùng comment phân cấp của ban Tien Nguyen, giờ muốn highlight nhận xét của chủ blog như bạn Noct thì đặt lệnh thế nào nhỉ? Mong bạn giúp đỡ. :-?

Reply Xóa nhận xét
37

@Dạ Lai HươngBác tìm <p><data:comment.body/></p>
rồi thay thành
<b:if cond='data:comment.adminClass == data:post.adminClass'>
<p class='author-comment'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>


phần css thì thêm
.author-comment{margin:5px 0;padding:10px;background:#FF0}

Reply Xóa nhận xét
38

@Duy PhamDear DP, tình hình là nhà mình vừa mất căn bản css vừa ham hố. Cho nên muốn có comment phân cấp, lại muốn có tem admin và đồng thời highlight khung luôn. Thành ra nó ra kết quả thế này đây. :(
Bạn có lời khuyên nào cho nhà mình không? Một câu hỏi nữa là nếu mình muốn hiểu những thủ thuật của blog bạn một cách căn bản nhất thì nên bắt đầu từ đâu? Mong bạn cho mình vài ý kiến để giúp mình xóa mù CSS.

Template kiểu magazine mới của bạn Tien Nguyen chẳng hiểu sao flag hiển thị ngày tháng lại loạn xa cả lên, chẳng chính xác gì cả, ở trang tĩnh thì nút reply không hoạt động, template không chạy được trên IE6. Bạn TN đã ghi nhận những lỗi này. Còn DP bạn có nhận định gì không, nếu có thì cho mình chút thông tin nha. Tại vì mình rất kết cái template này.

Reply Xóa nhận xét
39

@Dạ Lai HươngỒ hóa ra là ẩn link ảnh thì sẽ không hiển thị ở trang chính. Mình chép lại cái đường dẫn để bạn xem để thuận lợi cho việc chỉ dạy mình.
http://www.mediafire.com/download.php?igyvhft49ua74ip

Reply Xóa nhận xét
40

@Dạ Lai HươngKhi có thời gian em sẽ xem temp đó, dạo này cũng ít thời gian quá.

Đúng là những thủ thuật em viết có thể là hơi khó khăn với đa số vì em chỉ chú trọng đến tính năng, một số chỉ hướng cách dùng còn tùy biến hơn em dành cho mỗi người. Trong đó CSS là 1 cái cơ bản nhất nếu mọi người muốn thiết kế theo những style riêng, em k chú trọng đến tạo những style mà chỉ đưa những thuộc tính cơ bản nhất và quan tâm đến việc hiển thị trên những trình duyệt khác nhau.

Với IE6 thì nó đòi hỏi người thiết kế phải hiểu CSS sâu sắc nhất, k giống như Firefox, Chrome... khá dễ tính, có thể khai báo k cần đầy đủ vẫn có thể hiển thị tốt, IE đòi hỏi khá nghiêm cẩn, ngoài ra thì nó cũng khá dở hơi với 1 vài thuộc tính về float, padding, margin... cho nên để hiển thị tốt trên IE6 thì k những kiến thức CSS phải tốt mà nó đòi hỏi kinh nghiệm nữa.

IE6 khiến em khá tốn thời gian cho nó, hiện nay thì blog của em vẫn hiển thị tốt trên IE6 trừ 2 thứ IE k hỗ trợ là ảnh png và hover cho thẻ khác a. Tuy nhiên thì đã có hơn 1 lần em sẽ k hỗ trợ cho IE6 nữa.

Reply Xóa nhận xét
41

@Dạ Lai HươngKhung comments đó sẽ hay hơn là highlight hết phần comments của admin, tuy nhiên làm vậy thì code cũng dài hơn, dài hơn bao nhiêu thì xem temp mới biết được. Với lại comment phân cấp của temp này bác cần hỏi TN vì bác ấy mới biết đã dùng js thay đổi thành phần nào, tên class đặt ra sao.

Reply Xóa nhận xét
42

@Duy PhamCảm ơn những chia sẻ của DP nhé. Mình đọc thấy thật sự rất hữu ích.

Reply Xóa nhận xét

Đăng nhận xét

Cancel