☼ 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.
Theo Fandung
0 nhận xét