Blogger／Blogspot 版面設計教學與網頁技術收錄（三）

這是 Blogger 教學綜合收錄第三篇。我們網站舊版實際上是建構在 Google 的 Blogger 系統。雖然 Blogger 具備有方便與安全的優點，但是自由度也會稍微受到約束。不過 Google 讓我們在版面規劃的部份，具有相當高度的自由，因此我們可以依照自己的想法，讓部落格更俱個人風格。

下面我將針對網路上，談到 Blogger 版面設計與應用的許多零碎資料，重新進行整理、驗證與分類，希望對大家有用。:)

修改前請注意，一旦修改 HTML 內容，原本“版面配置”中的“網誌文章”的“編輯內容”，將會停止使用者再更新。如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成（但是新模板不一定支援）。建議大家在做任何修改前，務必先行備份範本，或是弄個測試網站先做測試呦。

Random Posts 隨機推薦文章（以標題文字隨機顯示部落格文章）

在小工具的新增 HTML 裡，填入下列代碼：

臉書推薦 浮動（漂浮）視窗（Recommendations Bar）

在部落格中想要安裝臉書的浮動推薦視窗（在左或右下角會自動浮起的小視窗），可將下列程式碼安裝在 HTML 編輯中，BODY 中的任意位置：

其中，X% 表示文章頁面被捲動到全頁面的百分比，則浮動視窗自動開啟，X 可填入50，或者，將 X% 更改成「onvisible」，表示當網頁中，存放「fb-recommendations-bar」代碼的位置顯示在視窗上時，浮動視窗即自動開啟。

注意，在使用本方法前，要先安裝 Facebook 留言板中，在 Get Code 時，上半部取得的程式碼（我一般都會裝，所以是將該段程式碼直接放在新增小工具的 Html/JavaScript Widget 中，這樣就不用每次安裝新板型都得重貼一次。）。

在文章側邊固定位置處浮動的社群分享視窗

進入部落格的後台，在版面配置中，新增「HTML/JavaScript」小工具，並將下列程式碼貼到該小工具裡頭，如此便能在網頁上直接呈現適當的分享視窗。

提示：bottom:5% 是控制分享視窗在螢幕上的上下位置，而 margin-left:-750px 控制分享視窗在螢幕上的左右位置，可依自己喜好進行更改。

另外，下列程式提供五種社群的分享按鈕，可以個人喜好酌刪。

一、

二、

讀者常見問答 Q&A

如何在 Blogger 每篇文章自動嵌入 Facebook 按讚（Like）按鈕？（讀者 Style Rainbow）

讀者 Style Rainbow 提問：
請問要怎麼在每篇文章裡都能顯示臉書讓人按 Like？謝謝！

工字號回覆：
在 Blogger（Blogspot）系統中，若想讓每篇文章自動出現 Facebook Like 按鈕或社群分享列，最正規且有效的方式是直接寫入範本的 HTML / XML 原始碼中：

1. 定位文章內容標籤：
   進入 Blogger 後台「範本」>「編輯 HTML」，在代碼編輯器中搜尋關鍵標籤 <data:post.body/>（這是 Blogger 負責渲染文章主體內容的核心標籤）。
2. 決定按鈕擺放位置：
   • 放在文章開頭：將 Facebook 官方按讚按鈕代碼貼在 <data:post.body/> 的上方。
   • 放在文章結尾（推薦）：將代碼貼在 <data:post.body/> 的下方，這樣讀者閱讀完文章後剛好能順手按讚分享。
3. 更推薦的聚合按鈕方案：
   除了單獨嵌入 Facebook 官方按鈕外，工字號更建議搭配如 AddThis 或 ShareThis 這類多功能聚合按讚列，不僅能一次整合 Facebook、Twitter、Plurk 等多平台，還能自帶數據統計分析，版面維護上也更為乾淨俐落。

---

繼續閱讀

1. Blogger／Blogspot 版面設計教學與網頁技術收錄（一）
2. Blogger／Blogspot 版面設計教學與網頁技術收錄（二）
3. Blogger／Blogspot 版面設計教學與網頁技術收錄（四）