Blogger添加标签Widget

本文摘要部分：

前面介绍过如何在blogger顶部加入导航标签，以及Blogger标签云的添加，都涉及到标签的使用，下面我们再向大家介绍一下向blogger中添加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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAADxsXY4jsN0PiI7fX_GfuqiaI2J_EpHqMR24tIKvAIC09t7TZk30sYdwJZ_B8GOapk_VPRiqK-mt0uObdppEmBy5mNTojSQ0cRtoQVFxaVNBsB8RfZOEJw35YC3HCn_tdsleqIUAejf2/s1600/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEnDtHpeTjDLZUSwVoQazmFaN8zQq6qIrykybT9R7Nu4LaiPMLBregaI8QgkUFa-0K4oYO3YhxmkKy_V7tH1zAlpFX4xP9-kmCwc_tb6Z_ArVC-cM-Si6SVVxY7aq_HU7rU9Y8KB2PKxO/s1600/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyB3kT8WsGXsHQTyWInUkNND_Vb81pbB3uDL9nSXgMmuMh_zlwIEwZtBE6PYmEEb72Q9eWDGKi_S9cGDXGMgWkoMEjft2CO0fMwdbCJxtdRkVnR7qj8rzAoEGMMi1wdLzasAWRaS2aSb5/s1600/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>

其中使用到的三张图片如下：
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAADxsXY4jsN0PiI7fX_GfuqiaI2J_EpHqMR24tIKvAIC09t7TZk30sYdwJZ_B8GOapk_VPRiqK-mt0uObdppEmBy5mNTojSQ0cRtoQVFxaVNBsB8RfZOEJw35YC3HCn_tdsleqIUAejf2/s1600/list.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEnDtHpeTjDLZUSwVoQazmFaN8zQq6qIrykybT9R7Nu4LaiPMLBregaI8QgkUFa-0K4oYO3YhxmkKy_V7tH1zAlpFX4xP9-kmCwc_tb6Z_ArVC-cM-Si6SVVxY7aq_HU7rU9Y8KB2PKxO/s1600/menu.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyB3kT8WsGXsHQTyWInUkNND_Vb81pbB3uDL9nSXgMmuMh_zlwIEwZtBE6PYmEEb72Q9eWDGKi_S9cGDXGMgWkoMEjft2CO0fMwdbCJxtdRkVnR7qj8rzAoEGMMi1wdLzasAWRaS2aSb5/s1600/zoom.jpg