【Blogger】側邊欄褶疊

看到不少blog都有這功能，可凍仁之前一直參考 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 這篇的教學一點都沒效果，不知是自己學術不精還是怎樣，後來請咕狗大神出來試了GG派：blogger 3.0:隨意摺疊任何側邊欄 的方法就可以順利褶疊，以達到簡潔版面的效果。

1. 範例

01 <b:widget id='HTML7' locked='false' title='Toolbox' type='HTML'>
02 <b:includable id='main'>
03
04 <!-- 側邊欄褶疊 區塊1 start -->
05 <script type='text/javascript'>//<![CDATA[
06 if(typeof(rnd) == 'undefined') var rnd = '';
07
08 rnd = 'rnd_html7';
09 /* 變數 rnd_html7 記得更改，且名稱不可重複，否則會出現按 b 按鈕 展開a 按鈕的bug */
10
11 rnd = 'id-' + rnd;
12 document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
13 //]]></script>
14 <!-- 區塊1 end -->
15
16 <!-- only display title if it's non-empty -->
17 <b:if cond='data:title != ""'>
18 <h2 align='right' class='title'><!--<data:title/>-->
19 <img src='http://lh3.google.com/devajonny/R7eBATwaBiI/AAAAAAAAAn8/2-3nV24AitQ/s144/Tool01_setIcon.png'/>
20 </h2>
21 </b:if>
22
23 <!-- 側邊欄褶疊 區塊2 start -->
24 <script type='text/javascript'>
25 //<![CDATA[
26 document.write('<\/a>');
27 //]]></script>
28 <!-- 區塊2 end -->
29
30 <div class='widget-content'>
31
32 <!-- 側邊欄褶疊 區塊3 start -->
33 <script type='text/javascript'>
34 //<![CDATA[
35 document.write('<div id="' + rnd + '" style="display:none;">');
36 //]]>
37 </script>
38 <!-- 區塊3 end -->
39
40 <data:content/>
41 </div>
42
43 <!-- 側邊欄褶疊 區塊4 start -->
44 <script type='text/javascript'>
45 //<![CDATA[
46 document.write('<\/div>');
47 //]]>
48 </script>
49 <!-- 區塊4 end -->
50
51 <b:include name='quickedit'/><!-- 區塊程式碼結束 -->

2. 程式碼說明

1. 01 的 HTML7 是指此表單(區塊)在Blogger裡宣告的ID
2. 01 的 Toolbox 是部落客自訂的標題
3. 01 的 HTML 是此表單在Blogger定義的表單類型
4. 08 的 rnd_html7 是變數累加的初始值，不可重複
5. 19 的 <img src='http://lh3.google.com/...Tool01_setIcon.png'/> 是凍仁把表單的標題換成圖片的部分
6. 35 的 style="display:none;" 表單預設褶疊起來，反過來說開啟 blog 首頁時，想展開的表單就把這段刪除

3. 安裝

1. 將以下 code 加到 <b:includable id='main'> 底下
   

   <!-- 側邊欄褶疊 區塊1 start -->
   <script type='text/javascript'>//<![CDATA[
   if(typeof(rnd) == 'undefined') var rnd = '';
   rnd = 'html9_rnd';
   rnd = 'id-' + rnd;
   document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
   //]]<</script>
   <!-- 區塊1 end -->
   

2. 將以下 code 加入 <div class='widget-content'> 上方。
   

   <!-- 側邊欄褶疊 區塊2 start -->
   <script type='text/javascript'>
   //<![CDATA[
   document.write('<\/a>');
   //]]></script>
   <!-- 區塊2 end -->
   

3. 將以下 code 加入 <div class='widget-content'> 下方。
   

   <!-- 側邊欄褶疊 區塊3 start -->
   <script type='text/javascript'>
   //<![CDATA[
   document.write('<div id="' + rnd + '" style="display:none;">');
   //]]></script>
   <!-- 區塊3 end -->
   

4. 最後把這邊加入 <b:include name='quickedit'/> 上方。
   

   <!-- 側邊欄褶疊 區塊4 start -->
   <script type='text/javascript'>
   //<![CDATA[
   document.write('<\/div>';);
   //]]>
   </script><!-- 區塊4 end -->
   

完成!

資料來源：
★GG派 - blogger 3.0:隨意摺疊任何側邊欄