讓側邊工具列sidebar可以展開摺疊

在經營Blogger一段時間後，隨著文章、分類越來越多，這時側邊工具列落落長的一整排，看起來實在很難過。

利用語法讓一大串的項目能夠展開和摺疊，就能讓版面清爽不少。

網路上我找到了兩種方法，一個是無腦安裝法，如下所示：

「超級無腦安裝Blogger外掛功能」功能更新 by Josh

輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)! by 阿土伯

另一個則是自己手動加上的

讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling) by Abin

我選擇了後者，Abin 前輩那裡的解說，易讀性相當高，跟著照做應該不會有什麼問題，如果你也跟我一樣剛學習使用 blogger ，你可以看一下我這篇文章，可以省走一些彎路

Blogger改造 - 入門介紹＋前置動作 by iPlay99

在 </head>之前，貼上底下 javascript程式碼。

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(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>

接著再查找想收合的widget 名稱，並插入程式碼即可。

如果你不明白 widget 是啥的話，可以看底下這篇文章：

Blogger - 版面配置的網頁元素標記widget說明 by iPlay99

我以常用的 文章標籤(英文：Label)為例，直接 Ctrl+F 找 <b:widget id='Label，原則上，像我自己，只新增了一個「Label標籤」功能，所以我用<b:widget id='Label 下去找，就直接找到了底下程式碼：

1. 如果你要找的是其它功能，請自行將Label改成其它名字或是用<b:widget id='下去查找所有的 widget。
2. 你如果沒有事先從「範本」>>「網頁元素」>>「加入網頁元素」>>新增「標籤」功能，它不會出現喔。

<b:widget id='Label1' locked='false' title='文章標籤' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>

<!--=======cccccode收合功能====文章標籤========-->
<a href='javascript:void(0);' onclick='javascript:ElementToggle("Label1");'>[+/-]</a>
<!--=======cccccode收合功能====文章標籤========-->
<data:title/>

</h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
<ul>
<b:loop values='data:labels' var='label'>
…底下程式碼省略…

接下來

1. 由上到下，確定第二個紫色字體等於第一個紫色字體，要相同，程式才會啟動。
2. 將整段藍色字體程式碼(註解請自行去除)複製貼上到綠色字體<data:title/>的上面或下面，在上則在標題前面，反之則在後面。
3. 接著把紅字複製貼上，這時你的widget 預設是收起來的，如果你希望一開始是打開的，就把style='display:none;' 給刪掉即可。