回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/02/02

为Blogger添加标签云

字体大小:| |
终于忍不住为Blog添加了标签云功能(演示|本Blogger没用使用,因为目前还不想用,之所以为那个Blog添加标签云是因为自己想实践一下。),用的是色彩斑斓的方法

方法还是很简单的——

修改之前请先确认自己的Blogger已经添加了“标签(Label)”小工具备份模板

Step1:
添加CSS代码。找到
]]></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}




Step2:
添加布局部分代码。仍然找到 ]]></b:skin>,但这一次我们要在它之后、Head之前添加以下代码:
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://lukexzt.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


修改红色的lukexzt为你的名字
其中关于颜色,文字大小等值可以自定义,以跟你的Blog色调搭配:
maxFontsize表示字体最大值
minFontSize表示字体最小值
minColor表示颜色最浅值
maxColor表示颜色最深值
lcShowCount 之后的false 和true 决定是否显示分类数量


Step3:
修改的是Widget本身。查找:
<b:widget id='Label1'

然后,如果你没有展开代码(推荐),只需要用以下代码替换这一行(即以“<”开头“>”结尾的代表Widget的那行代码);相反,你要替换整个Widget:(代码比较长,务必全部复制!)
<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 -----------------

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 ta=0

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])


}


}

tz = labelCount.length-1;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){


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 = lcBlogURL+'/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>




至此大功告成,保存模板。

收藏本文
相关文章:

9 评论:

Daniel 说... 回复此评论

看来还是WordPress的标签云方便~~~~

Luke 说... 回复此评论

@Daniel

是的,WP的确算是世界好最好的Blog程序了,可惜我没经历折腾空间啊,所以只能退而求其次用Blogger了.

Daniel 说... 回复此评论

不用折腾啦,弄个好主题往上放文章就OK了!

mifia 说... 回复此评论

我用了这样的设置后没有出现标签云啊,发现一保存代码里的'就变成了'

Luke 说... 回复此评论

@mifia

我重新试了遍,发现代码没有问题。

请确保:
1.Blogger已经添加了“标签(Label)”小工具并

2.Widget的代码比较长,请确认已经完全复制了。

Robin Chan 说... 回复此评论

LZ,那种彩色的标签云是怎么弄的呢?

Luke 说... 回复此评论

@Robin Chan你可以试试这个网站:
http://www.tagcloud-generator.com/index.php
我也刚想对这种彩色的标签云做个介绍呢。

Robin 说... 回复此评论

呵呵谢谢LZ的热心,那个挺网站不错的哦。

Luke 说... 回复此评论

@Robin使用导入功能的话对中文的支持不太好,所以还是手工输入标签比较好。

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。