Loading post navigation ...
 
 

Pro page

11
Nhận xét

Modify Form Comment : Bài 10 - Tạo màu nền riêng biệt cho các comment

| by Phan Dũng | views

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

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)
[FD's BlOg] - Thủ thuật này Tài có nhờ mình lâu rồi, trước kia mình có thử qua các cách đơn giản với vài đoạn code nhỏ từ javascript đều không thành công. Hôm nay mình thử nó với jQuery thì lại thành công. Thủ thuật sẽ tạo ra các màu nền riêng cho các bài comment, và sẽ lặp lại 1 cách tuần tự.


Đây là hình ảnh mà mình đã thực hiện ở blog test của mình:

- 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 #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.

Đây là hình ảnh lặp với nhiều màu nề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.


Enter your mail address:

11

share4vnn

tem

Duy Khánh

A Dũng nhiều chiêu độc ghê :D

share4vnn

ô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

Duy Khánh

vậy thay lời khen clic 2 ads ủng hộ anh.:D

★☆★ Lê Hữu Tài ★☆★

Á á...

Tuyệt wá FD ơi :X

fandung

á á...

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

Ngankvn ®

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

Phan Dũng

@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

diepcothanh

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

fandung

@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ế.

ZikZak

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?



☺ 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