WIDGET 展開/隱藏 按鈕 (簡易安裝版)

26 Oct 2013 已經更新為 " WIDGET 展開/隱藏 按鈕 進階加強 (簡易安裝版) V2 "
參考連結 http://freetongdiy.blogspot.hk/2013/10/widget_26.html

網誌的側邊欄裡, 各項"小工具", 系統叫它為 Widget.
它有一個問題, 有一些會顯示長長的.
把整個網誌, 每一篇文章都變得很長.

有不少網上教材, 可以把 Widget 關上, 需要的時候才打開.
不過, 多是需要修改後台 HTML, 不是一般用家可以處理.

 主要是新增幾個按鈕 (可設定顏色) , 按一下即展開, 再按一下即關上.

設計了一個 "簡易安裝版" 的程式, 用 HTML/Javascript 小工具掛上即可使用.

(簡易安裝方式, 按圖了解 )

程式碼 (需要內容修改, 請參考往下的 '說明')

<!-- Widget 展開/隱藏 按鈕 V1.0 -->
<!-- 設立功能, 簡化指令 -->
function open_close(X){document.getElementById(X).style.display=(document.getElementById(X).style.display=='none'?'':'none')}
function widget_close(X) {document.getElementById(X).style.display='none'}

<!-- 設定 2000ms 後隱藏 widget -->
setTimeout("widget_close('小工具 ID1')", 2000);
setTimeout("widget_close('小工具 ID2')", 2000);
setTimeout("widget_close('小工具 ID3')", 2000);
</script>

<!-- 點擊開合 widget -->
<input type="button" style="" value="文字1" onclick="open_close('小工具 ID1')" /><br/>
<input type="button" style="background-color:blue;color:white;" value="文字2" onclick="open_close('小工具 ID2')" /><br/>
<input type="button" style="background-color:black;color:yellow;" value="文字3" onclick="open_close('小工具 ID3')" /><br/>

說明

開始的2個 function , 不用修改.
open_close  ( widget 展開, 隱藏 互換功能 )
widget_close ( 隱藏 widget 功能 )

3個 setTimeout 的隱藏功能, 因應需求, 可以加多減少.
每個 widget 一開始必定是展示狀態, 設定 3000ms 後執行隱藏.
只需修改 '小工具 IDx' 為指定 widget ID.

3個 input type="button" 的按鈕轉換功能, 因應需求, 可以加多減少.
可設定 color, 使用 color name 或 HEX code 都可以. 例子中有...
style="" (系統預定)
style="background-color:blue;color:white;" (藍底 白字)
style="background-color:black;color:yellow;" (黑底 黃字)
需要修改 '小工具 IDx' 為指定 widget ID. '文字x' 為按鈕顯示文字

上文所講的 '小工具 IDx' 需要由後台 HTML 編碼中尋找, 不過 blogspot 原生的, 很容易.
步驟為 [設計]> [範本]> [編輯HTML]>
跑到最尾, 會看到很多 " <b:widget " 的東東, '小工具 ID'  可以在這裡找到.

看圖講解 e.g. (我的網誌正是處理這 3 個, 可以參考)
網誌封存 的 ID 是 'BlogArchivel1'
追蹤者 的 ID 是 'Followers1'
各路來賓 的 ID 是 'HTML1'