Blogger V3.0：标签Widget

针对标签的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/> &gt; max)

max = <data:label.count/>;

if (<data:label.count/> &lt; 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/> &gt; max)

max = <data:label.count/>;

if (<data:label.count/> &lt; 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