2008-02-19

【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. 01HTML7 是指此表單(區塊)在Blogger裡宣告的ID
  2. 01Toolbox 是部落客自訂的標題
  3. 01HTML 是此表單在Blogger定義的表單類型
  4. 08rnd_html7 是變數累加的初始值,不可重複
  5. 19<img src='http://lh3.google.com/...Tool01_setIcon.png'/> 是凍仁把表單的標題換成圖片的部分
  6. 35style="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:隨意摺疊任何側邊欄

沒有留言 :

張貼留言

謝謝您的寶貴意見,凍仁一定會盡快處理 ~^^