Tạo mầu nền xen kẽ cho comments của blog

Ngoài việc tạo sự khác biệt cho nhận xét của tác giả bài viết hôm nay mình xin giới thiệu một thủ thuật mới Tạo mầu nền xen kẽ cho comments của blog. 

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.bgc1{background:#BFF}
.bgc2{background:#F4F4F4}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head> (nếu blog bạn đã có jQuery rồi thì bỏ qua bước này).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Bước 3: Thêm đoạn mã dưới đây vào trước thẻ <b:loop values='data:post.comments' var='comment'>.

<script type='text/javascript'>var cCounter=0;</script>

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <b:loop values='data:post.comments' var='comment'>.

<script type='text/javascript'>
cCounter=cCounter+1;
var du=cCounter%2;
function addclass(a){
if(du==0){
$(document).ready(function(){
$("."+a).addClass("bgc2");
});
}
else{
$(document).ready(function(){
$("."+a).addClass("bgc1");
});
}
};
</script>
<script type='text/javascript'>addclass('<data:comment.anchorName/>');</script>
<div expr:class='data:comment.anchorName'>

Bước 5: Tìm thẻ kết thúc </b:loop> tương ứng của <b:loop values='data:post.comments' var='comment'> và thay thế thành:

</div>
</b:loop>

Thay thế #BFF và #F4F4F4 thành mã màu theo ý bạn.

cCounter là biến đếm số comments, nếu áp dụng thủ thuật tạo số đếm cho comments bạn có thể ghép 2 thủ thuật làm 1 để giảm bớt code