發佈「下拉選單安裝懶人包」一陣子後，發現會造成兩個小缺陷：1. 行動版的網頁小工具失去作用
2. 對網頁版 SEO 稍微有點影響
因為 WFU BLOG 的行動版讀者不多，因此一直未針對這件事進行調校。直到最近換了新網址後，需要重新做 SEO，所以剛好來一次解決這兩個問題。
一、下拉選單造成的影響
1. 下拉選單的原理
下拉選單通常利用 CSS 語法，將選單隱藏起來，當滑鼠經過導覽列時，觸發 hover 狀態，再執行 CSS 來顯示選單，此為下拉選單的原理。
2. 平版裝置的現象
然而在平版裝置，並不存在滑鼠、所以也沒有所謂的 hover 狀態，這導致使用者必須做「按下」的動作，行動裝置才會認定這是「hover 的狀態」。
為了在平版裝置做「按下」的動作，來顯示下拉選單，那麼超連結必須設定為井字符號 "#"，而不能設定為某個網頁的超連結，避免按下後無法觸發下拉選單，反而跑到別的網頁去了。
3. 手機裝置的現象
然而「網頁」小工具設定的超連結為 "#" 時，在 Blogger 的官方行動版，「網頁」小工具的連結就等於沒有作用→ 這造成在手機上，網頁小工具形同虛設。
4. SEO 問題
當「網頁」小工具設定的超連結為 "#"，就失去了一個可以建立連結的機會，來讓搜尋引擎爬取及建立資料。
因此，下拉選單會造成的矛盾點不少，從以上幾點就看得出來，以下試著來找出解決方案。
二、最佳方案
為了同時解決以上難題，大致要進行的動作如下：
- 製作兩個 Blogger「網頁」小工具
- 第一個指派給行動版範本使用 → 設定正常的超連結 → 然後將這個小工具在網頁版隱藏起來
- 第一個的超連結剛好可以讓搜尋引擎爬取
- 第二個供網頁版及平版裝置使用，拿來當下拉選單 → 然後將這個小工具在行動版隱藏起來
原理大致如上，經過這些步驟後，就能在所有裝置、各自展示不同的效果，以下為實作過程。
三、操作流程
1. 製作兩個 Blogger「網頁」小工具
過去「Blogger 如何安裝兩個相同的小工具？」的方法已經不需要使用在本文，因為最近 Blogger 官方進行「網頁」小工具改版，現在只要在後台 → 版面配置 → 新增小工具，就能新增多個「網頁」小工具了。
2. 調整小工具位置
額外新增一個「網頁」小工具後，用滑鼠拖曳到導覽列的區塊，假設小工具標題設為 "網頁mobile"，拉到原本「網頁」小工具的上方，如下圖──
3. 設定超連結
這個 "網頁mobile" 小工具，不是給網頁版使用，而是專給行動版使用，並兼任 SEO 用途。
因此請自行設定多組超連結，供行動版的讀者在頁面導覽之用。這部分的操作很簡單因此略過，有兩種方式：
- 從後台版面配置的畫面，按下小工具的「編輯」按鈕
- 也可從行動版的畫面，按下小工具最右邊的螺絲起子圖示
4. 設定行動版參數
接下來從後台 → 範本 → 編輯 HTML → 搜尋小工具的標題名稱，例如 "網頁mobile"，可找到這個區塊──
如上圖籃框，可看到 "網頁mobile" 的 id 為 "PageList2"(請記下自己的 id, 下個步驟會用到)，然後如圖中紅線，請加上
另外，原本的網頁小工具，位置應該在下方，也就是 id 為 "PageList1" 那一個，必須加上參數
先別存檔，動作還沒結束。
5. CSS 設定
為了讓 "網頁mobile" 這個小工具在網頁版不顯示，必須用 CSS 將其隱藏起來。請在範本中搜尋
<style>
#PageList2 {
display: none;
}
</style>以上紅色字串 PageList2 請置換為上個步驟「4. 設定行動版參數」所記下 id 字串。
到此所有動作結束，可以存檔看效果。
四、行動版參數的含意
最後補充一下「三、操作流程」→「4. 設定行動版參數」為何要如此設定。請參照「Blogger 行動版範本初探」→「三、讓小工具出現在行動範本」→ 第 2 點、第 3 點。
1. 為何行動版網頁小工具的參數設定為
2. 如果第 1 點行動版網頁小工具，參數改成設定為
3. 原始的網頁小工具，其作用為在網頁版、平板裝置執行下拉選單，因此參數設定為
或許本文概念不容易快速理解，不過由於操作步驟其實很簡單，只要依樣畫葫蘆就能完成；至少先照著操作，可以讓「網頁」小工具分別在網頁版能執行下拉選單、在官方行動版能正常運作，需要理解的部份可稍後再細究。