一、安裝方式

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

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

  1. <style type='text/css'> 
  2. .Menubox_over {
  3. color: #333;
  4. font: bold 14px arial;
  5. border-top: 1px solid #777; 
  6. border-left: 1px solid #777;
  7. border-right: 1px solid #777;
  8. border-bottom: 3px solid #fffff5;
  9. border-bottom: 2px solid #fffff5\9;
  10. border-top-right-radius: 5px;
  11. border-top-left-radius: 5px;
  12. padding: 2px 5px 1px 5px;
  13. cursor: pointer;
  14. background-color: #fffff5;
  15.  
  16. .Menubox_out {
  17. color: #333;
  18. font: bold 14px arial;
  19. border-top: 1px solid #777; 
  20. border-left: 1px solid #777;
  21. border-right: 1px solid #777;
  22. border-bottom: 1px solid #777;
  23. border-bottom: 0px solid #777\9;
  24. border-top-right-radius: 5px;
  25. border-top-left-radius: 5px;
  26. padding-top: 2px;
  27. padding-left: 5px;
  28. padding-right: 5px;
  29. padding-bottom: 2px;
  30. padding-bottom: 0px\9;
  31. cursor: pointer;
  32. background-color: #ddd;
  33. </style> 
  34.  
  35. <div style="margin-top: 5px; border-bottom: 2px solid #777;">
  36. &#12288;<span class="Menubox_over" id='one1' onclick='setTab("one",1,3)'  title='顯示 1st 工具'>1st 工具</span>&nbsp;
  37. <span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='顯示 2nd 工具'>2nd 工具</span>&nbsp;
  38. <span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='顯示 3rd 工具'>3rd 工具</span> 
  39. </div><p/>
  40.  
  41. <div id='con_one_1'> 
  42. 第一個 HTML 小工具內容
  43. </div> 
  44.  
  45. <div id='con_one_2' style='display:none'>  
  46. 第二個 HTML 小工具內容
  47. </div> 
  48.  
  49. <div id='con_one_3' style='display:none'>  
  50. 第三個 HTML 小工具內容
  51. </div> 
  52.  
  53. <script> 
  54. function setTab(name,cursel,n){ 
  55.   for(var i=1; i<=n; i++){ 
  56.     var menu = document.getElementById(name + i); 
  57.     var con = document.getElementById("con_" + name + "_" + i); 
  58.     menu.className = (i == cursel) ? "Menubox_over" : "Menubox_out"; 
  59.     con.style.display = (i == cursel) ? "block" : "none"; 
  60.   } 
  61. </script>

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. 綠色的 "&#12288;" 代表兩格空格、"&nbsp;" 代表一格空格,用來排版面寬度之用,可自行更改。
  b. class="Menubox_over" 代表這是預設顯示的頁籤。如果想要把第二個小工具預設為顯示的頁籤,請把這個參數給第二個小工具。

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

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


三、結語

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