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