• 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 nhận xét

16
04/10/2011

Chúng ta vừa mới biết cách tạo màu nền xen kẽ cho bài viết ở kiểu trang index (trang chủ, trang nhãn), từ đó chúng ta có thể vận dụng để tạo màu nền xen kẽ cho nhận xét theo như trang demo dưới đây.


DEMO

Việc áp dụng thủ thuật này có liên quan đến thủ thuật tạo số đếm nhận xét vì thế kết hợp hai thủ thuật lại với nhau để đơn giản hóa code, theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates. Đặt kịch bản gán lớp nhận xét chẳn và lẻ vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterComments(strx) {
var therest;
therest = CommentsCounter % 2;
if (therest == 0) {
document.getElementById(strx).className='evenComments';
} else {
document.getElementById(strx).className='oddComments';
}
}
//]]>
</script>

Bước 2. Tìm dòng <b:loop values='data:post.comments' var='comment'>

Và thay nó bằng đoạn code bên dưới:

<!-- đếm nhận xét từ Zero -->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- gắn ID cho từng nhận xét -->
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/> (dòng này hiển thị chữ says/said/nói, tùy theo Template bạn có thể đặt đoạn code bên dưới theo ý muốn) rồi chèn bên dưới nó bằng đoạn code sau:

<span class='comment-counter'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code bên dưới:

<!-- thiết lập lớp cho nhận xét -->
<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>

</div>

Bước 3. Đặt code CSS vào trước dòng ]]></b:skin>.

  1. /* số đếm nhận xét */
  2. .comment-counter {
  3. float: right;
  4. display: block;
  5. width: 40px;
  6. margin-top: -30px;
  7. text-align: right;
  8. font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
  9. font-size: 28px;
  10. font-weight: normal;
  11. }
  12. .comment-counter a:link, .comment-counter a:visited {color: #445566 !important;}
  13. .comment-counter a:hover, .comment-counter a:active {color: #FF9933 !important;}
  14. /* thuộc tính phân biệt nhận xét chẳn và lẻ */
  15. .evenComments { /* nhận xét chẳn */
  16. margin: 10px 0px;
  17. padding: 5px 20px 0px;
  18. background-color: #F0F0F9;
  19. border:1px solid #DDD;
  20. }
  21. .oddComments { /* nhận xét lẻ  */
  22. margin: 10px 0px;
  23. padding: 5px 20px 0px;
  24. background-color: #F0F8FF;
  25. border:1px solid #DDD;
  26. }

Về style cho CSS bạn có thể tự tùy biến và vận dụng linh hoạt cho blogspot của mình. Lưu Template là hoàn thành.

{16 bình luậnAdd yours ?}

12:09:00, 4 thg 10, 2011

Anh ơi, cho em hỏi tẹo nhé !^^
Hiện nay có rất nhiều trang web chia sẻ templates miễn phí, nhưng khi em download về copy và lưu mẫu thì Blogger báo lỗi "Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The document type declaration for root element type "html" must end with '>'."
là sao hả anh? Em mới vô làng chơi Blog nên còn lắm, giúp em với nha...

Reply
Yolks
AUTHOR
12:19:00, 4 thg 10, 2011

thủ thuật của em chưa có hả a

Reply
13:12:00, 4 thg 10, 2011

@Phạm Minh Tâm Bác vào Thiết kế -> Chỉnh sửa HTML -> Tải mẫu lên từ một tệp trên ổ cứng. Chọn template mà bác download về là được mà!:3)

Reply
14:51:00, 4 thg 10, 2011

@Phạm Minh Tâm Thì trong lúc sao chép dán vô tình làm mất dấu > của thẻ html cuối Template, e chỉ việc thêm vào như thế này là xong: </html> (chú ý dùng Notepad khi xử lý document)

Reply
14:55:00, 4 thg 10, 2011

@Yolks Đó là gì nhỉ? Tạm thời k nghiên cứu thêm về feed cùi bắp nữa, chỉ tổ nặng thêm cho blogspot mà thôi.

Reply
Yolks
AUTHOR
18:28:00, 4 thg 10, 2011

@Huỳnh Nhật Hà Chắc phải vậy thôi , hihi , chắc mai mốt nhờ a làm thủ thuật khác khửa khửa

Reply
20:22:00, 4 thg 10, 2011

Chào HNH
Mời bạn ghé thăm blog mình Bida Việt Nam
Sẽ rất vui nếu có thể đặt liên kết với bạn !

Reply
20:26:00, 4 thg 10, 2011

@Trần Đức Thịnh Khà khà, rất hân hận, mình rất khoái bida nhưng chơi bằng game :1), hy vọng rảnh sẽ học hỏi lý thuyết. Nhưng mà bạn định đặt link của mình ở đâu zậy

Reply
Yolks
AUTHOR
20:57:00, 4 thg 10, 2011

Á , sao bài em ko có cho comment vậy a Hà

Reply
21:01:00, 4 thg 10, 2011

@Yolks Ở cái Post Options chọn Allow comments mới có

Reply
Yolks
AUTHOR
21:04:00, 4 thg 10, 2011

@Huỳnh Nhật Hà Duyệt đi a HÀ yêu :1)

Reply
22:15:00, 4 thg 10, 2011

chà vẫn là bộ đếm mà đc anh Hà tùy biến nhiều thứ thật

Reply
12:10:00, 25 thg 10, 2011

@ Linh Dung: Mình đã làm thế nhưng nó vẫn báo lỗi bạn ạ. Buồn!^^

Reply
12:19:00, 25 thg 10, 2011

@ Huỳnh Nhật Hà: Hihi... Cảm ơn anh nhé, để em thử xem sao (^_^)!

Reply

Cảm ơn về bài viết này, mình đã áp dụng vào trang Blog của mình nó OK rồi. Nhưng hiện nếu [Vị trí Mẫu Nhận xét] Nhúng bên dưới bài đăng thì OK
Nhúng dưới bài đăng
Còn [Vị trí Mẫu Nhận xét] view Toàn bộ trang thì chưa được
[Vị trí Mẫu Nhận xét] view Toàn bộ trang
Bác Hà có thể khắc phục lỗi này ko?

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

để bt cho n bt

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