在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果

(Pic from: design.oneter.com)2014.9.23 公告：由於 Blogger 官方「網頁」小工具已經改版，導致本文方法失效。要在網頁小工具使用本文使用的圖片、語法技巧，請改參考「回到頂端(Go Top)按鈕放在浮動導覽列」的實作方法。

一般而言，Blogger 本文區上方的水平功能選單，提供了快速跳轉網頁的功能，這代表著每個單獨選單都是超連結。不過有時會想要把某些動態顯示的功能按鈕擺在選單上，因為選單總是比較醒目，但這些功能偏偏又不是超連結，只是一個利用按鈕來啟動的功能，那麼就無法放在選單上了，只好到後台改範本，找地方安插這些按鈕，總是比較麻煩一些。本文要提供的，便是無意中發現的密技，讓這些功能性的按鈕也能放在選單上。

2012.8.27 增補

圖片也可循本文的模式放在功能選單上，把 img 圖片語法填入標題即可，就像下圖「IE8請升級」左邊的IE圖示，只要高度不要設太高，大約 15px 即可，不過每個範本都不一樣，可以自行測試一下，若是太高會影響版面。



一、使用方式

要使用水平功能選單，先要確定已經安裝了「網頁」小工具，不過一般而言應該都會有。如果是舊範本的後台，無法使用自設的超連結，Blogger 會自動新增空白網頁，所以我們必須進入新範本的後台畫面，使用「網頁」這項功能，如下圖：



必須選擇「網址」，才能使用我們的密技！（不要選「空白網頁」）



在上圖的第一行輸入框，原本是讓我們輸入選單標題之用，例如「關於我」、「文章列表」之類的；但現在有了更高級的運用──輸入 HTML 語法。沒想到 Blogger 在這裡並沒有把語法給擋掉，現在就來測試一下使用語法功能，以「最強悍的全網頁簡繁快速轉換語法」這篇文章為例，我們來測試一下簡繁切換的語法，在上圖的第一行輸入以下程式碼：

<script src='http://wayne-fu.googlecode.com/files/WFU-ts-mix.js' type='text/javascript'></script><b onclick='this.innerHTML=(this.innerHTML=="切換為簡體")?"切换为繁体":"切換為簡體";TS_Switch();'>切換為簡體</b>
上面這些程式碼是執行一個網頁簡繁切換的功能，語法的意思就是按下「切換為簡體」這幾個字後會執行一些函數；接著上圖第二列(網址列)原本應該輸入超連結網址的地方，只要輸入 "#" 即可，這代表超連結停留在目前頁面。如此一來，在頁面不動的情況下，我們第一行輸入的 javascript 就會被執行。全部輸入完後按下「儲存」。




由於我們的內容並非正規輸入，所以會出現以上的提醒框，按確定即可。




等到資料儲存完，回到首頁一看，果然水平選單上出現了「切換為簡體」這個選單，試著按按看，就會發現我們的 javascript 被完整的執行了。可以自己試著做做看，或是看「示範網頁」。

如此一來，想要在選單上製作一些功能性的按鈕，就非常簡單了。總括來說，新拜訪者參觀我們的網頁，最容易按下的超連結，通常都會在選單上，原因當然是這個位置最醒目；所以，怎麼發揮這個功能的應用，讓訪客來點擊放在水平選單列上面的功能性按鈕，就看站長的創意了。

2012.9.3 補充

其他應用：

1. 文章列表：本站上方導覽列的「文章列表」，就是使用本文方法製作出來的動態效果文章列表。

2. 伸縮側邊欄：如果要把「伸縮側邊欄」這樣的按鈕放在導覽列也是可行的，也許參考「這篇文章」，修改一下程式碼就能實現此功能。



二、注意事項

完成這個按鈕之後，其位置必定在水平選單的最後一個，如果沒有去搬動這個按鈕位置，那麼便不會有什麼問題。一般而言，在功能選單的標題輸入語法是會被 Blogger 封鎖的，但不知為何我們按照「一、使用方式」的步驟進行時，Blogger 並不會第一時間檢查語法，所以我們才能成功地做出這個按鈕；但如果對這個按鈕做某些動作特定，Blogger 反而會去檢查語法，導致失效或跳出警告畫面，所以在其他的時間點對這個按鈕千萬不可做以下動作──

1. 編輯按鈕內容：想要變更語法內容時，若是用編輯的方式，就會發現按下「儲存」時，系統會跳出錯誤訊息，這表示 Blogger 此時會發現選單標題有非正規內容，我們之前輸入的語法怎麼樣都會儲存不了。

2. 移動按鈕位置：如果不想把按鈕放在最右邊，而用滑鼠去搬動位置，當儲存後就會發現，按鈕的功能失效了，因為系統此時會檢查網址內容，原來的 "#" 會被更改掉，就像下面的過程──



一開始的位置在最下面




用滑鼠拖到「文章列表」上面，必須按下「儲存排列方式」才能生效。




不幸的是，網址列的內容被 Blogger 更動，而且如前所述，使用編輯後，就算將 Blogger 新增的字串刪除，也是不能儲存的。


三、解決方法

想將新增的按鈕擺放到自訂位置，唯一的方法為以下步驟：



在想要插入的位置，將之後的網頁項目全部刪除，例如將「文章列表」、「三國志11留言板」這兩個網頁的超連結先複製起來，然後刪除。




按照之前的步驟新增按鈕。




再將「文章列表」、「三國志11留言板」這兩個網頁新增在按鈕後面。非常重要的一點：千萬不要按「儲存排列方式」，否則按鈕的網址就會被 Blogger 更動了。




只要不按「儲存排列方式」，網址列就不會被更動。




直接回到首頁，就可看到按鈕出現在想要的位置了。

更多 Blogger 小技巧：