Hướng dẫn đánh số tự động bài đăng phổ biến Blogspot

Bài đăng phổ biến là một trng những tiện ích sẵn có trong blogspot, có nhiều tùy chọn cho tiện ích này hiển thị phần trích dẫn, hiển thị hình ảnh thu nhỏ, tùy biến số bài được hiển thị…Hôm nay mình sẽ hướng dẫn các bạn đánh số thứ tự bài đăng phổ biến để trông xinh động hơn.

Đầu tiên các bạn phải thêm tiện ích bài đăng phổ biến ( Popular Posts ) ra ngoài trang chủ : 

Truy cập Bảng điều khiển (Dashboard) chọn Bố cục (Layout) và nhấn Thêm tiện íchbên Sidebar

Trong cửa sổ hiện ra chọn Bài đăng phổ biến – Popular Post và thiết lập cấu hình tiện ích này như hình:

Nhấn lưu để hoàn thành việc thêm tiện ích

Tiếp đến tùy chỉnh Tùy chỉnh tiện ích Bài đăng phổ biến với CSS:

Trước khi tiến hành bước này bạn nên sao lưu lại Template. Sau khi sao lưu hãy nhấn vào phần Mẫu (Template) và chọn Chỉnh sửa HTML (Edit HTML) .

Tìm tới đoạn: ]]></b:skin> và thêm lên trên đoạn code :

.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; 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; }

Demo: