Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾

接續上一篇「自訂行動版的實作」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

本文索引

• 六、文章區塊
• 七、文末資訊區塊及分享按鈕
• 八、側邊欄區塊
• 九、頁尾

六、文章區塊

<< 以下為加值內容！請先加入會員並取得足夠點數>>

登入 Google 帳號

登出 按此加入會員現有點數 點

按此展開加值內容

七、文末資訊區塊及分享按鈕

1. 文末資訊區塊

雖然文章區塊有懶人包作法可以快速完成，但進入行動版頁面後，會發現文末資訊區塊怪怪的，無法跟網頁版一致：



如上圖，是不是跟網頁版差很多呢？我們進入後台看看 → 版面配置 → 網誌文章 → 按「編輯」，畫面如下：



就算我們把所有選項都勾選了，結果在行動版的畫面只會出現作者、發佈日期、標籤這三項而已，這是什麼原因呢？

用「Chrome 開發人員工具」檢視之後，大部分勾選的項目，其 HTML 內容都是空白，也就是 Blogger 並未執行這些項目。

實際上，如果測試官方行動版的效果，大部分的項目也都是不會執行。WFU 的推測是，Blogger 官方為了節省行動版的載入時間，文末資訊區塊原本就是設定為不執行這些項目。(另外也可參考「讓 Blogger 在文章下方顯示作者簡介」→「一、無法顯示的原因」。)


2. 社交分享按鈕

其他項目不能顯示 WFU 覺得沒什麼關係，但社交分享按鈕是非常重要的項目，一定要想辦法顯示出來。

如同前面的圖，我們勾選了「顯示分享按鈕」後仍無法顯示的原因，比其他項目複雜，除了 Blogger 不執行分享按鈕的程式碼以外，Blogger 另外還用 CSS 把這個分享按鈕設定為隱藏(display: none)，夠離奇吧！

不過這兩個原因 WFU 都已經解決了，可參考這篇「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」，請詳讀全部的流程，就能在自訂行動版顯示官方分享按鈕，並新增各種熱門社交分享按鈕，包含 Line、微博(weibo) 等等。

八、側邊欄區塊

WFU 的自訂行動版向官方行動版看齊，基本上網頁版的所有側邊欄，在行動版全部取消，以加快行動裝置的載入速度。

1. 取消小工具

取消的動作很簡單，請參考「Blogger 行動版修改技巧」→「三、讓小工具出現在行動範本」，將小工具加上參數 mobile='no'，就能讓小工具在網頁版顯示，而行動版不顯示了。



2. 保留小工具

只要你有一個側邊欄小工具沒有做取消的動作，那麼這個小工具就會出現在行動版的最底部；如果有多個小工具，就會全部擠在最下面，版面或許不太好看。因此行動版會出現的小工具，最好設定一下 CSS，讓版面寬度好看一些。

如果要建議保留哪些小工具的話，WFU 會傾向只留功能性的項目，例如「聯絡表單」、「關於我」等等，這是行動裝置訪客比較有可能關心的，其他的項目請讀者自行斟酌了。

九、頁尾

這是 WFU BLOG 網頁版的頁尾畫面：



1. 改 CSS

上方的按鈕每個寬度為 48px，到了行動版由於太大粒，6 個按鈕會擠成兩排，版面比較不好看，因此行動版的 CSS 將按鈕寬度設定為 32px，保持一排 6 粒。


2. 減少 Javascript

另外，中間那一排「Alexa 排名」、「Histats」線上人數等等功能，由於需要執行外部 JS，且在行動版屬於非必要項目，因此取消這一行。


最後完成的行動版結果，大致如下圖：



現在看起來換成中間的 6 個超連結字體看起來大了一些，畫面不太協調，且有些擁擠對吧？

下一篇會說明行動版最後的收尾，看看字體 CSS 如何調整、圖片尺寸最佳化、以及網站外掛在行動版如何取捨等主題。


加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

自訂行動版系列文章：