回到首頁
About Me!
字體變
字體正常
字體變小
訂閱我的RSS
捎信來

2007年2月8日 星期四

Label Clouds

常常我們會很羨慕Yahoo時尚的Label Clouds
但是如今我們自己的blog也能做到

使用此套件前,請先增加"標籤"原件
強烈建議使用前請先存檔備份
以及做以下動作時,不用展開小裝置範本


Step1.在"]]>"之前加入CSS樣式表


/* 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}


在</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>


最後請確定已經新增Blogger官方的元件"標籤",之後再收尋下面字樣。(不用展開小裝置範本)


<b:widget id='Label1'
locked='false' title='標籤' 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>


如果要換顏色可以參考顏色代碼

原文參考
Beta-Blogger-Label-Cloud

35 Comments:

Warrick DoDo 提到...

可否請問你程式碼外圍的框框是如何畫出來的?謝謝

L i n u s 提到...

不好意思請問大大一個問題...

請問..
var lcBlogURL = 'http://你的ID.blogspot.com';
這一行是代表什麼呢?

在這裡先謝謝你的教學唷 很棒 :)

hnigel 提到...

就是把那一行改成你自己網址的意思~

L i n u s 提到...

喔喔 可是我是要把這行去掉,標籤雲才會出現,不知道為什麼 很好奇@@

不好意思 這麼久才回來看:)

hnigel 提到...

真神奇@@~不過成功就好XD

L i n u s 提到...

呵呵 也是啦...
不過內心就是有那麼一點小小好奇 XD
謝謝您的教學喔 :D

hnigel 提到...

謝謝你還特地回來回覆這篇文章 : )
我都忘了說...

Jason K. 提到...

請問"在與head之間"是什麼意思呢?

另外, 你navigation icon裡面附的網址被設定限讀...

hnigel 提到...

是指HEAD以下/HEAD之上
navigation icon的作者前幾個禮拜"鎖格"了
我也不知道他什麼時候才會開放~"~

Jason K. 提到...

最後一個步驟不太make sense


b:widget id='Label1'
locked='false' title='標籤' type='Label'/>

取代為b:widget.........../b:widget

原本的那段並沒有結尾, 為何取代的要結尾? 我找其他好幾個教學也都這樣寫說.

另外我的架構原本就有b:includable id='main'........./b:includable 這段, 也要一併取代?

剛把他取代, 結果跑不出來
沒有取代的話, 就會有錯誤訊息說有兩個b:includable id='main'
用原本的話, 就跑不出來.

hnigel 提到...

我想你是展開小裝置範本了
只要把它取消掉
應該就可以使用

Jason K. 提到...

恩我現在的問題是...

Label cloud跑出來了, 連結按下去卻跑出Page Not Found...

hnigel 提到...

var lcBlogURL = 'http://你的ID.blogspot.com';

我想這個地方你沒有改到~
就快成功了~加油吧

Jason K. 提到...

好了..搞定.

回報一下是
var cloudMin = 1;
這一行我沒加到...

另外您說的那行..

我存檔都會變成
var lcBlogURL = 'http://kidd0601.blogspot.com';

很怪..

不過"暫時"ok 就好了..

hnigel 提到...

成功就好^^
老實說我也沒有去研究過他的程式怎麼寫
不過感覺真的滿實用的~

Jason K. 提到...

忘了說...

謝謝~!

感恩啊~

hnigel 提到...

XD
不用那麼客氣~小弟應該的^^

DAsnI 提到...

我用完以後只會顯示Label Cloud字樣,不會顯示標籤雲耶..@@

而且語法位置應該都沒用錯,但是有個地方...就是儲存完範本以後網址那一行都會變成var lcBlogURL = 'http://dasni.blogspot.com/';
多一堆奇奇怪怪的東西...搞不懂哪裡出了問題...

DAsnI 提到...

難不成'也是語法,會變成 ' 號...
我的問題簡單說...就是雲出不來..只有元素的title而已@@

幫我..謝謝

hnigel 提到...

應該是你哪個步驟做錯了
或是遊覽器送資料送錯了
才會出現亂碼

建議你先回覆到以前的版本
再走流程一次

DAsnI 提到...

還是都跑不出來@@

沒關係...我暫時先不用好了
還是謝謝你的教學喔!! ^^

hnigel 提到...

網路上還有另外一種是AJAX的版本
也許你可以嘗試那個版本看看~
加油吧^^

Mike 提到...

奇怪 我在widget那邊 我只要一加入 但是按下儲存之後就會變回原來的設定!?

一一 提到...

你好,因為我的模板是用現成的三欄模板
結果我在找要取代貼上的部份時
,最後面少了一個 ' / '
所以我的標籤雲一直失敗 請問有辦法補救嘛?
謝謝你!

hnigel 提到...

這個我就不清楚了@@
不好意思~

awing 提到...

我在你這裡挖到好多寶,
真的很謝謝你!

hnigel 提到...

不科氣
科科

ruby 提到...

請問一下喔~Step1.在"]]>"之前加入CSS樣式表→"]]>"是什麼?我找不到耶~可以說詳細一點嗎?謝謝~~

hnigel 提到...

修改html的地方

S 提到...

你好!我今天才剛剛把標籤雲放上,正意猶未盡四處搜尋更多小工具,接著就來到這裡,你的部落格真漂亮……=///=
請問一下,你現在用的標籤雲的漸層顏色是怎麼做的呢?實在太美了!

hnigel 提到...

改maxColor,minColor為你想要的顏色
就可以了
顏色代碼可以參考
http://www.wahart.com.hk/rgb.htm

牙牙 提到...

哈~樓上的沒說,我都沒發現標籤雲有漸層色呢!
好強喔~^^

hnigel 提到...

程式不是我寫的= =
所以也沒什麼好強的...|||

S 提到...

對不起…我實在覺得很怪,我找不到var lcBlog那行,在哪兒呀?orz

Hnigel 提到...

新版的不需要打那一行了
直接看教學就好~

張貼留言