修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅

發佈「下拉選單安裝懶人包」一陣子後，發現會造成兩個小缺陷：

1. 行動版的網頁小工具失去作用
2. 對網頁版 SEO 稍微有點影響

因為 WFU BLOG 的行動版讀者不多，因此一直未針對這件事進行調校。直到最近換了新網址後，需要重新做 SEO，所以剛好來一次解決這兩個問題。

一、下拉選單造成的影響

1. 下拉選單的原理

下拉選單通常利用 CSS 語法，將選單隱藏起來，當滑鼠經過導覽列時，觸發 hover 狀態，再執行 CSS 來顯示選單，此為下拉選單的原理。


2. 平版裝置的現象

然而在平版裝置，並不存在滑鼠、所以也沒有所謂的 hover 狀態，這導致使用者必須做「按下」的動作，行動裝置才會認定這是「hover 的狀態」。

為了在平版裝置做「按下」的動作，來顯示下拉選單，那麼超連結必須設定為井字符號 "#"，而不能設定為某個網頁的超連結，避免按下後無法觸發下拉選單，反而跑到別的網頁去了。


3. 手機裝置的現象

然而「網頁」小工具設定的超連結為 "#" 時，在 Blogger 的官方行動版，「網頁」小工具的連結就等於沒有作用 → 這造成在手機上，網頁小工具形同虛設。


4. SEO 問題

當「網頁」小工具設定的超連結為 "#"，就失去了一個可以建立連結的機會，來讓搜尋引擎爬取及建立資料。


因此，下拉選單會造成的矛盾點不少，從以上幾點就看得出來，以下試著來找出解決方案。

二、最佳方案

為了同時解決以上難題，大致要進行的動作如下：

1. 製作兩個 Blogger「網頁」小工具
2. 第一個指派給行動版範本使用 → 設定正常的超連結 → 然後將這個小工具在網頁版隱藏起來
3. 第一個的超連結剛好可以讓搜尋引擎爬取
4. 第二個供網頁版及平版裝置使用，拿來當下拉選單 → 然後將這個小工具在行動版隱藏起來

原理大致如上，經過這些步驟後，就能在所有裝置、各自展示不同的效果，以下為實作過程。

三、操作流程

1. 製作兩個 Blogger「網頁」小工具

過去「Blogger 如何安裝兩個相同的小工具？」的方法已經不需要使用在本文，因為最近 Blogger 官方進行「網頁」小工具改版，現在只要在後台 → 版面配置 → 新增小工具，就能新增多個「網頁」小工具了。


2. 調整小工具位置

額外新增一個「網頁」小工具後，用滑鼠拖曳到導覽列的區塊，假設小工具標題設為 "網頁mobile"，拉到原本「網頁」小工具的上方，如下圖──




3. 設定超連結

這個 "網頁mobile" 小工具，不是給網頁版使用，而是專給行動版使用，並兼任 SEO 用途。

因此請自行設定多組超連結，供行動版的讀者在頁面導覽之用。這部分的操作很簡單因此略過，有兩種方式：

• 從後台版面配置的畫面，按下小工具的「編輯」按鈕
• 也可從行動版的畫面，按下小工具最右邊的螺絲起子圖示

4. 設定行動版參數

接下來從後台 → 範本 → 編輯 HTML → 搜尋小工具的標題名稱，例如 "網頁mobile"，可找到這個區塊──



如上圖籃框，可看到 "網頁mobile" 的 id 為 "PageList2"(請記下自己的 id, 下個步驟會用到)，然後如圖中紅線，請加上 mobile='yes' 這個參數。

另外，原本的網頁小工具，位置應該在下方，也就是 id 為 "PageList1" 那一個，必須加上參數 mobile='no'。

先別存檔，動作還沒結束。


5. CSS 設定

為了讓 "網頁mobile" 這個小工具在網頁版不顯示，必須用 CSS 將其隱藏起來。請在範本中搜尋 </head>，找到後，在其前一行插入以下程式碼：

<style>
#PageList2 {
display: none;
}
</style>
以上紅色字串 PageList2 請置換為上個步驟「4. 設定行動版參數」所記下 id 字串。

到此所有動作結束，可以存檔看效果。

四、行動版參數的含意

最後補充一下「三、操作流程」→「4. 設定行動版參數」為何要如此設定。請參照「Blogger 行動版範本初探」→「三、讓小工具出現在行動範本」→ 第 2 點、第 3 點。

1. 為何行動版網頁小工具的參數設定為 mobile='yes'，是因為要讓這個小工具在網頁版及行動版都能執行(就能被搜尋引擎索引連結)，但另外用 CSS 隱藏起來(在網頁版就不會顯示)。

2. 如果第 1 點行動版網頁小工具，參數改成設定為 mobile='only'，效果會不一樣 → 變成在網頁版不會執行，就不能被搜尋引擎索引連結了。

3. 原始的網頁小工具，其作用為在網頁版、平板裝置執行下拉選單，因此參數設定為 mobile='no'，讓其在官方行動版(手機)不執行。


或許本文概念不容易快速理解，不過由於操作步驟其實很簡單，只要依樣畫葫蘆就能完成；至少先照著操作，可以讓「網頁」小工具分別在網頁版能執行下拉選單、在官方行動版能正常運作，需要理解的部份可稍後再細究。

五、常見 FAQ

Q1: 我安裝了浮動導覽列，可是浮動的時候，上方會有一塊空白？

Ans: 那塊空白是行動版導覽列所引起，會跟網頁版導覽列一起連動。如果安裝了「浮動導覽列」，請到後台版面配置的畫面：



如上圖，將行動版網頁小工具，拉到「標頭」的上方，如不清楚怎麼操作，請參考「Blogger 如何安裝兩個導覽列？」的流程。

另外，請將行動版網頁小工具的參數改為 mobile='only'

Blogger 導覽列相關技巧：