Toggle/ Untoggle Your Blogger's Sidebar

參考自abintech的Blog hack系列
要做的工作就是：

1. 把想展開摺疊的區塊找出來，
2. 做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。

打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在head標籤內)：

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

接下來，要去修改元件 (Widget) 的程式碼。同樣以個人資料 (Profile) 元件為例，找 <b:widget ...> 開頭 </b:widget> 結尾的區段，應該是類似下面這樣：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
............. (程式內文略過不表)
</b:includable>
</b:widget>

這個元件的 ID = Profile1，是範本裡用來識別該元件的方法，接下來要插入動態切換的連結，可以用圖片(此處我用[+/-]代替)

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/><a href='javascript:void(0); style='float:right;margin:-23px 0;' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a></h2>
</b:if> <div class='widget-content' id='toggle' style='display:none;'>
............. (程式內文略過不表)
</b:includable>
</b:widget>

搞定 !