[Blogger設定] 將標籤改成樹狀階層式

成果：

1. 將html還還成預設值

設定前，需將html設定，還原成預設值

避免你之前有做任何html設定，如果你之前都沒有設定過html，則不需要還原成預設值

如何設定成預設值：

請在範本 → 自訂

切換至別範本儲存後，再切換成你原本想要用的範本，再按儲存

2. 設定 版面配置

設計 → 版面配置 ( 此時右上角只有文章分類，並沒有標籤 )

(原始畫面)

↓

新增標籤 ( 需選擇按字母排序 )

↓

刪除文章分類 ( 一定要刪除 )

(修改後的畫面)

3. 修改程式碼

範本 → 編輯html

↓

↓

搜尋 <b:widget id='Label1' → 選取 <b:widget 到 </b:widget>

(下圖因為有點左邊三角型，展開過一次，所以變三行，原本是一行)

用下面程式碼將剛剛選取的部份取代

<b:widget id='Label3' locked='false' title='文章分類' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<script>

var label_tree= new Object();

function tn(tag)

{

    return tag.substring(1,tag.length-1);

}

function build_node(tree,idx,cnt)

{

    if(!tree[idx[0]]){

        tree[idx[0]]=new Object();

        tree[idx[0]]['_cnt']=0;

        tree[idx[0]]['_item']=new Array();

    }

    tree[idx[0]]['_cnt'] = parseInt(tree[idx[0]]['_cnt']) + parseInt(cnt);      

    if(idx.length==1){

        return tree[idx[0]];      

    }

    return build_node(tree[idx[0]],idx.slice(1),cnt);

}

function add_label(_name,_cnt,_url,_dir)

{

    var e1 = new RegExp("\\[(.+?)\\]","g");

    var e = new RegExp("\\[(.+)\\]","g");

    var m = _name.match(e);

    var tag = _name;

   

    var obj=new Object();

    obj['tag']=_name;

    obj['cnt']=_cnt;

    obj['dir']=_dir;

    obj['url']=_url;

    if(m){

        obj['tag']= _name.substring(m[0].length,_name.length);              

        var m1 = _name.match(e1);

        if(m1){

            node=build_node(label_tree,m1,_cnt);

            if(node){          

                node['_item'].push(obj);

            }

        }      

    }

    else{

        if(!label_tree['_item']){

            label_tree['_item']=new Array();

        }

        label_tree['_item'].push(obj);

    }

}

function menu_exp(id)

{

        var ul=document.getElementById("ul_"+id);

        var li=document.getElementById("li_"+id);

        if (ul.style.display=="none"){

            ul.style.display="block"

            li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9isWaal26RHgHTDry-gxNdlomGZjoxDueuJMgPFVWh5sAQe3yBBH3HrVSbmJkcsShKXPY7YVzZ4WMbtantaUWZmU67B5M-SyIv18DqLtKwe-HRzothElX5DsUKrUvLfp6cQpegyiN6r4/)"

        }

        else {

            ul.style.display="none"

            li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELJwZ_uTJMhV4YtVqoh6XKx-dfZeW_SqPhZ4Rz-BGO8YdSoutF3YGxaL7wOqMAAKaM4FAWCQvvCHa-uSuQNFLGZKPyr7rFtpkgr3FbGI2KVAkaEqhEFdCA7rGnY5m0F-aAGdm_i001ew/)"

        }      

}

function draw_obj(obj)

{

    document.write("&lt;li style='padding-left: 0px&gt;'");

    document.write("&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR58QKDRiN2JFlhL-erR-DsysCI2MJu5p9T1itS6Xqs8XON3mruIh3zo_RyNoROrvIjYGx85Hthva9y1BgmrtVdSwSTSHWj3l6UzMKTGHCDmQLjmiV_WWz5Ac6jiwMCKRT97BTpuSyvN0/s1600/icon-yellow-bullet.png' /&gt;&lt;a dir='"+obj['dir']+"' href='"+obj['url']+"'&gt;"+obj['tag']+"&lt;/a&gt;");

    document.write("&lt;span dir='"+obj['dir']+"'&gt;("+obj['cnt']+")&lt;/span&gt;");

    document.write("&lt;/li&gt;\n");

}

function draw_tree(tree)

{

    for(var tag in tree){

        if(tag!='_item'&amp;&amp; tag!='_cnt'){

            var rid = Math.random();

            document.write("&lt;li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='font-weight:bold;padding-left: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELJwZ_uTJMhV4YtVqoh6XKx-dfZeW_SqPhZ4Rz-BGO8YdSoutF3YGxaL7wOqMAAKaM4FAWCQvvCHa-uSuQNFLGZKPyr7rFtpkgr3FbGI2KVAkaEqhEFdCA7rGnY5m0F-aAGdm_i001ew/) no-repeat left 0px;cursor: pointer'&gt;");

            document.write(tn(tag));

            document.write("("+tree[tag]['_cnt']+")");

            document.write("&lt;/li&gt;");

            document.write("&lt;ul id=ul_"+rid+" style='display:none;padding-left: 20px'&gt;");

            draw_tree(tree[tag]);

            document.write("&lt;/ul&gt;\n");

        }

    }

    if(tree['_item']){

        for(var i=0;i &lt; tree['_item'].length;i++){

            draw_obj(tree['_item'][i]);

        }

    }

       

}

</script>

<b:loop values='data:labels' var='label'>

<script>

    add_label('<data:label.name/>','<data:label.count/>','<data:label.url/>','<data:blog.languageDirection/>');

</script>

</b:loop>

      <ul>

      <script>

          draw_tree(label_tree);

      </script>

      </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

如果想要了解更多資訊，請參考下面網站

參考網址：http://licoriceguava.blogspot.tw/2014/01/5blogger.html