Chèn icon vào trước tiêu đề bài viết theo 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.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 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(icon) tương ứng. Nếu bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ xấu và rối mắt vì 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; 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 == &quot;Label 1&quot;'><img src='Link ảnh 1'/></b:if><b:if cond='data:label.name == &quot;Label 2&quot;'><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 == &quot;Label 3&quot;'><img src='Link ảnh 3'/></b:if>
<b:if cond='data:label.name == &quot;Label 4&quot;'><img src='Link ảnh 4'/></b:if>

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