Blogger 各種 Hack 及工具教學大全

本文列出主站與分站使用的 hack 及工具。以下排列的順序依照 Blogger 執行顯示的順序：由上到下 → 由左至右

網址及標頭區塊

• 讓網站(網址)不被框架的語法：「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」
• 購買網址：「Google Domains 台灣可以使用了﹍購買 + 轉移網域(Godaddy) + DNS 設定心得」
• 標頭輪播熱門文章：「標頭 Banner 隨機輪播熱門文章」
• 變更標頭底圖(分站使用)：「隨機顯示 Blogger 標頭(banner)圖片」
• 標頭變更版面：「Blogger 標頭版面配置實作﹍圖片+標題+廣告」

導覽區塊

1. 導覽列功能選單(網頁小工具)

• 兩層下拉選單：「Blogger導覽列下拉選單﹍安裝懶人包」
• 多層下拉選單：「Blogger 多層下拉選單實作」
• 功能選單浮動置頂：「讓部落格導覽列選單能浮動置頂」
• 兩個功能選單(分站使用)：「Blogger 如何安裝兩個導覽列？」
• 回到頂端按鈕：「回到頂端(Go Top)按鈕放在浮動導覽列實作」
• 搜尋框：「在 Blogger 導覽列安裝搜尋框」

2. 文章列表極速版

• (一)依日期排列
• (二)依標籤排列
• (三)依日期排列+「讚」統計
• (四)依標籤排列+「讚」統計
• (五)依日期排列及「+1」統計

3. 公佈欄

• 置頂公告：「輕鬆打造網站置頂公告，抓住訪客注意力」
• 首頁公佈欄：「首頁公佈欄實作」── 首頁才展開公佈欄內容，其他頁面不展開內容，但有展開的按鈕。

4. 簡繁切換(分站使用)

• 「相容各大瀏覽器的全網頁簡繁快速轉換語法」
• 「讓網頁根據訪客語言設定, 自動轉換簡繁文字」

5. 404 頁面導覽

• 「404 錯誤頁面的友善設計」

文章本文區塊

1. 增加使用者體驗

• 大綱區塊：「Blogger 文章自動產生大綱索引錨點區塊」
• 文章當成展示(DEMO)頁面：「讓 Blogger 有快速載入的展示(DEMO)頁面」
• 放大文字：「讓訪客能自行放大網頁文字，提升友善閱讀體驗」
• 切換色盲模式：「有助於色盲使用者的網頁設計 (2)實作範例」

2. 圖片相關

• 文章封面圖-1：「Blogger 文章封面圖 (縮圖) 的各種呈現方式」
• 文章封面圖-2：「選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)」
• 圖片延遲載入外掛：「Lazy Load 安裝懶人包」
• 燈箱效果：「Fancybox 縮圖+滾輪特效﹍CDN 安裝懶人包」
• 輪播效果1：「CAMERA 圖片輪播外掛」
• 輪播效果2：「Owl Carousel 圖片輪播外掛」
  
• 畫廊效果：「jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大」

3. 美化文章內容

• 文字段落加上特別的底線：「部落格文字＋各種底線圖案的完整解決方案」
• "特殊文字區塊"的完整解決方案：「部落格文章＋各種"特殊文字區塊"的完整解決方案」
• 依據不同作業系統設定較美觀的字型：「網頁中英文字型跨平台設定最佳化」
• 文字區塊展開收合：「jQuery 展開收合效果懶人包」

4. 私密文章

• 「Blogger 私密文章的偽裝方案」
• 「使用網頁小工具當私密文章的方法」

文章額外資訊區塊

1. 社交外掛

• FB 分享按鈕進階設定：「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」
• Line 分享按鈕：「網站安裝 Line 分享按鈕﹍各種行動裝置都相容的語法」
• 官方分享按鈕：「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」──除了有恢復官方分享按鈕顯示的技巧，還能自訂版面配置、新增各種熱門的社交分享按鈕，方便部落格文章被讀者宣傳。
• 扁平化按鈕：「Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果」
• FB 讚按鈕：「FB 讚按鈕最簡單安全的安裝方式」

2. 額外提供資訊

• 作者簡介：「讓 Blogger 能在文章下方顯示作者簡介」
• CSS 提示框：「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」
• 單篇文章計數器：「Blogger 單篇文章瀏覽數 V2」
• 文章更新時間：「Abin's Tech﹍增加文章更新時間 Note」
• 文章分頁+系列文章：「讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版」
• 相關文章＋縮圖：「相關文章＋任意尺寸縮圖＋更多相關文章」
• 隨機文章＋縮圖：「隨機文章 + 自適應尺寸縮圖」
• 隨機文章＋輪播：「隨機文章 V2 + 輪播效果」
  
• 延伸閱讀：「Blogger 延伸閱讀 "文字版"」
  

留言區塊

