Home » Thủ thuật blog
Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng
Thứ Tư, 23 tháng 9, 2009
Theo yêu cầu của 1vn.biz

Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.
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 :
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.
Chúc các bạn thành công.

- Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên
- [ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE
- [ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog
- Giải pháp Blogger bị chặn 02/07/2012
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
- Tạo lại header cho chuẩn Seo
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
Comments[ 0 ]
Đăng nhận xét