Đặ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 Blogger2. 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("<data:label.name/>");</script></a>
</b:loop>
</b:if>
</div>
6- Lưu Template.
Hướng dẫn khách hàng sử dụng dịch vụ
Để xem được các thủ thuật hay nhất quý khách hãy lick vào button bên dưới, xem xong quý khách thấy hài lòng hãy liên hệ nhanh với chúng tôi để sở hữu bộ code bản quyền ưng ý nhất!
ĐĂNG KÝ MUA CODE
Quý khách muốn đăng ký mua templates bản quyền thiết kê tinh xảo đẹp mắt hãy liên hệ nhanh với chúng tôi để đặt hàng Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của chúng tôi!
ĐĂNG KÝ MUA TEMPLATE
