側邊欄展開與摺疊

Blogger可以讓我們在側邊欄加上我們喜歡的元素
但是有些元素內容較多或者是我們想放的東西太多
要是側邊欄落落長看起來也很不協調
所以有人就寫了側邊欄縮展的程式

原文可以參考 Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

做法如下
1.找到</head>
</head>

2.在</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>


3.找到你想修改的元素(Widget),記得展開小裝置才找的到
4.在該元素加上收疊程式碼
<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>


紅色部分是你要新增的部分
藍色部分你必須依你自己本身作修改
[+/-]是你想要呈現字元,也可以放上圖片
Profile1是你要摺疊元素的ID
style='display:none' 指的是預設摺疊
style='display:block' 指的是預設展開

0 意見: