Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

Blogger 的行動版網頁，呈現方式可以有三種選擇：

1. 自適應網頁 (RWD)
2. 官方行動版
3. 自訂行動版

該使用哪一種，可根據你的網站屬性，參考「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」→「四、你適合哪一種選項？」來抉擇。

最近 WFU BLOG 完成了「自訂行動版」的大工程，不過為何排除了 "官方行動版" 與 "RWD" 呢？考量的因素大致有這些：

• RWD 範本內容比較肥大，會使行動裝置載入時間過久，帶來較差的使用者體驗。
• 原本一直使用的官方行動版範本，版面簡潔、使用者體驗佳、不需管理成本。可惜版面效果跟網頁版不一致，不像同一個網站。
• 如果網站屬性為純粹的內容分享網站，那麼使用 Blogger 官方行動版的影響不大。不過若是經營個人品牌、形象網站，那麼使用 Blogger 自訂行動版，可讓版面風格一致，對品牌有加分的效果。
• 使用自訂行動版後，可以自行修改許多官方行動版做不到的事，優點算是不少，後面的實作內容會詳述。

如果你也決定要改造行動版的頁面，可先閱讀「Blogger 行動版範本修改技巧」有個初步概念，最好也具備基本的 HTML / CSS / Javascript 概念，接下來可參考本文我的實作過程，相信會有所助益。

如果自行修改範本有困難，或自訂行動版這件事想節省時間、由本站代為處理，可再與我聯繫。

一、自訂行動版的目標

WFU 自訂行動版想達到的目的有兩個：版面風格一致、提升行動裝置的網頁載入速度。

1. 版面

行動版與網頁版的版面要一致，可以說很容易，也可以說是很麻煩，聽起來似乎很矛盾？

容易的部分：

只要在後台將行動版範本設為 "自訂" 後，就算什麼事也沒做，行動版的頁面就自動成為網頁版了，那麼版面的所有配色、圖案全部都相同，自然可以說是很容易了。


麻煩的部分：

• 行動版的頁面寬度最小為 320px，而網頁版可能是寬 1024px 以上，各個區塊勢必得進行 CSS 的調整，需要有 CSS 的概念。
• 行動版與網頁版的文章區塊，在範本中是不同的內容，需要有 HTML/CSS/JS 的概念，才能自行調整。

如果熟悉範本修改的話，有兩種方式進行：

• 利用 Blogger 判斷式，設定行動版的 CSS 版面
• 區塊寬度不使用固定值(例如像素 px)，改用百分比設定，達到自動調整的目的

2. 速度

官方行動版範本速度快的主因為，去除了所有側邊欄、及大部分的額外功能。其實行動版就是需要這樣的設計，手機的螢幕面積小，塞太多外掛、小按鈕也看不清楚或不好按，且行動裝置使用者主要的目的就是查詢資料，若頁面充斥太多額外資訊也沒時間或心情去看。

因此我的自訂行動版以仿效官方行動版為主，去除網頁版所有側邊欄、及不必要的 js 外掛(例如瀏覽數、線上人數等等)，只增加一些必要的額外資訊、分享按鈕等等，以減少行動版範本的載入時間。

二、自訂行動版的優點

官方行動版是綁死的，無法做任何版面調整、也無法裝任何的外掛，因此自訂行動版可以做到一些官方行動版做不到的事，以下是我增加的一些功能，也可算是自訂行動版的優點：

1. Adsense 廣告

官方行動版的 Adsense 廣告，位置及尺寸都是綁死的，不一定是最好的配置。使用自訂行動版後，可以隨心所欲使用大尺寸、放在任何想要的位置，更能增加收益。


2. 社交分享按鈕

官方行動版的預設分享按鈕，說真的實在遜，數量又少。可以自訂後，當然是所有想安裝的分享按鈕全部放上去囉！


3. Histats 計數器

官方行動版無法安裝任何外掛，自然「Histats 計數器」也就無法統計行動版的流量。現在可以自訂後，Histats 數據就比較真實了。


4. 提供額外資訊

在文章結束處放「系列文功能」、「相關文章」這類的資訊可以增加訪客停留在我們網站的機會，使用自訂行動版，就可在文章結束處放各種額外的資訊，提供給訪客參考。

三、標頭區塊

在開始之前，確定你已經詳讀了「備份範本的訣竅」系列文章，並且有 HTML/CSS 的基礎。

以下開始實作的內容，網頁區塊從由上到下來敘述。




上圖為原本的網頁版標頭，寬度約 980px，放了一些導覽用的按鈕。但這樣的寬度及按鈕數量，不好移植到行動版。




於是行動版將按鈕移除，而 Logo、網站標題及敘述，改為置中顯示。

修改範本的要訣主要有兩點，而修改其他區塊同樣可參考：

• 參考「Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本﹍(3) 文章及留言區塊的程式碼」來找到範本中對應區塊的程式碼。
• 參考「Blogger 行動版範本修改技巧」，使用判斷式來增加行動版的 HTML / CSS / JS 程式碼。

四、導覽列區塊

如果沒有使用「下拉選單」的話，那麼可以跳過這個章節，因為沒有下拉選單的導覽列，行動版是能正常運作的。如果使用了下拉選單，會導致行動版的導覽列項目，按下去沒有作用，那麼就必須為行動版另外做一個導覽列。

簡單說明一下原理：

• 假設網頁版的導覽列為 A，另外做一個導覽列 B。
• 將 A 區塊在範本中的參數設定為 mobile='no'，將 B 區塊在範本中的參數設定為 mobile='yes' → 代表 A 只會在網頁版顯示，B 在兩個版本都會顯示。
• B 必須只在行動版顯示，因此利用判斷式，讓 B 在網頁版隱藏 (display: none)
• 然後 B 的導覽列項目另外設定，專供行動版使用即可。

以上流程光看敘述也許不是很明瞭，詳細實作方法請參考這兩篇文章：

• 修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅
• Blogger 行動版如何讓 Adsense 最佳化 → 四、版面配置的異常現象 → 五、解決行動版版面配置問題

會引述第二篇文章，主要在說明若將導覽列設定為 mobile='only' 時，會引起行動版版面配置的問題。因此前面的操作流程，將 B 區塊設定為 mobile='yes'，是繞遠路的方法，不過是目前唯一不會出錯的方法。

五、Adsense 廣告

如前所述，官方行動版的 Adsense 廣告，不一定是最好的配置，本站的行動版做了以下改變：



1. 如上圖，將最上方的 320 x 50 廣告，改放到導覽列下方，且尺寸改為 320 x 100。

2. 在文章中各種位置能安插 Adsense 廣告。

詳細的操作流程，請參考這篇「Blogger 行動版如何讓 Adsense 最佳化」。


由於篇幅的關係，文章區塊及側邊欄、其他區塊的修改，請見下一篇的內容。

自訂行動版系列文章：