【Blogger】標籤雲：讓你的Blogger "Labels"與眾不同

Google Blogger是一個會玩上癮的Blog平台，許多的Widget都可以自己動手添加或修改，但在每次動手修改版型的CSS時，千萬要記得一件事....
那就是請記得備份你的Template！
假如你覺得備份Template是件不要緊的事，萬一當你改壞了一些程式碼時，那時的你可能會欲哭無淚+超想打人+用力問候別人的祖宗十八代+吃"超營養香雞排"N"次....................................

所以囉...
請記得備份你的Template！


Step 1.
進入Google Blogger後台主頁，選擇【範本/Template】，再點選【修改 HTML/Edit HTML】，接著在CSS定義的部分]]>的前面，插入下面的定義程式碼：


/* Style for Label Cloud
----------------------------------------------- */
#labelCloud {
text-align: center;
}

#labelCloud .label-cloud li{
display: inline;
background-image: none !important;
padding: 0 5px;
margin: 0;
vertical-align: baseline !important;
border: 0 !important;
}

#labelCloud ul{
list-style-type: none;
margin: 0 auto;
padding: 0;
}

#labelCloud .label-count {
padding-left: 0.2em;
font-size: 9px;
color: #777;
}


Step 2.
找到</head>，在</head>之前，貼以下程式碼：

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Functions used for Label Cloud: adjustLabel(), generateLabels()-->
var labels = new Object;
function adjustLabel(min, max, weight, total) {
if (min > max)
var temp=(min-max)/Math.log(total), result=min-Math.floor(Math.log(weight)*temp);
else
var temp=(max-min)/Math.log(total), result=Math.floor(Math.log(weight)*temp+min);
return result;
}

function generateLabels(){
var blogURL = '你的Blog網址';
var maxFontSize = 18;
var minFontSize = 11;
var maxColor = [204,204,204];
var minColor = [119,119,119];
var showCount = true;

var labelColor= [];
var labelSize = 0;
var labelCount = new Array();

for (var i in labels)
if (!labelCount[labels[i]])
labelCount[labels[i]] = new Array(labels[i])

total = labelCount.length-1;
section = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';

for(var tag in labels) {
for (var i=0; i < 3; i++)
labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);

labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
li = document.createElement('li');
li.style.fontSize = labelSize+'px';

a = document.createElement('a');
a.title = labels[tag]+' articles with Label: '+tag;
a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
a.href = blogURL+'/search/label/'+encodeURIComponent(tag);

if (showCount) {
span = document.createElement('span');
span.innerHTML = '('+labels[tag]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
}
ul.appendChild(li);
ul.appendChild(document.createTextNode(' '));
}
section.appendChild(ul);
}
</script>

在這個步驟中，標記紅色的部份，是您可以自行更改字體大小、顏色的部份，若不想在文章標籤後面顯示該標籤文章數量的話，可以把
var showCount = true;
裡面的true改成false即可。

Step 3.
修改網頁元素 (Page Element)的部份，找到下面的程式碼：
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

把下面的程式碼複製貼上取代

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'> <!-- Add Label Cloud -->
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
<b:loop values='data:labels' var='label'>
labels["<data:label.name/>&quot;] = <data:label.count/>;
</b:loop>
generateLabels();
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


完成上述步驟後，先別急著存檔，先按預覽看看效果及調整你所想要的字體大小及顏色。

調整到你滿意的顯示後，再按下存檔即可！

《謎知音：寫教學文，真的很麻煩&累....》

---

2009/08/26 Update：

【Blogger】Labels標籤部份，已經有內建標籤雲的功能了，詳情請參考Skyvee所寫的設定教學文！

Blogger推出標籤雲的格式及自選標籤教學文請點我觀看～