1. 請到 Blogger 後台 →「版面配置」→「新增小工具」→選擇「HTML/Javascript」
2. 標題請自填,內容請複製以下的程式碼:
- <style type='text/css'>
- .Menubox_over {
- color: #333;
- font: bold 14px arial;
- border-top: 1px solid #777;
- border-left: 1px solid #777;
- border-right: 1px solid #777;
- border-bottom: 3px solid #fffff5;
- border-bottom: 2px solid #fffff5\9;
- border-top-right-radius: 5px;
- border-top-left-radius: 5px;
- padding: 2px 5px 1px 5px;
- cursor: pointer;
- background-color: #fffff5;
- }
-
- .Menubox_out {
- color: #333;
- font: bold 14px arial;
- border-top: 1px solid #777;
- border-left: 1px solid #777;
- border-right: 1px solid #777;
- border-bottom: 1px solid #777;
- border-bottom: 0px solid #777\9;
- border-top-right-radius: 5px;
- border-top-left-radius: 5px;
- padding-top: 2px;
- padding-left: 5px;
- padding-right: 5px;
- padding-bottom: 2px;
- padding-bottom: 0px\9;
- cursor: pointer;
- background-color: #ddd;
- }
- </style>
-
- <div style="margin-top: 5px; border-bottom: 2px solid #777;">
-  <span class="Menubox_over" id='one1' onclick='setTab("one",1,3)' title='顯示 1st 工具'>1st 工具</span>
- <span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
- <span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='顯示 3rd 工具'>3rd 工具</span>
- </div><p/>
-
- <div id='con_one_1'>
- 第一個 HTML 小工具內容
- </div>
-
- <div id='con_one_2' style='display:none'>
- 第二個 HTML 小工具內容
- </div>
-
- <div id='con_one_3' style='display:none'>
- 第三個 HTML 小工具內容
- </div>
-
- <script>
- function setTab(name,cursel,n){
- for(var i=1; i<=n; i++){
- var menu = document.getElementById(name + i);
- var con = document.getElementById("con_" + name + "_" + i);
- menu.className = (i == cursel) ? "Menubox_over" : "Menubox_out";
- con.style.display = (i == cursel) ? "block" : "none";
- }
- }
- </script>
如果安裝完發現小工具區塊的位置,似乎跟上方有一點距離,很可能是「最新回應+留言者頭像更新版」→「二、安裝程式碼」→ 第 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 的話也可在切換頁籤時加一些特效等等,就請依照需求來修改了。