此方法引用自 Abin's Tech Note實作的時候可能是因為blogger編輯器的關係，試了幾次才成功。
首先要把這段script放在<head></head>標籤裡面但是不能跟CSS樣式表區段混在一起，我是把它放在<head>標籤的正下方：
<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(真容易找到眼花)，把啟動script的按鈕放在<h2>前面(不知道為什麼我照著Abin的作法貼在<h2>裡面會出錯@@)。注意裡頭有一個變數要修改對應到該 widget 的名稱，接著在工具內容的 div 標籤中加上 id='toggle'，如果要使其一開始就折疊起來，加上style='display:none'就可以了。修改之後變成這樣：
<b:widget id='Label1' locked='false' title='Tag' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<span style='float:right;margin:3px;'><a href='javascript:void(0);' onclick='javascript:ElementToggle("Label1");' style='text-decoration:none; color:#cccccc;'>[+/-]</a></span>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
...........
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>如果要改[+/-]按鈕的樣式，或者是換成圖片，只要修改<a>裡面的內容就可以了。
沒有留言:
張貼留言