Loading post navigation ...
 
 

Pro page

5
Nhận xét

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

| by Phan Dũng | views

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

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.



Enter your mail address:

5

Đỗ Huy Khôi

uhm,đã thử và thành công cảm ơn nhiều

Phan Dũng

cảm ơn bạn ghé thăm blog.

Minh sẽ tiếp tục post các thủ thuật khác về form comment, hy vọng bạn sẽ thích thú.

Thanks

Ngankvn ®

Phan Dũng có vẻ pro về CSS nhỉ :)

Mình có câu hỏi như vầy : Mình có áp dụng thủ thuật đánh số cho comments , khi tới comments thứ 201 trở đi thì blogger tự động cho nó sang trang thứ hai ( cái này là mặc định ko phải mình can thiệp vào ) Và khi sang trang thứ hai thì thứ tự của comments đc đánh số lại từ 1 Phan Dũng có cách nào để nó đếm tiếp từ 201 ko ???

fandung

@Ngankvn:Mình có biết thủ thuật này, nhưng mình chưa tìm hiểu nó, mình có thấy bên blog của bạn, nhưng mình phải coi code của nó mới trả lời được.

Nếu biết mình sẽ trả lời cho bạn :)

EragonPump

cảm ơn Fandung thành công rồi



☺ 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