Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[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>.




<!--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='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(&quot;<data:label.name/>&quot;);</script></a>

</b:loop>

</b:if>

</div>




Lưu Template là OK.



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

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Sosblogs
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải