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'>- Thay tên nhãn và link ảnh icon cho thích hợp.
<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>
- 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>
Chúc các bạn thành công.
Thảo Luận & Nhận Xét (0)
Nội quy bình luận của blog
Hãy cùng giữ phần thảo luận thân thiện, hữu ích và an toàn cho mọi người.
Công cụ Mã hóa HTML & Chèn Code vào Bình luận
Nhận xét
Đăng nhận xét