Tạo màu nền xen kẽ cho bài viết

Lúc trước mình đã hướng dẫn các bạn cách gắn ID cho từng bài viết để từ đó tùy biến CSS riêng cho từng bài viết. Từ đây mình có thể giúp bạn sáng tạo thêm cách tạo màu nền xen kẽ cho bài viết khi duyệt xem các bài viết ở kiểu trang chủ và trang nhãn.

DEMO

Để thực hiện thủ thuật này, trước tiên bạn cần gắn ID cho bài viết.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến dòng code sau rồi thêm vào phần được đánh dấu màu đỏ:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Bước 2. Kế đến chúng ta sẽ viết một kịch bản gán màu nền cho các bài viết chẳn (evenPosts) và các bài viết lẻ (oddPosts), đặt đoạn code bên dưới vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterPosts(strx) {
var therest;
therest = PostsCounter % 2;
if (therest == 0)
document.getElementById(strx).className='evenPosts';
else
document.getElementById(strx).className='oddPosts';
}
//]]>
</script>
<style>
.oddPosts {background-color: #F0F8FF; padding: 10px;}
.evenPosts {background-color: #F0F0F9; padding: 10px;}
</style>

Bước 3. Tìm đến thẻ <b:includable id='main' var='top'>

Kéo thêm xuống vài dòng sẽ thấy dòng <b:loop values='data:posts' var='post'> rồi đặt trước nó bằng đoạn code bên dưới:

<script type='text/javascript'>var PostsCounter=0;</script> <!-- đếm từ Zero -->

Tiếp tục kéo xuống tìm thấy thẻ đóng </b:loop> của thẻ <b:loop values='data:posts' var='post'> rồi thêm trước nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != "item"'>
<!-- không thực thi chức năng này ở các trang đọc bài viết -->
<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>

Toàn bộ đoạn code sau khi thêm vào sẽ trông giống như sau:

<b:includable id='main' var='top'>
.......

<script type='text/javascript'>var PostsCounter=0;</script> <!-- đếm từ Zero -->

<b:loop values='data:posts' var='post'>
.......

<b:if cond='data:blog.pageType != "item"'>

<!-- không thực thi chức năng này ở các trang đọc bài viết -->

<script type='text/javascript'>

PostsCounter=PostsCounter+1;

counterPosts(&#39;post-<data:post.id/>&#39;);

</script>

</b:if>

</b:loop>
.......
</b:includable>

Lưu Template là hoàn thành.