针对标签的Hack恐怕是Blogger中最多的了吧，如以前的将标签变为导航栏，以下拉菜单展示标签等。这一次我们要做一个Widget，读者可以选择自己喜欢的标签形式。一共有三种样式，Blogger默认、菜单、放大类型。
Step0:备份模板。
Step1:如果你已经添加了标签，请在Page Elements里将它先去除。然后Edit Html（无须展开Widget），找到Label区域，会看到类似代码：<b:section class='sidebar' id='sidebar' preferred='yes'>
将下面的代码复制/粘贴到上面的代码之后：
<!-- 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/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://sunrrr.googlepages.com/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://sunrrr.googlepages.com/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://sunrrr.googlepages.com/zoom.jpg'/></a>
<b><a href=''></a></b><br/><br/>
<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>
<script language='javascript' type='text/javascript'>
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
zoomStyle();
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
另外你也可以单独添加Zoom类型的标签，需要以下代码：
<!-- Zoom style labels -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Labels</h2><br/>
<div class='widget-content'>
<script language='javascript' type='text/javascript'>
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);
document.write("<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;
</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
其中用到的三张图片请自己下载保存，并修改代码中的地址
http://sunrrr.googlepages.com/list.jpg
http://sunrrr.googlepages.com/zoom.jpg
http://sunrrr.googlepages.com/menu.jpg
){kind=link}
