為Blogger的sidebar加上摺疊的功能

今天將博客兩側的欄位加上了可摺疊的功能,讓版面看起來更清爽也更方便讀者檢視多樣化的內容。

若你也想為你的 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(&#39;div&#39;);
for(i = 0; i &lt; element.length; i++) {
attribute = element[i].getAttribute(&#39;id&#39;);
if(attribute == &#39;toggle&#39;)
{
if (element[i].style.display == &#39;none&#39;)
element[i].style.display = &#39;inline&#39;;
else
element[i].style.display = &#39;none&#39;;
}
}
}
</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>&ltdata: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;' 拿掉即可。

留言

fair寫道…
感謝您提供如此棒的方法,但可否請教一個問題就是有關本文縮文方式,參閱好多網友提供之方法不管是java或html均要有要data:post.body才能修改html或使java效果呈現,而我初學blog迄今約2個月,好不容易學得一些技巧,逐漸架構出還算滿意的blog,實在不想重設模板,大部分東西均要重設,可否告知是否有其它方法可達成縮文功能,謝謝!

這個網誌中的熱門文章

台灣老三台1978~1998懷舊西洋電視影集回顧

小甜甜生命中的五個男人

谷村新司的經典歌曲「昴」