Modify Form comment : Bài 3 - Tạo bảng "Nội quy Comment" cho Form Comment

[FD's BlOg] - Hôm nay mình sẽ tiếp tục loạt bài Modify Form Comment. Bài hôm nay mình sẽ hướng dẫn tạo một bảng nội quy nho nhỏ cho form comment.

Như ta đã biết, có 1 cách để tạo một nội quy nho nhỏ cho form comment đó là vào trong phần Nhận xét (Đăng nhập blog ► Vào Cài đặt ► Vào phần nhận xét), ta sẽ thấy 1 khung sọan thảo nho nhỏ, đó là nơi ta có thể viết 1 vài nội quy vào đó.

hình minh họa

Tuy nhiên ở đây khung chỉ cho phép ta sử dụng các thẻ HTML cơ bản như <b> , <i> , <a> mà không được phép sử dụng bất kì thẻ HTML nào khác. Như thế trông bảng nội quy hơi đơn điệu.

Vì thế, hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật, đó là tạo nội quy vào ngay trong code THML của template. Với việc này bạn hòan tòan có thể sử dụng màu sắc hay hình ảnh cho bảng nội quy của mình.

Ở đây mình sẽ đưa ra một ví dụ mẫu cho các bạn xem. Với ví dụ này mình sẽ lại áp dụng kĩ thuật bo góc cho khung. Khác với các kĩ thuật bo góc mình đã giới thiệu, ở kĩ thuật này mình cũng áp dụng ảnh để bo góc, nhưng ảnh này không trùng với nền của bảng nội quy mà lại trùng với nền của blog.

Ở ví dụ này mình sẽ tạo 1 bảng nội quy có chiều rộng là 413px.

►Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML (chọn mở rộng tiện ích)
4. Chèn đọan code CSS vào ngay trên dòng ]]></b:skin>

#fd-comment {
}
#fd-comment dl {
width: 413px;
margin: 0 0 20px 20px;
padding: 0;
background: #c99 ;
}

#fd-comment dt {
width: 397px;
margin: 0 0 10px 0;
padding: 8px;
font-size: 130%;
color: #fff;
border-bottom: 1px solid #fff;
background: #933 url(http://farm4.static.flickr.com/3595/3499761869_db520cc444_o.gif) no-repeat top left;
}

#fd-comment dd { width: 393px;
margin: 0 0 0 10px;
padding: 0 10px 10px 10px;
color: #666;
font-family: Verdana, sans-serif;
font-size: 90%;
background: url(http://www.alistapart.com/d/mountaintop/arrow.gif) no-repeat 0 3px;
}

► Đọc code:
- width: 413px; : đây chính là độ rộng của bảng nội quy, và cũng bằng độ rộng của ảnh bo 2 góc trên (http://farm4.static.flickr.com/3595/3499761869_db520cc444_o.gif) , nếu bạn không thích bo góc thì có thể bỏ ảnh này đi.
- width: 397px; : là độ rộng của tiêu đề nội quy (397px = 413px - 8px x2), với 8px là căn lề (padding: 8px)
- width: 393px; : là độ rộng của khung sọan thảo nội quy (393px= 413px -20px), với 20px là căn lề trái. (margin: 0 0 20px 20px;)

- background: #c99 ; : màu nền của bảng nội quy
- background: #933; : màu nền của tiêu đề nội quy

- Ở ví dụ này mình chỉ bo 2 góc trên, nếu bạn nào muốn bo 2 góc dưới nữa thì down gói hình ảnh bên dưới về, rồi fix lại kích thước cho phù hợp với khung nội quy.

Ảnh tạo bo 2 góc trên : box_top.gif
http://www.alistapart.com/d/mountaintop/box_top.gif

Ảnh tạo bo 2 góc dưới : box_bottom.gif
http://www.alistapart.com/d/mountaintop/box_bottom.gif

- Nếu muốn bo thêm 2 góc bên dưới thì chỉ việc thêm đọan code màu đỏ vào đọan code CSS trên (như bên dưới):

#fd-comment dl {
width: 413px;
margin: 0 0 20px 20px;
padding: 0;
background: #c99 url(link ảnh box_bottom.gif(đã fix) của bạn ) no-repeat bottom left ;
}

5. Tiếp tục tìm đến đọan code sau:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>

</div>
</b:includable>

Chú ý: đọan code màu đỏ là tiêu để của bảng nội quy, sau này ta sẽ xóa nó đi, và tạo một tựa đề cho bảng nội quy theo ý mình.

6. Bây giờ ta sẽ thêm các đọan code màu đỏ & xanh vào đọan code trên như hình bên dưới:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>

<div id='fd-comment'>
<dl>
<dt>
<h4 id='comment-post-message'>FD's BlOg - Nội Quy Comment </h4>
</dt>
<b> 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:</b>
<dd>Điều 1.</dd>
<dd>Điều 2.</dd>
<dd>Điều 3.</dd>

</dl>
</div>

<div style='padding: 0 0 0 20px;'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>

</div>
</div>
</b:includable>

Chú ý:
- Sửa lại code màu xanh theo ý mình.
- Code màu cam là để căn trái cho form sọan thảo, lý do khi ta đặt bảng nội quy vào, có thể bảng nội quy và form sọan thảo bị lệch, nên dòng code màu cam dùng để căn lề lại cho khung sọan thảo.

7. Save template lại là xong.

Xem hình minh họa:

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