Modify Form comment : Bài 2 - Tạo style cho bộ đếm số bài comment

Make a nice style for comment counter

[FD's BlOg] - Ở bài 1 mình có hướng dẫn cách tạo form riêng biệt cho tác giả. Bài 2 này mình sẽ hướng dẫn 1 thủ thuật đơn giản với CSS để tạo nên phong cách mới cho bộ đêm số bài comment.

Cơ bản của thủ thuật này là bạn tạo một background cho bộ đếm số bài comment. Và bạn có thể tùy chỉnh theo nhiều cách khác nhau để tạo nên phong cách riêng cho bạn. và cách tùy chỉnh mình sẽ hướng dẫn ngay bên dưới.

Đây là hình minh họa :

Bây giờ ta bắt đầu:
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) (save template của bạn lại trước khi thực hiện)
4. Tìm đọan code sau (hoặc tương tự)

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>

5. Sau đó thêm đọan code màu đỏ vào:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
Tổng cộng : <div style='padding : 35px 0 0 0; clear : both; list-style-type : none; background : url(link ảnh) no-repeat left; width : 73px; height : 65px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 24px; text-align: center;'>
<data:post.numComments/>
</div>
<data:commentLabelPlural/>
</b:if>
</h4>

6. Sau đây là hướng dẫn hiệu chỉnh:
- padding : 35px 0 0 0; : căn lề cho text. căn lề này được tùy chỉnh tùy theo khuôn mẫu của hình mà bạn muốn hiển thị. với các thứ tự lần lượt là : căn trên (top), căn phải(right), căn dưới(bottom), căn trái (left). Nên canh chỉnh nhiều lần để chữ được hiển thị tốt nhất.
- background : url(link ảnh) no-repeat left; : ảnh nền để tạo style cho bộ đếm, và lệnh left dùng để xác đinh vị trí hiển thị của ảnh.
- width : 73px; height : 65px; : đây chính là độ rộng của khung ảnh.
- font-family:Verdana, Arial, Helvetica, sans-serif; : font chứ sẽ hiển thị
- font-size: 24px; : kích thức font chữ. Nên điều chỉnh font cho hợp lý, tránh tình trạng khi số bài comment lên tới hàng 3 số, thì số comment sẽ bị lệch ra khỏi khung ảnh, khi đó nhìn rất không thẩm mỹ.
- text-align: center; : căn giữa cho phong chữ - cái này rất cần thiết, vì khi số bài comment tăng lên, chữ sẽ bị lệch khỏi khung ảnh (nếu ta dùng style chữ chồng lên ảnh), khi có căn giữa chữ tự động căn trong khung ảnh.

7. Sau khi đã hiệu chỉnh xong hết, ta lưu template lại.
8. Dưới đây là các hình mẫu , các bạn có thể tham khảo.
Style 1:


Style 2:


Style 3:


Style 4:


Style 5:


9. Lưu ý:
- khi sử dụng style 1, bạn nên xóa chữ Nhận xét (comment) đi thì nó trông đẹp hơn(do trong hình nền đã có chữ comment rồi). Muốn xóa nó rất đơn giản, chỉ cần xóa dòng code màu xanh đi là xong:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>

- Thứ 2 : các style mình giới thiệu đa phần là style chữ đè lên hình nền, nếu bạn muốn chữ hiển thị sang phải của hình nền thì chỉ cần sữa lệnh là padding : Apx 0 0 0; với A là chiều rộng của khung ảnh. Và hiệu chỉnh 1 số thuộc tính cho hợp lý là xong.
- Khi muốn cho ảnh nằm bên phải thì set thuộc tính background : url(link ảnh) no-repeat right; , lệnh padding : 0 0 0 Apx; , lệnh text-align: left;

Như vậy mình đã giới thiệu xong bài 2 của lọat bài Modify Form Comment. Hẹn gặp lại ở bài 3.

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