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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ </head>.

<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='Chuyên mục: Nhãn 1'/>"
image[2] = "<img class='post-icon' src='URL_icon_Nhãn 2' title='Chuyên mục: Nhãn 2'/>"
image[3] = "<img class='post-icon' src='URL_icon_Nhãn 3' title='Chuyên mục: Nhãn 3'/>"
image[4] = "<img class='post-icon' src='URL_icon_Nhãn 4' title='Chuyên mục: Nhãn 4'/>"
image[5] = "<img class='post-icon' src='URL_icon_Nhãn 5' title='Chuyên mục: Nhãn 5'/>"

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

Bạn cần thay những dòng được đánh dấu màu xanh bằng địa chỉ URL icon đại diện cho từng nhãn và những dòng được đánh dấu màu đỏ bằng tên nhãn tương ứng với icon. Mỗi khi blog của bạn có thêm nhãn thì chỉ cần gán thêm vào đoạn code javascript ở trên theo đúng cách thức:

image[n] = "<img style='width:15px;' class='post-icon' src='URL_icon_Nhãn n' title='Chuyên mục: Nhãn n'/>"

if (label == "Nhãn n"){type=n;}

Bước 2. Tìm dòng <div class='post-title'> rồi đặ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>

Lưu Template là OK.