Loading post navigation ...
 
 

Pro page

7
Nhận xét

Modify Form comment : Bài 1 -Tạo một form comment mang phong cách riêng cho tác giả

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Author Comments - Different Styles
[FD's BlOg] - Với thủ thuật này mỗi bài comment của tác giả (người post bài viết) sẽ mang một phong cách riêng, khác và nổi bật hơn so với các bài comment khác.




Hình minh họa:


Để thực hiện việc này, bạn có 2 bước:
- Bước 1: Chèn code để xuất hiện style riêng cho tác giả vào phần code HTML.
- Bước 2: Chèn code CSS của style đó (code CSS này các bạn có thể tùy chỉnh để tạo style cho chính bạn)

Sau đây là cách thực hiện:

►Bước 1:

1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML (chọn Mở rộng tiện ích)
4. Tìm đọan code sau: (hoặc tương tự)

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

6. Thêm đọan code màu đỏ vào đọan code trên như hình bên dưới :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>

<p>
<data:comment.body/>
</p>

</dd>

<b:else/>


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


7. Save template, như vậy đã xong, bây giờ sang bước 2

►Bước 2:
- Tiếp theo bước 1, sau khi save template, tiếp tục tìm đọan code sau (hoặc tương tự):

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}


- Sau đó thêm đọan code CSS như hình bên dưới (code này sẽ là code CSS của style comment của tác giả)

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:.25em 0 0;

}

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;

background:#C3FDB8;

}



- Trong đọan CSS này :

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}

Bạn có thể thêm các thuộc tính khác như :
- font-style: italic; -> tạo chữ nghiêng
- font-size:120%; -> kích thước chữ hiển thị
- font-family:courier; -> font kiểu chữ
- background: url("URL OF IMAGE"); -> ảnh nền cho bài comment của tác giả

Chúc các bạn thành công.


Enter your mail address:

7

Unknown

Chưa có thời gian dạo toàn Blog , nhưng phải nói giao diện Bắt mắt :)

Hy vọng chủ nhân blog sẽ đăng những bài "độc" ( như quảng cáo ) hoặc là những bài chưa từng được dịch từ nước ngoài ....

VD như bài này mình đã xem tới 4 blog thủ thuật ở Việt Nam đăng rồi !!!

Phan Dũng

thanks bạn đã góp ý :), đúng là có nhiều người nói giao diện của blog mình trông cũng không tệ, và mình cũng đang suy nghĩ về vấn đề này, nó làm blog mình chậm.

Đúng là bài này các blog khác sẽ có đăng, do cái này cũng là cơ bản. Mình cũng tham khảo mấy trang nước ngòai rồi dịch ra và hướng dẫn lại thôi.

Mình cũng tìm kiếm rất nhiều trang nước ngòai, khi nào có cái thủ thuật này hay là sẽ post lên thôi.

Khách (ẩn danh)

kim ngân giỏi quá nhỉ? biết rõ có 4 blog thủ thuật ở vn đăng rồi!!! :))

Khách (ẩn danh)

fd oi
vay lam sao cho comment cua khach ,nen co mau?

fandung

@hoang : bạn chỉ việc thêm code của lệnh background vào code CSS của phần comment là đc.

Như trong code trên, bạn ta thấy có đoạn code sau :

.comment-body p {
margin:0 0 .5em;
}

bạn thêm vào như thế này :

.comment-body p {
margin:0 0 .5em;
background:#eee;
}

với trị màu #eee là màu xám, bạn có thể thay đổi nó thành màu mà bạn thích

CÓ lẽ bạn là 1 người mới, cái này cũng là 1 phần rất cơ bản, sau này bạn có gì thắc mẵc cứ vào khu vực "Hỏi & Đáp" ở blog mình mà comment, sẽ có người giải đáp cho bạn.

iZDoer

sao trong blog của mình ko tìm dc dòng:

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

giaitrithethao1

Tốc độ cập nhật trang ibet888 nhanh tỷ lệ ăn cao là điểm để người chơi luôn chọn ibet888 đặc biệt là giao diện chuẩn mà mọi người chơi đều cảm thấy thỏa mãn



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home