2010年1月22日 星期五

Blogger 樹狀文章分類

有網友詢問如何在 Blogger 上建構樹狀文章分類。以下是設定教學。(範例演示。)

一、首先到後臺於側欄增加元件「標籤」(Labels),並按下圖設定:


其中「小測試」為我命名的大分類,並在「Selected Labels」選擇我想放於其下的眾小分類。

之後,重複如上步驟建置其他大分類。


二、在後臺編輯 HTML,勾選「展開小裝置」,在 </head> 之前貼上如下語碼:

<script type='text/javascript'>
function Toggling(id) {
  var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
  for(i = 0; i &lt; element.length; i++) {
    attribute = element[i].getAttribute(&#39;id&#39;);
    if(attribute == &#39;toggle&#39;)
    {
      if (element[i].style.display == &#39;none&#39;)
        element[i].style.display = &#39;inline&#39;;
      else
        element[i].style.display = &#39;none&#39;;
    }
  }
}   
</script>



三、在語碼中找出你的第一個大分類如下:

<b:widget id='Label1' locked='false' title='小測試' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
  <h2><data:title/></h2>
 </b:if>
 <div expr:class='"widget-content " + data:display + "-label-widget-content"'>


將以下紅字部份加上:

<b:widget id='Label1' locked='false' title='小測試' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
  <h2><a href='javascript:void(0);' onclick='javascript:Toggling("Label1");'>[+/-]</a><data:title/></h2>
 </b:if>
 <div expr:class='"widget-content " + data:display + "-label-widget-content"' id='toggle' style='display:none;'>



四、再找到其它大分類,重複步驟三。其中 Label1 字眼須改成對應的 Label2、Label3……等等。

***完畢***


關於形式修改:

1. <h2> 是預設的 Widget 標題字型,可另外透過 CSS 語法更改之。例如將「<h2> ... <h2>」改成「<span style="font-size: 16px; color: #ff0000;"> ... <span>」。

2. 可在眾大分類之上另外加個 HTML/JavaScript 或 Text 元件標示「文章分類」。

3. 若想更改 Widget 之間的間隔形式,可在後臺 HTML 中找出「.sidebar .widget, .main .widget」語碼,修改其 CSS。


註:本文提供的展開收合語碼源自 Abin's Tech Note


---
相關文章:樹狀分類土法煉鋼版(連結手動加入)。

6 則留言:

  1. 你好,請問要怎麼在「小測試」底下加上小分類eg. test
    還有要如何將文章分類成小分類的項目呢?
    謝謝囉^^

    回覆刪除
  2. 編輯文章時,右下角就有 tag(標籤)任你命名囉。

    回覆刪除
  3. 感謝這麼精闢的講解,終於………終於搞出來啦!超開心!

    回覆刪除
  4. 感謝你,雖然blogger 改版了,還是可以使用。^^
    現在目前我想做更改的應該是 怎麼讓[LABEL]與[LABEL]之間的間距變小了。
    因為如果是sidebar widget 好像是指所有的widgets嗎?

    回覆刪除
  5. 抱歉,我很久沒玩blogger了,不知道答案。可能要麻煩你請教別人喔。

    回覆刪除
  6. 對不起,試過了您的方法,但有下列訊息,無法儲存呢!


    我們無法儲存您的範本
    請修正下列錯誤,再重新提交您的範本。
    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The element type "div" must be terminated by the matching end-tag "

    回覆刪除