[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具

(Pic from: jQuery TOOLS)當側邊欄的 HTML 小工具（例如最新文章、最新留言）越來越多時，如果能有個分頁功能將數個小工具合併為一欄，那麼不但側邊欄看起來清爽很多，訪客也不會覺得滑鼠滾輪好像滾不完似的。

最近想幫側邊欄裝個簡單的分頁功能，原本考慮這個簡潔、無外掛、不耗系統資源的「陽春模式」，後來看多了「jQuery Tab」的外掛又覺得陽春版有點單薄，應該要有個頁籤的圖案比較美觀些。結果這些外掛實際安裝起來才發現，有的是安裝方式繁雜，又要下載外掛、又要上傳到自己的空間、程式碼還得分批在範本中的不同區塊安裝；不然就是把「最新文章」等 HTML 小工具加進去之後，結果不知道哪裡的程式碼互相衝突而無法執行。所以弄了半天回到原點，決定動手把陽春版加工，自己用 CSS 刻出頁籤的圖案。如果你安裝側邊欄分頁功能時，也不喜歡太複雜的步驟，那麼以下是我加工後的簡易安裝程式碼與心得。





一、安裝方式

1. 請到 Blogger 後台 →「版面配置」→「新增小工具」→選擇「HTML/Javascript」

2. 標題請自填，內容請複製以下的程式碼：


2012.10.24 補充

如果安裝完發現小工具區塊的位置，似乎跟上方有一點距離，很可能是「最新回應＋留言者頭像更新版」→「二、安裝程式碼」→ 第 4 點所提的現象，可以試著把 A～AI 行的 CSS 區搬到 BB 行(也就是 HTML 與 javascript 的中間)，應該可以改善這個現象。

3. 接著填入自訂的 HTML 小工具內容──

  A. 如果跟預設一樣要塞入三個小工具，那麼依序在 AR、AV、AZ 這三個地方把小工具的程式碼貼上即可。

  B. AL～AN 紅色的文字敘述請改為自訂文字。

  C. 如果要增減小工具的數目，例如塞入 "4" 個小工具，那麼除了 AK～BA 的程式碼請按照他的邏輯來增加新的小工具內容，另外 AL～AN 紅色的參數 "3" 都要改成 "4"、AL～AY 所有藍色的參數也請改為對應的數字。

最後存檔即可，想先看效果可參考下圖──




4. 不過怎麼沒有出現標題呢？因為我覺得加上標題有點醜，如果你也不想把標題顯示出來，請按照以下步驟：

  A. 到 Blogger 後台 → 範本 → 編輯 HTML

  B. 找到剛剛新增的小工具區塊，比較快的方法是搜尋剛剛自己設定的標題名稱。

  C. 搜尋到標題名稱後，往下個三行左右，會看到下面這行程式碼──

<h2 class='title'><data:title/></h2>
可以把這一行刪除，不過建議把這一行改成以下程式碼──

<!--<h2 class='title'><data:title/></h2>-->
這樣標題名稱就不會顯示了，而且以後還是可以藉由搜尋標題名稱來找到這個區塊。或許你覺得直接把標題名稱留空白即可，但這麼做的話，除了以後很難搜尋到這個區塊，而且在側邊欄還是會顯示這一行空白喔，導致這個頁籤小工具的上方空了一行。因此為了版面好看，最好還是照以上步驟進行。

另外一點小提醒，本篇的程式碼測試環境為新版的範本，在 Chrome、FireFox、IE 下可顯示正常，如果安裝在舊範本那麼 CSS 的效果可能會不同，需要另外調整；如果你也是舊版本的範本，剛好我這個網站也是用舊範本，已經調整過參數，可看我的網頁原始碼參考 CSS 配置；如果舊範本還是不知怎麼改，再請另外提問了。

而由於每個網站的版面配置、顏色不盡相同，要調整到滿意的效果請繼續往下看細項調整這部分。



二、細項調整

刻 CSS 雖然不輕鬆，但實際上最辛酸的是做到兼容瀏覽器的過程...IE 與 FF 系不相容是一定的，但 FF 與 Chrome 也是會存在小小的差異。我已經做最大的努力讓 FF 與 Chrome 的效果差別不要太大，而 IE 不相容的部分就交給語法來處理了。以下請參照上一段的程式碼──

B：這一段是預設顯示頁籤標題的 CSS。

C～D：設定頁籤文字的顏色、字體等等。

E～G：頁籤的上、左、右框線，框線的色碼請改為自訂顏色，也就是 "#" 後面的參數。

H：頁籤的下框線，色碼請改為跟此區塊背景色 (background-color) 一模一樣的色碼，用來覆蓋掉原本的底線，造成頁籤的效果。

I：此行是 IE 專用，CSS 參數加上 "\9" 的話只有 IE 能讀。

J～K：設定頁籤左上角與右上角的圓角功能，此語法效果在 Chrome、FF 可顯示，但 IE8(含)以下跟這個圓角語法沒有緣份。

L：設定 padding 值，四個值的順序分別為上、右、下、左，其中 "下" 的值最好不要改。

N：設定顯示頁籤的背景色，最好跟這整個小工具區塊的背景色是一模一樣的，才不會有違和感。因篇幅的關係，如果不清楚怎麼找到背景色的色碼請再另外提問了。

Q～AG：這一段是預設不顯示的頁籤標題 CSS，細項可參考上述的說明。

AK：這一行設定頁籤底部那條框線的顏色。上面的 CSS 區框線顏色有改的話，這裡也要改。

AL：
  a. 綠色的 "　" 代表兩格空格、" " 代表一格空格，用來排版面寬度之用，可自行更改。
  b. class="Menubox_over" 代表這是預設顯示的頁籤。如果想要把第二個小工具預設為顯示的頁籤，請把這個參數給第二個小工具。

AM～AN：這兩行的參數都是 class="Menubox_out"，預設不顯示的所有頁籤都要加上此參數。

AQ、AU、AY：這三行的 id 編號是有規律的；而 AQ 是預設顯示頁籤的區塊，因此 style 不需要設為隱藏；而 AU 與 AY 是預設隱藏的頁籤，所以這兩行都必須設定 style='display:none'。


三、結語

這個頁籤功能雖然一樣很陽春，不過安裝簡單、該有的功能已經具備，要隨個人喜好擴充功能也是不難，例如滑鼠經過非預設的頁籤時改變背景色，或是系統有裝 jQuery 的話也可在切換頁籤時加一些特效等等，就請依照需求來修改了。


以選項卡方式顯示最近留言和文章
「讓 Blogger 側邊欄有個簡易安裝的分頁（TAB）功能」系列標題：
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症

➢➢ 快速選單： １ ２ ３ ４