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).
☼ 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;
}
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. Và chỉnh sửa code lại như sau:
<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>
<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.
fandung.com