有了这个玩意儿,所写的文章加上标签后,就会按此类标签累计的数量来决定显示的大小和颜色的强烈程度,自己再回顾或者读者有选择的观看的方便程度也会大大增加.更重要的是,极大的节约了显示面积...要知道,原来的标签顺位排列可有一张纸那么长哦,像我这样动不动一篇文章标签乱加一堆的人,标签云真是解救我于水深火热之中啊!!!
补充:仅仅炫耀一下标签云而不传授方法是不道德的,我应该自罚三个俯卧撑!既然技术是偷来的,就应该大方的转手出去啊.我在做出标签云之前参照了好多网文,大部分都是一种方法,最后我是用的这位黑轮先生的方法整出来的.还有个BBoy Light的网页也有介绍,大体一样,但我怎么试就是不行.另外还有个Abin的网页,不过没有黑轮的细致.
黑轮的原文如下:
2007年4月5日 星期四
在Blogspot部落格中加上標籤雲
想在部落格裡加上標籤雲的小裝置嗎!
黑輪找了很多地方,試了很多次,就是做不成功。原來是程式碼經過多方轉載,給弄壞啦!
為了避免我也弄壞了,請先參考原出處:原英文出处
先說在前頭:因為Html語法關係,你在畫面上看到的><>都是Html語法產生的,並非真正的字元符號。建議你處理時先複製貼在記事本裡,再複製貼到要修改的地方。以免出錯!
處理方式:
1.先在你的控制主頁→範本→修改HTML中 先下載完整範本備分。以免做壞了!
2.首先找到 ]]></b:skin>
的位置,先將下列這段樣式碼複製到他的前面。
/* 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}
3.接下來在 ]]></b:skin>
與
</head>
之間,貼上下列的Script程式碼。
<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>
4.再來是最複雜的地方了。往下很大一段距哩,找到 <b:widget id='Label1'
locked='false'
title='Labels' type='Label'/> 這一段。
(如果你有勾選
展開小裝置範本,看到的會是一大段:從 <b:widget
......> 到
</b:widget>)。用下列的程式碼取代這一段。
<b:widget id='Label1' locked='false'
title='這裡放標題'
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>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 = "<data:label.name/>";
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] <
cloudMin){
continue;
}
for (var i=0;3 > 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>
5.大功告成。
感謝諸多網站部落格,讓我多次嘗試總算成功啦!
3 条评论:
加了也还是会每个都看,看的时候只会根据自己的喜好,仔细程度各不相同.可能这个就方便了你自己找东西吧.
我也想弄诶。能到诉我代码么?
OK.我更新了文章.
不是很会贴代码,建议先备份自己的模板.如果我的代码出错,请参阅台湾人的原文!
发表评论