• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

20
02/10/2011

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.

{20 bình luậnAdd yours ?}

21:33:00, 2 thg 10, 2011

Em xí phần bóc tem bài viết nha hì! :1) :1)

Reply
21:43:00, 2 thg 10, 2011

@Linh Dung Sao lại phải bóc tem hè, thay vào đó nên phán một câu hỏi hay ý kiến gì đó sẽ useful hơn :1)

Reply
22:10:00, 2 thg 10, 2011

Đã +1 cho bài mới

Reply
22:11:00, 2 thg 10, 2011

@Huỳnh Nhật Hà Em cũng muốn lắm chứ anh Hà! Em cũng nghĩ là khi comments trong các bài viết thì phải như thế nào? Rút ra được gì từ trong bài, có thể áp dụng thêm cho các tiện ích nào nữa...Nhưng nhiều khi bí quá thì đành phải bóc tem hì! Nếu mà ko bí thì hầu như bài viết nào của anh, em cũng là người comments đầu tiên rồi hì hì :3)

Reply
22:16:00, 2 thg 10, 2011

@Linh Dung Hì hì đợi mọi người nghĩ thêm ý tưởng từ bài này. Bây giờ dành kiếm một cái sound sleep để mai còn :1)

Reply
22:23:00, 2 thg 10, 2011

Bác Hà nhắc nhỡ LD làm mọi người cũng thấy khó comment, vì đôi lúc những Blogger không chuyên về It thì hơi khó. :5)

Reply
22:25:00, 2 thg 10, 2011

@24h-CafeTheo mình nếu khi Click vào bài đọc vẫn giữ nguyên màu thi đẹp hơn.

Reply
22:32:00, 2 thg 10, 2011

@24h-Cafe Khà khà mình k phải nhắc gì đâu, chỉ là cái chữ bóc tem thấy nó kỳ kỳ, sao k thay vào đó là một câu hỏi gì đó, hoặc nếu k có ý kiến gì thì k comment cũng được có sao đâu. Đang định đi ngủ mà nhớ các bạn lại quay lại đây nè :1)

Reply
22:44:00, 2 thg 10, 2011

@Huỳnh Nhật Hà Để thể hiện sự quan tâm thì nên comment mà anh Hà hì! Em thấy anh Hà không phải khắt khe khó tính gì đâu! Mọi người cứ thoải mái comment :1):3)

Reply

Ua, cai demo sao khong thay hieu ung nhe ?

Reply
13:18:00, 3 thg 10, 2011

@Tên miền 50k..nhanh tay click ! Bài lẻ màu nhạt, bài chẵn màu đậm hơn mà bác kiu không thấy là sao ta?

Reply
14:22:00, 3 thg 10, 2011

Bác Hà giúp mình bên chỗ cài biểu tượng cảm xúc vào nhận xét với.:I)

Reply
Yolks
AUTHOR
15:07:00, 3 thg 10, 2011

:3) +1 cho Bác HÀ :1) blog em có bài mới khửa khửa

Reply
16:01:00, 3 thg 10, 2011

thủ thuật này độc đó anh, hay lắm

Reply
22:27:00, 3 thg 10, 2011

Hai bữa nay lo làm cái template cho vnbooks.info mà chẳng có thời gian ghé thăm, thủ thuật hay quá, cảm ơn anh Hà :5)

Reply
22:53:00, 3 thg 10, 2011

@Lee Peace Ồ thấy rồi, www.vnbooks.info vẫn chưa tìm thấy temp thích hợp, P tự làm thì vẫn chưa thể có sự sáng tạo được.

Reply
23:13:00, 3 thg 10, 2011

@Lee Peace Temp này của anh Bình giống lighting, phần main được chia ra 2 phần nhìn có vẻ ngon hơn hì :3)

Reply
23:13:00, 3 thg 10, 2011

@Huỳnh Nhật HàHì, em chỉ toàn mò từ temp này và temp khác thôi, dù sao cũng đã lỡ hẹn rồi, ráng vài bữa để hoàn thành lời hứa.

Reply
23:16:00, 3 thg 10, 2011

@Linh Dung Hì, đúng rồi, cái header và popular posts là lấy từ Lightning đó em.

Reply
19:24:00, 12 thg 10, 2016

ai có mẫu tạo xong n thành ntn k

tử vi 12 cung hoàng đạo

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn