為Blogger的sidebar加上摺疊的功能
今天將博客兩側的欄位加上了可摺疊的功能，讓版面看起來更清爽也更方便讀者檢視多樣化的內容。
若你也想為你的 Blogger 的 sidebar 加上摺疊的功能，可依照下列步驟來設定。
首先，請先備份你的範本，然後再展開小裝置範本進行修改事宜，步驟如下：
1.在<head>與</head>之間加入下面語法
2. 接著找到你要折疊的元件的語法，它通常都是由開頭為<b:widget>，結尾為</b:widget>所組成的語法，舉例如下：（請留意裡頭的id名稱，下一個步驟會用到）
3. 在上述語法中<data:title/>的後面，加上下面的語法
(+/-)的字樣也可以改成圖片的html語法，或是其他文字，如果想要調整其位置，可以加上 style 的設定，透過 padding 、 margin 或是 text-align 來進行調整。
4. 最後把<div class='widget-content'>這行改成下面的程式：
上面語法是預設折疊的，如果想將欄位的預設值改成展開的，請將 style='display:none;' 拿掉即可。
若你也想為你的 Blogger 的 sidebar 加上摺疊的功能，可依照下列步驟來設定。
首先，請先備份你的範本，然後再展開小裝置範本進行修改事宜，步驟如下：
1.在<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>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><data: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;' 拿掉即可。
沒有留言:
張貼留言