Popular post với hiệu ứng hover của số đếm

Các loại popular post thì thường có số đếm cạnh mỗi dòng, tuy nhiên các con số này thường chỉ đứng yên. Mình đã là một loại với một chút hiệu ứng hover cho số đếm.

Popular post với số đếm

VIEW DEMO

#Popular post với số đếm

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trước thẻ mà bạn mới tìm

/* khanh98.blogspot.com/2015/08/popular-post-voi-so-dem.html */
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
  z-index: 999;
  list-style-type: none;
  counter-increment: popcount;
  content: counter(popcount);
  background: #A46F38;/* màu nền của số đếm */
  color: #ffffff; /* màu chữ của số đếm */
  position: absolute;
  font-weight: bold;
  font-family: georgia;
  float: left;
  height: 20px; /* chiều cao ban đầu của màu nền chữ */
  width: 20px; /* chiều rộng ban đầu của màu nền chữ */
  text-align: center;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts ul li a img{border:solid 1px #A46F38;padding-right: 0 !important} /* viền của ảnh */
.popular-posts ul li:hover {border-bottom:solid 1px #A46F38} /*viền bottom khi hover */
.popular-posts ul li:hover:before {height:74px;line-height:74px} 

background: #A46F38; là màu nền của số đếm
color: #ffffff; là màu chữ của số đếm
height: 20px; là chiều cao ban đầu của màu nền số đếm
width: 20px; là chiều rộng ban đầu của số đếm
border:solid 1px #A46F38 là viền của ảnh
border-bottom:solid 1px #A46F38 là viền bottom xuất hiện khi bạn hover
height:74px;line-height:74px là chiều cao sau khi hover(áp dụng cho nền của số đếm)
5. Lưu mẫu lại và kiểm tra kết quả