為Blogger的sidebar加上摺疊的功能

今天將博客兩側的欄位加上了可摺疊的功能，讓版面看起來更清爽也更方便讀者檢視多樣化的內容。

若你也想為你的 Blogger 的 sidebar 加上摺疊的功能，可依照下列步驟來設定。

首先，請先備份你的範本，然後再展開小裝置範本進行修改事宜，步驟如下：

1.在<head>與</head>之間加入下面語法

<script type='text/javascript'>  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>
2. 接著找到你要折疊的元件的語法，它通常都是由開頭為<b:widget>，結尾為</b:widget>所組成的語法，舉例如下：（請留意裡頭的id名稱，下一個步驟會用到）

<b:widget id='Profile1' locked='false' title='作者介紹' type='Profile'> 　　<b:includable id='main'> 　　　<b:if cond='data:title != ""'> 　　　　<h2>&ltdata:title/></h2> 　　　</b:if> 　　　<div class='widget-content'> 　　　............. (程式內文略過) 　　</b:includable> 　</b:widget>
3. 在上述語法中<data:title/>的後面，加上下面的語法

<a href='javascript:void(0);' onclick='javascript:ElementToggle("這裡填上該元件的id");'>(+/-)</a>
(+/-)的字樣也可以改成圖片的html語法，或是其他文字，如果想要調整其位置，可以加上 style 的設定，透過 padding 、 margin 或是 text-align 來進行調整。

4. 最後把<div class=’widget-content’>這行改成下面的程式：

<div class='widget-content' id='toggle' style='display:none;'>
上面語法是預設折疊的，如果想將欄位的預設值改成展開的，請將 style=’display:none;’ 拿掉即可。