[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.jpg "Tạo màu nền riêng biệt cho các comment")
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]
CÁCH THỰC HIỆN
1. Đăng nhập Blogger2. 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.32. 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:<!-- Màu nền comment (2) -->
<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.
<!-- Màu nền comment (2) -->
<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.
Đăng nhận xét