Đánh số thứ tự cho bài đăng phổ biến (Popular post)

Bài viết này mình sẽ hướng dẫn bạn đánh số thứ tự tự động cho widget Popular Post (Bài đăng phổ biến) của blogspot.

Thêm tiện ích Popular Post

Trước hết bạn hãy add widget Popular Post vào blog sau đó thiết lập như hình bên dưới. Bạn nên để số lượng bài viết từ 9 trở xuống để hiển thị đẹp nhất

Cài đặt trong template

Dán đoạn code bên dưới vào trước ]]></b:skin> (Click vào khung chứa template sau đó nhấn Ctrl + F sau đó dán ]]></b:skin> vào để tìm nhanh) sau đó lưu lại template
/*--Đánh số thứ tự cho Popular post--*/
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
border-radius: 0px;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Bạn có thể tùy chỉnh:
  • #292D30: Màu nền khung số thứ tự
  • #ffffff: Màu số thứ tự
  • 0px: Tăng giá trị này để tạo thành bo góc hoặc hình tròn

Bạn cần giúp đỡ

Nếu có gặp vấn đề trong quá trình thực hiện đừng ngại comment đặt câu hỏi và mình sẽ giải đáp vấn đề liên quan đến bài viết. Mong bạn sẽ luôn ủng hộ TrollVL, đừng quên like và share bài viết đến bạn bè của bạn. Cảm ơn!
Tham khảo MBT
0 Comments
Comments

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->