2012年4月29日

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

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

Wayne Fu 0 A+

(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 小技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP