23.5.19

Đánh Số Thứ Tự Cho Bài Đăng Phổ Biến Bằng CSS

Nội Dung Chính [Ẩn] [Hiển thị]
    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. Các bạn có thể xem demo tại widget "Xem Nhiều Trong Tuần" tại blog này của mình

    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.

    Cài đặt trong template

    Sử dụng đoạn code bên dưới
    /*--Đánh số thứ tự cho Popular post--*/
    .popular-posts ul {
     padding-left: 0;
     counter-reset: popcount;
    }
    .popular-posts ul li:before {
     list-style-type: none;
     margin-right: 15px;
     padding: .3em .6em;
     counter-increment: popcount;
     content: counter(popcount);
     font-size: 16px;
     background: #292d30;
     color: #ffffff;
     border-radius: 0;
     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;
    }
    

    Cảm ơn đã theo dõi và chúc các bạn vui vẻ!
    Bạn đang xem bài viết "Đánh Số Thứ Tự Cho Bài Đăng Phổ Biến Bằng CSS" tại chuyên mục: Blogspot , CSS , Widget
    Xem thêm