- Như trong hình minh họa, mình sẽ hướng dẫn code theo cách hiển thị 2 màu tuần tự, ví dụ 2 màu #eee và #ccc.
☼ Các bước thực hiện:
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn Code CSS bên dưới vào trước dòng code ]]></b:skin>
.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}
4. Chèn tiếp đoạn code Javascript bên dưới vào trước thẻ đóng </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(2n+0)").addClass("style1");
$(".comment-body:nth-child(2n+1)").addClass("style2");
});
</script>
5. Save template.
☼ Hướng dẫn cách thêm các màu nền cho việc hiển thị tuần tự:
- Như các bạn đã thấy, ở trên mình hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ mình sẽ hướng dẫn thêm vào thành 3, 4 màu tuần tự, tùy theo ý thích của bạn.
- Trước hết về code CSS, muốn có bao nhiêu màu sẽ được lặp tuần tự thì bạn sẽ phải có bấy nhiêu class, ví dụ mình sẽ cho lặp 4 màu nền thì code sẽ như bên dưới:
.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}
.comment-body.style3 {
background:#bbb;
}
.comment-body.style4 {
background:#aaa;
}
- Tiếp theo là tới phần code javascript.
- Các bạn để ý đoạn code màu đỏ ở trên (2n+0, 2n+1) , đây là code xác định các comment để hiển thị màu nền. Nếu bạn muốn lặp nó với 4 màu thì ta sẽ có dãy sau : 4n+0, 4n+1, 4n+2, 4n+3 và 4 đoạn code javascript tương ứng như bên dưới :
$(".comment-body:nth-child(4n+0)").addClass("style1");
$(".comment-body:nth-child(4n+1)").addClass("style2");
$(".comment-body:nth-child(4n+2)").addClass("style3");
$(".comment-body:nth-child(4n+3)").addClass("style4");
Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class, để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề...
Chúc các bạn thành công.
tem
A Dũng nhiều chiêu độc ghê :D
ôi dào ơi ! khen anh dung thì khác nào khen đường quốc lộ lắm ô tô khen ngân hàng lắm tiền :D
vậy thay lời khen clic 2 ads ủng hộ anh.:D
Á á...
Tuyệt wá FD ơi :X
á á...
Bữa này Thuấn chơi 1 câu độc nha. hehehe ... :D
Thanks bạn Duy Khánh nhiều :)
Bài viết này cũng trút đc 1 chút gánh nặng trong cái "núi" yêu cầu của bạn Tài. :D
Thủ thuật hay quá :) , Nhưng do dùng Emo nên mình chỉ cho màu trắng vào nền comments thôi :D
@Ngân : Nếu Ngân không muốn thay đổi hình nền thì có thể tạo border riêng cho các comment, như thế cũng tạo nên sự khác biệt rồi, không nhất thiết phải là màu nền
anh dung oi giup em voi
sao blog cua em ko hien len dc nhung noi dung comment ngay ben duoi bai dang co comment
diepcothanh.blogspot.com
anh giup em voi
@diepcothanh : nếu xem qua không như thế thì anh ko thể biết được, mà em thử nhớ lại xem nó bị lỗi như vậy từ khi nào, và lúc đó có thêm tiện ích nào vào không?
Chứ tự nhiên nó ko thể bị như thế.
Bài viết hay quá! Tk anh! ^^ . Nhưng mà anh ơi, làm thế nào để comment của mình riêng 1 mầu, còn com của khách thì giống nhau ạh?
» 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.