在經營Blogger一段時間後,隨著文章、分類越來越多,這時側邊工具列落落長的一整排,看起來實在很難過。
利用語法讓一大串的項目能夠展開和摺疊,就能讓版面清爽不少。
網路上我找到了兩種方法,一個是無腦安裝法,如下所示:
另一個則是自己手動加上的
我選擇了後者,Abin 前輩那裡的解說,易讀性相當高,跟著照做應該不會有什麼問題,如果你也跟我一樣剛學習使用 blogger ,你可以看一下我這篇文章,可以省走一些彎路
在 </head>之前,貼上底下 javascript程式碼。
<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
if (element[i].style.display == 'none')
element[i].style.display = 'inline';
else
element[i].style.display = 'none';
}
}
}
</script>
接著再查找想收合的widget 名稱,並插入程式碼即可。
如果你不明白 widget 是啥的話,可以看底下這篇文章:
我以常用的 文章標籤(英文:Label)為例,直接 Ctrl+F 找 <b:widget id=’Label,原則上,像我自己,只新增了一個「Label標籤」功能,所以我用<b:widget id=’Label 下去找,就直接找到了底下程式碼:
- 如果你要找的是其它功能,請自行將Label改成其它名字或是用<b:widget id=’下去查找所有的 widget。
- 你如果沒有事先從「範本」>>「網頁元素」>>「加入網頁元素」>>新增「標籤」功能,它不會出現喔。
<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/>
<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’>
…底下程式碼省略…
</b:if>
<div class=’widget-content’ id=’toggle’ style=’display:none;’>
<ul>
<b:loop values=’data:labels’ var=’label’>
…底下程式碼省略…
接下來
- 由上到下,確定第二個紫色字體等於第一個紫色字體,要相同,程式才會啟動。
- 將整段藍色字體程式碼(註解請自行去除)複製貼上到綠色字體<data:title/>的上面或下面,在上則在標題前面,反之則在後面。
- 接著把紅字複製貼上,這時你的widget 預設是收起來的,如果你希望一開始是打開的,就把style=’display:none;’ 給刪掉即可。