Header Ads Widget

Ticker

6/recent/ticker-posts

Tạo số đếm cho threaded Comments

Bạn muốn biết xem có bao nhiêu bình luận trong bài viết của bạn, bạn muốn đánh số thứ tự để dễ quản lý bình luận của các độc giả ?
Để trả lời các câu hỏi đó. Hôm nay mình hướng dẫn các bạn cách đánh số cho Threaded Comments của blogspot với hiệu ứng xoay vòng bằng css.

Một số tính năng và hạn chế:

  • Số thứ tự sẽ được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. 
  • Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.

Trong bài viết này mình sẽ giới thiệu đến các bạn 2 cách để thêm số đếm vào khung Threaded Comments của blogspot. Nào bắt đầu thôi.

 Cách 1: Đánh số thứ tự cho các comment theo dạng 1,2,3,...n



1- Dán đoạn code bên dưới vào trước thẻ ]] ></b:skin>

.comments-number { display:block; position:absolute; top:11px; left:-36px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background-color:#066; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); width:20px; height:20px; font-size:10px; line-height:2em; color:#fff; text-align:center; transition:0.6s; -o-transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -ms-transition:0.6s }
.comments .comment-thread.inline-thread .comments-number { background-color:#5D974C; position:absolute; top:11px; left:-36px; transition:0.6s; -o-transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -ms-transition:0.6s }
.comments-number:hover,.comments .comment-thread.inline-thread .comments-number:hover { background-color:#f78d1d; -moz-transform:scale(1.8) rotate(-360deg); -webkit-transform:scale(1.8) rotate(-360deg); -o-transform:scale(1.8) rotate(-360deg); -ms-transform:scale(1.8) rotate(-360deg); transform:scale(1.8) rotate(-360deg) }

 2. Tìm đoạn mã var items = <data:post.commentJso/> trong template của bạn và thay  bằng đoạn mã dưới đây

var items = <data:post.commentJso/>; items_copy=items;

3. Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.


 <script type='text/javascript'> //<![CDATA[ for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b} //]]> </script>
4. Lưu mẫu lại!


 Cách 2: Đánh số thứ tự cho các comment theo dạng 1,1a,1b,2,2a,2b,3,...n 1

1.Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>



.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left:10px; padding-top:3px; background: url (https://lh5.googleusercontent.com/-Wvr8oued0wo/UINTC2W6pgI/AAAAAAAADZc/fhW64KZJj1E/h120/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }

 Nếu các bạn muốn loại bỏ bong bóng bình luận thì xóa hết các phần chữ màu đỏ đi .Nếu các bạn muốn thay thế bong bóng bình luận, thay thế mã của dòng chữ màu xanh là link ảnh biểu tượng của bạn.


2.Lưu mẫu lại.


Một số hình ảnh bong bóng bình luận chia sẻ cho các bạn:




Chúc các bạn thành công

Đăng nhận xét

1 Nhận xét

  1. As the Pencil Sharpener for Kids Japanese started their rebuilding efforts after world warfare two they employed anything they could discover as uncooked materials have been extremely scarce. People like Shoshiro Honda, the namesake of Honda automobiles, started to experiment with recycled fuel cans and some other scrap metals they might discover. The recycling discoveries made during this time are still in use at present. It is essential to grasp the assorted processes, primary design guidelines, materials, and finishes concerned in sheet steel fabrication. Each of these factors plays important role in bringing out one of the best of your project.

    Trả lờiXóa