【Blogger】標籤雲

由於凍仁才開始寫Blog不到兩個月，CSS又不是很懂真的有門檻阿，不過還好上面分享的文章都寫的很詳細，真的要好好謝謝這些前輩，讓我們這些不懂的玩家們可以更容易及快速的上手。

以下是修改 template 的語法。

1. 在 修改HTML 裡找到 ]]></b:skin> 並把下面的 code 貼到它之前

/* 標籤雲 ------------------------------------------ */
/* 對齊方式 字型 */
#labelCloud {text-align:center;font-family:arial,cwTeX粗黑體;}
/* 顯示方式可設定成display:block ,設定背景圖片*/
#labelCloud .label-cloud li{display:inline;background:#3d3434 !important;padding:2px 2px 2px 2px ;margin:0;vertical-align:baseline !important;border: 0}
#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 {}
/*當標籤雲文章數量顯示為true 可以設定 間距 文字大小,顏色 */
#labelCloud .label-count {padding-left:0.2em;font-size:10px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. 把這段 code 貼到 </head> 之前， ]]></b:skin> 之後。

<script type='text/javascript'>
    //改成你自己的blogspot網址
    var lcBlogURL = 'http://jonnyubuntu.blogspot.com';
    var cloudMin = 1;
    //設定最大文字大小
    var maxFontSize = 31;
    //設定最熱門標籤的顏色
    var maxColor = [255,219,0];
    //設定最小文字大小
    var minFontSize = 14;
    //設定最冷門標籤的顏色
    var minColor = [220,3,0];
    //標籤雲是否要顯示文章數量 要的話請改true
    var lcShowCount = false;
</script>

3. 找到 <b:widget id='Label1' locked='false' title='Labels' type='Label'/> 用以下 code 取代它。

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

相關連結：
★Fun New Run High - 三步驟把blogger的標籤,改造成標籤雲(Tag Cloud)
★Josh`s Note - Label Clouds(標籤雲) For Blogger
★Liang's Blog - Liang's Blog~繼續閱讀、標籤雲、連結列大變身