A1K44 Belong you

[KiNg]_[PiN]-BB

Đặ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 blogger Fan Dung đã có bài giới thiệu về cách thực hiện điều này.

Hôm nay tôi có nghĩ ra một cách có thể nói là có hiệu quả tương đương,
sử dụng javascript để gán tự động hình icon đại diện cho từng nhãn và ít
can thiệp đến cấu trúc HTML trong Template. Mỗi khi blogspot của bạn có
thêm nhãn 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.

Xem Demo.

Để thực hiện điều này, bạn hãy thực hiện theo các bước sau đây.

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=label.url' rel='tag'><script
type='text/javascript'>imagelabel("<data:label.name/>");</script></a>

</b:loop>

</b:if>

</div>

Lưu Template là OK.

Chúc bạn thành công nhé! :37)

1 Chèn icon cho nhãn trước tiêu đề bài viết Blogger 18/01/12, 10:14 pm

[KiNg]_[PiN]-BB