星期四, 7月 24, 2008
讓blogger側邊欄折合
參考Abin's Tech Note小弟這邊只是給自己做備忘,如有問題或需要更詳細解說請至原作者網站發問,順便鼓勵他一下
第一，把想展開摺疊的區塊找出來，第二，做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在 <head> </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) 的程式碼。同樣以個人資料 (Profile) 元件為例，找 <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><a href='javascript:void(0);' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a>
<data:title/></h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
............. (程式內文略過不表)
</b:includable>
</b:widget>
有兩個部分要解釋一下。第一，塞入元件標題 data:title 前面的那行，就是呼叫 Javascript 的連結，其中有一個變數：Profile1，就是告訴 Javascript 你要動態切換哪一個元件，所以如果你有多個不同元件要摺疊，記得除了呼叫切換的這一行要塞入該元件原始碼中，還要更改 ID 名稱。第二個部分，<div class='widget-content'> 這行標籤開始就是元件的內容，也是要被折疊或展開的區塊，如果你希望該文件「預設」就被折疊起來，那就要在後面加入 CSS Style 去起始隱藏它，如果預設是被展開的，就把後面紅色的 style='display:none;' 部分拿掉就行了。最後，如果對以上樣式不滿意，或是想貼用圖片當切換按鈕，記得調整 <a> 連結那行的內容和位置就可以了！
張貼者：甄咖郎 於 中午12:34:00
標籤：
blogger hack
