天地創造

Category: 未分類

Blogspot教學：雲標籤

相信有不少人使用blogspot網站，它提供的網誌服務為人熟悉，使用簡單，受到不少人讚賞。

其實blogspot可以透過修改模版的方式來增加額外功能，在這裡將會逐一提供這些教學，現在首先介紹一下雲標籤功能。

雲標籤功能就是把所有用過的tag放在一欄中，方便用戶搜尋所需要的文章，是一個不錯的功能。

新增雲標籤的教學：

1. 首先要加入一個名為Labels的網頁元素

2. 在版面配置->修改 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;
}

3.繼續在該頁尋找</head>，在</head>之上加上以下字句(紅色部分中的數字可自行修改)

 <script language='javascript' type='text/javascript'>  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 = ‘(網誌的地址) ‘;
var maxFontSize = 18(最大字型);
var minFontSize = 11(最小字型);
var maxColor = [204,204,204](最多使用tag的顏色);
var minColor = [119,119,119](最小使用tag的顏色);
var showCount = true(是否顯示tag使用過幾多次);

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>

4. 修改在第一步中的網頁元素，用以下字句取代：

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'>  <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/>"] = <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>