Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB



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.

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Free blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải