Để 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.
Cách 1: Đánh số thứ tự theo dạng 1,2,3
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>
Code by Duy pham Blog
4. Lưu mẫu lại!Cách 2: Đánh số thứ tự theo dạng 1,1a,1b
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
Chúc các bạn thành công
Bài viết của bạn hay quá mình có thể trao đổi backlink liên kết không, nếu bạn đồng ý thì pm qua cho mình nhé:
Trả lờiXóahttp://hoanggia2016.blogspot.com/2016/01/trao-doi-lien-ket-trong-cong-dong-web.html
ĐẤT NỀN BÌNH TÂN GIÁ RẺ
Lâu lắm mới ghé nhà bác.
Trả lờiXóaVẫn khỏe và vẫn đam mê chứ bác.:I)
Hi hi, lâu rồi mới thấy bác.Có ghé qua blog bác mà thấy xóa mấy rồi. Bác chán blog rồi hả ? hay đã chuyển tên miền khác
XóaBlog cũ phá tanh bành rồi.Mới làm lại blog với data cũ
XóaNó đây
DautoBlog
Đăng nhận xét