[12]Tạo màu nền riêng biệt cho các comment

[Serial thủ thuật blog 1]Tạo màu nền riêng biệt cho các comment

56 thủ thuật blogspot dành cho blogger

Cách đến nhanh bài viết:
· Nhấp chuột trái vào mục muốn xem.
· Về đầu trang của Serial gồm 56 thủ thuật, nhấn nút
HomeSerial - Serial Thứ 1

Nguồn: [FD's BlOg]

Giới thiệu: Thủ thuật sẽ tạo ra các màu nền riêng xen kẽ nhau cho các comment, và sẽ lặp lại một cách tuần tự. Ví dụ như: Comment đầu tiên màu hồng, comment tiếp theo màu xanh, comment kế đến nữa lại màu hồng,… và cứ lặp tuần tự như vậy.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script.

Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)

1. Tải về máy một trong ba phiên bản jQuery sau: 1.3.1 | 1.3.2 | 1.4.3
2. Up lên host cho link direct.
- Gợi ý: Dùng host của google: google drive
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.
3. Tìm thẻ <head>
- Thêm vào dưới nó đoạn code sau:
(Nhớ thay jQuery.JS bằng link mới bạn vừa up lên host)
<script src='jQuery.JS' type='text/javascript'/>

Bước 2: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn Code CSS sau:

/*Màu nền comment (1)*/
.comment-body.style1 {
background:#339966;
}
.comment-body.style2 {
background:#3366ff;
}

#339966: Mã màu xanh lá.
#3366ff: Mã màu xanh dương.

Bạn có thể đổi mã màu lại cho thích hợp với blog.

Bước 3: Tìm thẻ đóng </head>

- Thêm vào trên nó đoạn Javascript sau:

<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(2n+0)").addClass("style1");
$(".comment-body:nth-child(2n+1)").addClass("style2");
});
</script>

Bước 4: Save template. (Lưu mẫu)

Hướng dẫn mở rộng

Như các bạn đã thấy, ở trên là hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ 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.
Thay đổi code ở bước 2 và 3 như sau:
- Ở Bước 2 thay vì code CSS chỉ có 2 dòng, thì ở đây ta tùy biến thêm nhiều dòng nữa để ứng với nhiều màu cho việc hiển thị nền comment.

/*Màu nền comment (1)*/
.comment-body.style1 {
background:#3366ff;
}
.comment-body.style2 {
background:#339966;
}
.comment-body.style3 {
background:#343434;
}
.comment-body.style4 {
background:#ccc;
}

- Ở Bước 3 thay vì Code javascript chỉ có 2 dòng 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 thay số 2 thành số 4, và thêm 2 dòng nữa, ta được: 4n+0, 4n+1, 4n+2, 4n+3.

<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(4n+0)").addClass("style1");
$(".comment-body:nth-child(4n+1)").addClass("style2");
$(".comment-body:nth-child(4n+2)").addClass("style1");
$(".comment-body:nth-child(4n+3)").addClass("style2");
});
</script>

- Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class (ở bước 2), để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề,…
Save template. (Lưu mẫu)

THE END.