2015年5月24日 星期日

為Blogger的sidebar加上摺疊的功能

為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;' 拿掉即可。
 

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...