Chèn icon theo nhãn trước tiêu đề bài viết Blogger

Đặt icon cho từng nhãn trước tiêu đề bài viết là một cách giúp nhận diện nhanh chủ đề của bài viết. Trước đây namkna đã có bài giới thiệu về cách thực hiện nhưng là chung cho tất cả nhãn. Hôm nay namkna giới thiệu cách sử dụng javascript để gán tự động hình icon đại diện cho từng nhãn. Mỗi khi blogspot có thêm nhãn mới thì chỉ cần gán thêm hình icon đại diện cho nhãn trong đoạn code javascript một cách đơn giản, tránh đụng đến HTML trong Template và điều này đặc biệt hữu dụng đối với các bạn chưa rành về XML của Blogger Template.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code sau đây vào trước thẻ </head>.

<!--ICON FOR LABEL AUTO BEFORE POST TITLE BY HUYNH NHAT HA-->
<style type='text/css'>
.post-icon{
filter: alpha(opacity=80);
opacity: .8;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
float:left;margin-right:5px;width:20px;height:20px;display:block;border:solid 0px;
}
.post-icon:hover{
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
-khtml-opacity: 1.0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function imagelabel(label) {
type=0;
image = new Array()
image[0] = ""
image[1] = "<img class='post-icon' src='URL_icon_Nhãn 1' title='Mô tả Nhãn 1'/>"
image[2] = "<img class='post-icon' src='URL_icon_Nhãn 2' title='Mô tả Nhãn 2'/>"
image[3] = "<img class='post-icon' src='URL_icon_Nhãn 3' title='Mô tả Nhãn 3'/>"
image[4] = "<img class='post-icon' src='URL_icon_Nhãn 4' title='Mô tả Nhãn 4'/>"
image[5] = "<img class='post-icon' src='URL_icon_Nhãn 5' title='Mô tả Nhãn 5'/>"

if (label == "Tên Nhãn 1"){type=1;}
if (label == "Tên Nhãn 2"){type=2;}
if (label == "Tên Nhãn 3"){type=3;}
if (label == "Tên Nhãn 4"){type=4;}
if (label == "Tên Nhãn 5"){type=5;}
document.write(image[type]);
}
//]]>
</script>

5- Tìm dòng

<div class='post-title'>

- đặt sau nó với đoạn code bên dưới.

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagelabel(&quot;<data:label.name/>&quot;);</script></a>
</b:loop>
</b:if>
</div>

6- Lưu Template.