Label Cloud

參考 phydeaux3 的
Setup and configuration for New Blogger Tag Cloud / Label Cloud

步驟如下
自訂→版面配置→修改 HTML→將下面程式碼貼到 ]]></b:skin>

之前，可以善加利用Ctrl + F 幫助尋找關鍵字。

	/* Label Cloud Styles
	----------------------------------------------- */
	#labelCloud {text-align:center;font-family:arial,sans-serif;}
	#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 a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
	#labelCloud a{text-decoration:none}
	#labelCloud a:hover{text-decoration:underline}
	#labelCloud li a{}
	#labelCloud .label-cloud {}
	#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
	#labelCloud .label-cloud li:before{content:"" !important}

view raw gistfile1.css hosted with ❤ by GitHub

→將下面程式碼貼到 ]]></b:skin>之後，</head>之前

	<script type='text/javascript'>
	// Label Cloud User Variables
	var cloudMin = 1;
	var maxFontSize = 20;
	var maxColor = [0,0,255];
	var minFontSize = 10;
	var minColor = [0,0,0];
	var lcShowCount = false;
	</script>

view raw gistfile1.css hosted with ❤ by GitHub

→找到類似
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
並且用下面程式碼覆蓋取代

	<b:widget id='Label1' locked='false' title='Label Cloud' 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'>
	// Don't change anything past this point -----------------
	// Cloud function s() ripped from del.icio.us
	function s(a,b,i,x){
	if(a&gt;b){
	var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
	}
	else{
	var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
	}
	return v
	}
	var c=[];
	var labelCount = new Array();
	var ts = new Object;
	<b:loop values='data:labels' var='label'>
	var theName = &quot;<data:label.name/>&quot;;
	ts[theName] = <data:label.count/>;
	</b:loop>
	for (t in ts){
	if (!labelCount[ts[t]]){
	labelCount[ts[t]] = new Array(ts[t])
	}
	}
	var ta=cloudMin-1;
	tz = labelCount.length - cloudMin;
	lc2 = document.getElementById('labelCloud');
	ul = document.createElement('ul');
	ul.className = 'label-cloud';
	for(var t in ts){
	if(ts[t] &lt; cloudMin){
	continue;
	}
	for (var i=0;3 &gt; i;i++) {
	c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
	}
	var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
	li = document.createElement('li');
	li.style.fontSize = fs+'px';
	li.style.lineHeight = '1';
	a = document.createElement('a');
	a.title = ts[t]+' Posts in '+t;
	a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
	a.href = '/search/label/'+encodeURIComponent(t);
	if (lcShowCount){
	span = document.createElement('span');
	span.innerHTML = '('+ts[t]+') ';
	span.className = 'label-count';
	a.appendChild(document.createTextNode(t));
	li.appendChild(a);
	li.appendChild(span);
	}
	else {
	a.appendChild(document.createTextNode(t));
	li.appendChild(a);
	}
	ul.appendChild(li);
	abnk = document.createTextNode(' ');
	ul.appendChild(abnk);
	}
	lc2.appendChild(ul);
	</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>

view raw gistfile1.css hosted with ❤ by GitHub

剛剛稍微玩了一下，一下子就過了兩個小時，不過用起來還真有趣，也參考不少blog的文章，真是好玩。