• 留言分頁：「Blogger、G+、FB 三種留言版分頁」
• 留言排序：「讓 Blogger 留言能由新到舊排序」
• 串連式留言：「留言編號及自訂版面樣式實作」
• 推文系統：「WPS 部落格推文系統發佈網頁」
• 私密留言：「WPC 私密留言系統」
• G+ 留言框：「Google+留言框﹍與其他留言外掛並存+留言提醒功能」
• FB 留言框：「Facebook 留言板安裝懶人包 V2」
• 留言欄訊息：「留言欄訊息自訂版面及樣式的方法」
• 留言頭像-CSS：「修改留言頭像尺寸及形狀的 CSS 語法」
• 留言頭像-JS：「放大留言頭像尺寸的 JS 語法」

側邊欄區塊

1. Tab 分頁功能

• Bootstrap 分頁功能：「Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用」
• 簡單安裝的 Tab 選單：「讓 Blogger 側邊欄有個簡易安裝的分頁（TAB）功能」
• 相容官方工具：「Blogger 側邊欄分頁工具﹍相容官方小工具」

2. 搜尋、訂閱、追蹤

• 站內搜尋-1：「Blogger 最強搜尋框工具﹍Ajax 動態載入」
• 站內搜尋-2：「Google 自訂搜尋」
• 一鍵訂閱到 RSS 閱讀器：「幫網頁安裝一鍵訂閱到 Feedly 的按鈕」
• Feedly 訂閱人數：「讓 Feedly 按鈕顯示訂閱人數」
• FB 粉絲頁：「簡易安裝法」、「讓 FB 粉絲團專頁在側邊欄浮動顯示」
• Instagram：「在部落格側邊欄安裝 Instagram 小工具，顯示九宮格圖片」

3. 標籤區塊

• 多層樹狀標籤：「Blogger 樹狀標籤 V2.0﹍安裝懶人包」、「Blogger 樹狀標籤 V2.1﹍切換標題模式」
• 按標籤顯示文章列表：「Blogger 標籤文章列表 V1」
• 標籤/搜尋頁面模式切換：「Blogger 標籤文章列表 V2」
• 官方標籤雲：「美化 Blogger 官方標籤雲(CSS)」

4. 熱門文章、隨機文章、最新文章

• 熱門文章＋縮圖：「Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)」
• 隨機文章＋縮圖：「隨機文章 + 自訂尺寸縮圖 (側邊欄工具)」。
• 最新文章＋縮圖：「Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式」

5. 最新回應、最新推文

• 最新回應：「Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS」
• 最新推文：「WPS 推文系統簡易安裝及使用說明」

6. 留言板

• 即時留言板：「部落格即時留言板 WYBOARD + 表情圖案」
• 官方留言板：「自製簡易 Blogger 即時留言版」

7. 網站排名、計數器

• Alexa：「Alexa 台灣網站排名貼紙」
• 官方流量統計：「兩個官方流量統計工具並存之方法」。
• Histats：「Histats 計數器操作心得」

8. 其他

• Instagram：「在部落格側邊欄安裝 Instagram 小工具，顯示九宮格圖片」
• 網誌清單：「Blogger 網誌清單的妙用及網站小圖示的調校」
• 精選文章：「Blogger 自製 "精選文章" 小工具﹍圖片版」

其他區塊

• 會員系統：「部落格會員系統」
• 分頁按鈕：「數字分頁導覽 + Ajax 動態頁面載入」
• 網站維修公告：「網站維修中 + 倒數計時功能」
• 較新/較舊文章按鈕：「Blogger 較新/較舊文章按鈕改造」
• 回到頂端按鈕：「快速回到頂端(Go Top)按鈕 + 各種動畫效果」
• FB 即時通按鈕：「在網頁擺放 FB 即時通按鈕(免裝外掛)，讓訪客線上即時聯絡」
• 版權宣告年份：「FB 社團討論串」

廣告區塊

• 「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」
• 「部落格浮動側邊欄(浮動廣告)」
• 「讓側邊欄(Adsense)廣告出現文章結尾處」

行動範本

• 「行動範本修改技巧」
• 「行動範本擺放 Adsense 技巧整理」
• 「自訂行動版範本實作」
• 「讓行動版網頁能用手指縮放螢幕大小」
• 「取消 Blogger 行動版「向左/向右滑」切換文章的功能」
• 「Blogger 相關文章 V4﹍行動版專用」

Google 工具

1. Google Analytics

• 「Blogger 與 Google Analytics 如何不追蹤自己的瀏覽量」
• 「查詢網站所有連結的點擊成效﹍GA 事件追蹤器」

2. PICASA

• 「Google Drive 當圖床對 Blogger 的不好影響﹍使用 PICASA 的三大好處」

3. 自訂搜尋

• 「Google 自訂搜尋改良版﹍兩欄式」

4. Google Drive

• 「Google Drive 外連產生器 V2﹍一秒鐘輕鬆複製連結」
• 「徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險」

5. Google 翻譯

• 全網頁翻譯：「Google 網頁翻譯工具以超連結執行」

6. Google 試算表

• 「讓新版 Google 試算表能自動寄信」
• 「讓 Google 問卷(表單)能自動計分 V2」

Blogger Hack 及 工具的原則：

• 為何部落格最好避免第三方外掛？(1) 拖累網頁速度及其他不良影響
• 為何部落格最好避免第三方外掛？(2) 如何選擇外部工具

(圖片來源: corrupteddevelopment.com, veryicon.com)