Thủ thuật cho bài viết : Thay đổi các kí tự đầu dòng của danh sác bằng hình ảnh

List icon

Bài viết trước mình có giới thiệu thủ thuật thay thế các kí tự dầu dòng của danh sách bằng các kí tự khác (xem ở đây), bài viết này mình sẽ hướng dẫn thay đổi các kí tự này thành hình ảnh.

Xim hình minh họa:

trước khi thực hiện thủ thuật

sau khi thực hịên thủ thuật

Dưới đây là 10 hình, bạn có thể tham khảo:

Hoặc có thể download gói hình ảnh của 10 hình trên : FD-icon-list.rar

☼ Bây giờ ta bắt đầu thực hiện:
1.Đăng nhập blog
2. Vào Bố cục » Chỉnh sửa code HTML » tìm đọan code bên dưới, và thêm vào các dòng code màu đỏ:

}
.post li {
line-height:1.5em;
list-style:none;
background:url("link ảnh") no-repeat left;
vertical-align:top;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .6em;
padding-$startSide: 17px;
margin:0;
padding-left: 20px;
}

- Ta chỉ quan tâm tới việc thêm 2 dòng code màu đỏ thôi, còn đọan code của bạn có giống như mình code mình đưa hay không thì không quan trọng, do mỗi template có code khác nhau.
- Có thể có những blog có sẵn dòng background:url("link ảnh") no-repeat left;, khi đó bạn chỉ cần thay đổi link ảnh là ok.

3. Save template .

Chúc các bạn thành công!