Hướng dẫn tạo style popular đánh số bài viết

Bài viết hướng dẫn tạo Style Popular ( Bài đăng phổ biến cho blogger) . Các bạn làm theo hướng dẫn từng bước rất đơn giản

Hình ảnh minh hịa tại Blog Style Popular đánh số bài viết

Đăng nhập vào Blogger - Bố Cục - Bài đăng phổ biến

Check bỏ mục hình ảnh thu nhỏ và đoạn trích ( không chọn 2 mục này nhé)

Vào chỉnh sửa HTML và copy đoạn code bên dưới vào

Save lại và ra ngoài blog xem kết quả. Bạn có thể chỉnh đoạn code bên dưới tùy ý vì CSS nên khá dễ dàng. 

.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.5em;
counter-increment: popcount;
content: counter(popcount);
font-size: 15px;
background: #10c3f6;
color: #ffffff;
position: relative;
font-weight: bold;
font-family:Arial;
float: left;
border: 1px solid #dddddd; border-radius:100px;
box-shadow: 1px 2px 2px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd; font-family:Arial
}
.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;
}

Chúc các bạn thành công nếu có thắc mắc vui lòng comment bên dưới.

Tweet