Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Thủ thuật sau đây sẽ giúp các bạn chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng.Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Demo

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>

.post-icon img {height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */float:left;margin-right:8px;}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if>

6. Thêm đoạn code được đánh dấu highlight như bên dưới:

<b:if cond='data:post.title'><h3 class='post-title entry-title'><div class='post-icon'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Label 1"'><img src='Link ảnh 1'/></b:if><b:if cond='data:label.name == "Label 2"'><img src='Link ảnh 2'/></b:if></b:loop></b:if></div><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == "Label 3"'><img src='Link ảnh 3'/></b:if>
<b:if cond='data:label.name == "Label 4"'><img src='Link ảnh 4'/></b:if>

7. Save template.

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

[FD's BlOg]