2007年1月20日

Label Clouds(標籤雲) For Blogger

Phydeaux3的Blog有提供如何在Blogger Beta中製作Label Clouds(標籤雲)的方法。原文如下:Setup and configuration for Blogger in Beta Label Clouds

開始之前先進入控制主頁–>範本–>修改 HTML中,下載備份template,大致上有下列幾個步驟:
  1. ]]></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}
  2. ]]></b:skin>之後、</head>之前加入下面的Java Script
    <script type='text/javascript'>
    // Label Cloud User Variables
    var lcBlogURL = 'http://YOURBLOG.blogspot.com';
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>


    其中在var lcBlogURL = 'http://YOURBLOG.blogspot.com';中將http://YOURBLOG.blogspot.com取代為自已blog的網址,maxFontSize和maxColor則分別為標籤最大字型及最大字型的顏色,而minFontSize和var minColor則分別為標籤最小字型及最小字型的顏色,字型大小以px為單位,顏色則是使用RGB色碼。

  3. 在你的template中搜尋這一段
    <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>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>
完成以上動作,就可以在Blog上看到自已的Label Clouds。
延伸閱讀:
如何將你的Label做成Tabs(分頁)
如何將你的Label做成Tabs(分頁)(續)
Label Cloud(標籤雲)進化版

12 則留言:

  1. 我的label cloud是放在文章的頂端,但是他會依label的大小排列,我想要讓他呈現不規則的排列,這要怎麼做呢?

    請連到我的網址幫忙看好嗎?謝謝。

    回覆刪除
  2. To YODA:
    Label預設的排列方式有二種,一個是按字母排序,另一個依頻率,如果你想要讓Label Cloud依不規則排列,可以選擇“按字母排序”。

    回覆刪除
  3. cool耶

    成功了

    感謝大大分享

    回覆刪除
  4. 很抱歉,我依了程序做之後,要儲存時出現這樣的訊息:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "".

    我試了很多次,也應該沒有漏掉任何語法,不知為什麼會這樣?

    回覆刪除
  5. 蛙塞
    感謝大大的教學
    我的標籤雲成功了
    改天再來試試看
    如何更改顏色好了~

    回覆刪除
  6. 我照著您的學改,也有出現標籤雲,可是點標籤雲的時候都會出現google的錯誤畫面,error 500 - bad require,以前不會有這種情況,這次重新改是因為我還原範本,可是就有問題了。

    回覆刪除
  7. 你好 想請問一下
    在第三個步驟 我發現我的template裡面沒有你說的這段耶
    有甚麼其他的方法可以替代嗎
    謝謝 ^^"

    回覆刪除
  8. 簡單且相當實用的分享
    感恩

    回覆刪除
  9. 很棒很實用的外掛工具
    值得推薦給所有部落客

    這是我的部落格
    http://theblogindeep.blogspot.com/

    回覆刪除
  10. 請問為什麼標籤雲不能顯示特殊符號呢?像是我標籤打♪,標籤也顯示正常,但是在標籤雲上就會變成♪.謝謝.

    回覆刪除