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

Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.

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).

Hình ảnh minh họa kết quả:

* Các bước thực hiện :

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

- 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;
}

- 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>

- Thêm đoạn code ( in nghiêng ) 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>

7. Save template.

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

Phan Dũng