Modify Form comment : Bài 1 -Tạo một form comment mang phong cách riêng cho 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.