到處蒐集免費有用的軟體、線上服務、小技巧……

banner 背景來源Flicker| 點閱次數:

[筆記]標籤雲(Tag Cloud)

參考資料:phydeaux3: Code for Beta Blogger Label Cloud

  1. 加入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}
  2. 加入Javascript變數宣告(lcShowCount=true 則顯示文章數,lcBlogURL 要改成自己的連結)
    <script type='text/javascript'>
    // Label Cloud User Variables
    var lcBlogURL = 'http://YOURBLOG.blogspot.com';
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>

  3. <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 ----------------- 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 ta=0 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]) } } 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 &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 = 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>

21 留言:

mookio 提到...

你好,想請問怎麼用FEED 做留言呢?

國良先生 提到...

TO mookio
>>怎麼用FEED 做留言
如果你是指左邊欄的「最新留言」,請參考 http://bhic.blogspot.com/2006/09/blogger-beta_10.html

Wylie 提到...

您好,參照你的方法做在我BLOG上的標籤雲,在FIREFOX顯示無誤,但在IE中卻顯示不出來,並有訊息提示網頁錯誤。可否幫我找到可以修改的地方,謝謝你!!

國良先生 提到...

這是一個BUG,是function s(...)的問題。
最簡單的解法是再發佈一篇網誌,讓某一個類別的文章數大於一即可。

Wylie 提到...

謝謝你,解決了!!

Hendry 提到...

謝謝分享
另外,請問該如何(或可否)改變標籤雲中文字本身的顏色嗎?用以搭配Template的色調

木天蓼 提到...

您好,照這個做標籤雲的方式做出來的會是按照字母順序排列,但是您站上的雲是依照文章數排列,請問一下要修改哪裡才能照文章數排列呢?

國良先生 提到...

TO Hendry
文字顏色要改變以下2個顏色陣列
var maxColor = [0,0,255]; // 藍色
var minColor = [0,0,0]; // 黑色

國良先生 提到...

TO 木天蓼
把lcShowCount改成true,就會顯示文章數並依此排序
var lcShowCount = true;

木天蓼 提到...

國良先生您好,我後來試了了一下還是不行,lcShowCount的功能只是顯示文章數與否,後來在網頁元素中裡的LABEL元素裡,其實就有選項可以選要照字母或是照頻率排序了,小發現供您參考。

星子 提到...

請教是將那一行code代換,還是那一行代表的整個section換掉?
我把整個section代換,資料一直出不來
尚祈解答

星子 提到...

OK了!
原來變數的部分加的位置會被系統刪掉
所以一直不成功
奇怪的是:lcBlogURL不對怎麼也秀得出來啊???

王路 提到...

国良兄
我的是经典模版,用了你的方法还是不行。
我在这个博客上试验
http://wanglus.blogspot.com/

PowHu 提到...

請問如何設定Cloud與標題間的距離??
預設會直接置頂
想要往下一點
卻找不到要改哪裡
感謝

PowHu 提到...

剛發完就發現
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

改margin值就好了
^^;

光 提到...

親愛的國良大哥,您好。

不好意思冒昧打擾,想請教您有關label的處理方法。
我的blogspot刪除草稿以後,其中一個分類label整個不見了。我注意到刪除草稿會造成label後面()的文章數-1,但不知道要怎麼弄回來。能否請您指點一二?

非常謝謝您。

敬祝 平安快樂

國良先生 提到...

TO 光
如果某個分類沒有文章或草稿,分類就會自動消失。這是正常的。

光 提到...

謝謝國良大哥的回覆。

可是我那個分類標籤下有四篇文章說。我如果為那四篇文章標上其他標籤,就會出現 xxxx(4),可是就沒辦法用原來的標籤。
如果po新文在該消失的標籤下時,那麼會出現 "該標籤"(1),實際上應為5篇文章。更奇怪的是,消失在主頁的四篇文章用日期點入全文的下面,會顯示那個不在主頁顯示的標籤。

請問有辦法讓label重讀或reset嗎?謝謝您。

敬祝 平安快樂

國良先生 提到...

TO 光
可否留你的網址,這樣比較容易處理。

光 提到...

國良大哥,謝謝。
請問可以寫信給您嗎?
我有點害羞說...

國良先生 提到...

TO 光
klcintw{AT}gmail.com