Các bạn đã khá quen với việc dùng công cụ đánh số thứ tự bài viết khi sọan thảo (ví dụ : 1,2,3... hay các dấu chấm đầu mỗi list), bài viết hôm nay hướng dẫn 1 thủ thuật nhỏ giúp bạn thay đổi nó.(ví dụ : A, B, C... hay I, II, III...).
☼ Với dạng kí tự (chữ hoặc số)
Ví dụ ta có đoạn văn bản như bên dưới:
và code của nó là như thế này :
Thay đổi style cho list:
<ol>
<li>Dạng 1</li>
<li>Dạng 2</li>
<li>Dạng 3</li>
<li>Dạng 4</li>
</ol>
- Để thay đổi style cho list, ta chỉ cần thêm thuộc tính type="{kí tự}" vào thẻ <ol> là xong. Ví dụ như bạn muốn chuyển các số 1,2,3,4 thành A,B,C,D thì ta chỉ việc sửa thẻ <ol> lại thành <ol type="A"> là xong. xem ví dụ bên dưới.
và code của nó là như thế này :
Thay đổi style cho list:
<ol type="A">
<li>Dạng 1</li>
<li>Dạng 2</li>
<li>Dạng 3</li>
<li>Dạng 4</li>
</ol>
Dưới đây là 1 vài mẫu cho bạn chọn:
- type="A" cho ta list A,B,C,D
- type="a" cho ta list a,b,c,d
- type="I" cho ta list I,II,III,IV
- type="i" cho ta list i,ii,iii,iv

☼ Với dạng symbol (các kí tự đặc biệt đầu dòng)
- Ví dụ ta có đoạn văn bản như bên dưới:
và code của nó là như thế này :
Thay đổi style cho list:
<ul>
<li>Dạng 1</li>
<li>Dạng 2</li>
<li>Dạng 3</li>
<li>Dạng 4</li>
</ul>
- tương tự như trên, muốn thay đổi style bạn chỉ cần thêm thuộc tính type="{tên symbol}" vào thẻ <ul> là xong.

- Ở đây mình sẽ 2 ví dụ:
+ type <ul type="circle">
sẽ có dạng như sau:

+ type <ul type="square">
sẽ có dạng như sau:

THAY ĐỔI KÝ TỰ BẰNG HÌNH ẢNH

Xem 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.!
Theo: Fandung