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

Để 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.