Multi-Style Label là widget tổng hợp 3 kiểu giao diện khác nhau cho Label như List danh sách thông thường, Menu Drop-down và Zoom (khá giống Tag Cloud). Bạn có thể tùy chỉnh dạng giao diện ưa thích bằng cách nhấn vào các nút điều khiển sẵn có trên widget. Ngoài ra, nó còn có chế độ Ẩn để tiết kiệm một phần không gian cho Blog. Mời bạn xem qua screenshot của Multi-Style Label :
Chế độ Ẩn (Nút ngoài cùng).
Dạng List (Nút thứ 2).
Dạng Menu Drop-down (Nút thứ 3).
Dạng Zoom (Nút cuối).
Để tạo được widget Label này, bạn hãy thực hiện tuần tự các bước sau :- Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
- Tìm đoạn code sau : (Template của bạn phải cài Label) <b:widget id='Label1' locked='false' title='Labels' type='Label'/>Note: Nếu không tìm thấy, hãy search với từ khóa Label1.
- Copy đoạn code sau và dán đè lên code mới tìm :<!-- Multi-style labels - zoom, menu and list styles -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<div align='center'><a href='javascript:void' onclick='javascript:nullStyle();' title='Ẩn'><img src='http://img2.pict.com/ed/77/63/1284680/0/blank.png'/></a>
<a href='javascript:void' onclick='javascript:linkStyle();' title='Hiển thị dạng danh sách'>
<img src='http://img2.pict.com/67/5d/ae/1284679/0/list.png'/></a>
<a href='javascript:void' onclick='javascript:menuStyle();' title='Hiển thị dạng Menu'>
<img src='http://img2.pict.com/8e/d4/d6/1284682/0/menu.png'/></a>
<a href='javascript:void' onclick='javascript:zoomStyle();' title='Hiển thị dạng Zoom'>
<img src='http://img2.pict.com/61/60/bc/1284683/0/zoom.png'/></a></div><br/>
<div class='widget-content'>
<div id='LabelDisplay' align='center'>
</div>
</div>
<script language='javascript' type='text/javascript'>
function nullStyle() {
var display = "";
obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>
obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}
function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";
obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}
function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";
obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}
// set default to zoom style
linkStyle();
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget> - Save lại template và kiểm tra kết quả.
Hy vọng widget Multi-Style Label này sẽ làm bạn hài lòng. Chúc vui !
[Nguồn : nekki1409.blogspot.com]
.
![[PHIM] - Bụi Đời Chợ Lớn - Full](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdU7VQgWZirEJNv-igREcvKEX-8bGWuvFv2smSPIIftPvXlKQqhLzzOe61q49neTERacRfu90u4Z_SMC5yiFeCPhnS9u01ECc57hdlka_BnCLy2BjpL1HAVVlCnEJb_z5J0A0JqwlGp0c/s72-c/bdcl.png)
