WFU BLOG
Blogger 調校資料庫
本站Hack及工具 CC0免費圖庫 Blogger問到飽 Blogger架站流程
首頁 網站導覽 BLOGGER GOOGLE 部落格 網路雲端 會員中心 關於/諮詢
2012年9月2日
Blogger 各種 Hack 及工具教學大全
Wayne Fu Wayne Fu 公告 20024 A+ 色
本文列出主站與分站使用的 hack 及工具。以下排列的順序依照 Blogger 執行顯示的順序：由上到下 → 由左至右
網址及標頭區塊
讓網站(網址)不被框架的語法：「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」
Blogger 轉換網址的解決方法：「Blogger 無預警轉換區域網址的影響及因應之道」
標頭輪播熱門文章：「標頭 Banner 隨機輪播熱門文章」
變更標頭底圖(分站使用)：「隨機顯示 Blogger 標頭(banner)圖片」
標頭變更版面：「Blogger 標頭版面配置實作﹍圖片+標題+廣告」
導覽區塊
1. 導覽列功能選單(網頁小工具)
兩層下拉選單：「Blogger導覽列下拉選單﹍安裝懶人包」
多層下拉選單：「Blogger 多層下拉選單實作」
功能選單浮動置頂：「讓部落格導覽列選單能浮動置頂」
兩個功能選單(分站使用)：「Blogger 如何安裝兩個導覽列？」
回到頂端按鈕：「回到頂端(Go Top)按鈕放在浮動導覽列實作」
搜尋框：「在 Blogger 導覽列安裝搜尋框」
2. 文章列表極速版
(一)依日期排列
(二)依標籤排列
(三)依日期排列+「讚」統計
(四)依標籤排列+「讚」統計
(五)依日期排列及「+1」統計
3. 公佈欄
首頁公佈欄：「首頁公佈欄實作」── 首頁才展開公佈欄內容，其他頁面不展開內容，但有展開的按鈕。
4. 簡繁切換(分站使用)
「相容各大瀏覽器的全網頁簡繁快速轉換語法」
「讓網頁根據訪客語言設定, 自動轉換簡繁文字」
5. 404 頁面導覽
「404 錯誤頁面的友善設計」
文章本文區塊
1. 增加使用者體驗
文章當成展示(DEMO)頁面：「讓 Blogger 有快速載入的展示(DEMO)頁面」
放大文字：「讓訪客能自行放大網頁文字，提升友善閱讀體驗」
切換色盲模式：「有助於色盲使用者的網頁設計 (2)實作範例」
2. 圖片相關
文章封面圖-1：「Blogger 文章封面圖 (縮圖) 的各種呈現方式」
文章封面圖-2：「選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)」
圖片延遲載入外掛：「Lazy Load 安裝懶人包」
燈箱效果：「Fancybox 縮圖+滾輪特效﹍CDN 安裝懶人包」
輪播效果1：「CAMERA 圖片輪播外掛」
輪播效果2：「Owl Carousel 圖片輪播外掛」
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 粉絲團專頁在側邊欄浮動顯示」
3. 標籤區塊
多層樹狀標籤：「Blogger 樹狀標籤 V2.0﹍安裝懶人包」、「Blogger 樹狀標籤 V2.1﹍切換標題模式」
按標籤顯示文章列表：「Blogger 標籤文章列表 V1」
標籤/搜尋頁面模式切換：「Blogger 標籤文章列表 V2」
官方標籤雲：「美化 Blogger 官方標籤雲(CSS)」
4. 熱門文章、隨機文章、最新文章
熱門文章＋縮圖：「Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)」
隨機文章＋縮圖：「隨機文章 + 自訂尺寸縮圖 (側邊欄工具)」。
最新文章＋縮圖：「Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS」
5. 最新回應、最新推文
最新回應：「Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS」
最新推文：「WPS 推文系統簡易安裝及使用說明」
6. 留言板
即時留言板：「部落格即時留言板 WYBOARD + 表情圖案」
官方留言板：「自製簡易 Blogger 即時留言版」
7. 網誌清單
網誌清單當作交換連結：「Blogger 網誌清單的妙用及網站小圖示的調校」
8. 網站排名、計數器
Alexa：「Alexa 台灣網站排名貼紙」
官方流量統計：「兩個官方流量統計工具並存之方法」。
Histats：「Histats 計數器操作心得」
9. 精選文章
圖片版：「Blogger 自製 "精選文章" 小工具﹍圖片版」
其他區塊
會員系統：「部落格會員系統」
分頁按鈕：「數字分頁導覽 + Ajax 動態頁面載入」
網站維修公告：「網站維修中 + 倒數計時功能」
較新/較舊文章按鈕：「Blogger 較新/較舊文章按鈕改造」
回到頂端按鈕：「快速回到頂端(Go Top)按鈕 + 各種動畫效果」
版權宣告年份：「FB 社團討論串」
廣告區塊
「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」
「部落格浮動側邊欄(浮動廣告)」
「讓側邊欄(Adsense)廣告出現文章結尾處」
行動範本
「行動範本修改技巧」
「行動範本擺放 Adsense 技巧整理」
「自訂行動版範本實作」
「讓行動版網頁能用手指縮放螢幕大小」
「取消 Blogger 行動版「向左/向右滑」切換文章的功能」
「Blogger 相關文章 V4﹍行動版專用」
Google 工具
1. Google Analytics
「Blogger 與 Google Analytics 如何不追蹤自己的瀏覽量」
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)
FB LINE 公告
Wayne Fu
Wayne Fu 前端開發 ‧ Blogger 探研 ‧ 網站架設
歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的 Blogger 中文部落格。利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！
下方連結還有更多的 Blogger 資源及服務，如需諮詢、合作，歡迎填寫 聯絡表單 或來信：waynefu.g@gmail.com
FB 社團FB 粉絲團Blogger 論壇Blogger 工具諮詢 / 架站 / 網頁設計Blogger 架站作品集
13 則留言:
Ken Lo2013年6月14日 下午6:11
其實我一直以來都不知 hack 這個字怎樣解...
WFU 大大能夠回答我這個問題嗎？
回覆
Wayne Fu2013年6月14日 下午6:31
<4182632635174736153>(以上內容請勿刪除,從括號之後開始留言)可能還是 google 比較有正確的答案吧～我是前人怎麼用，我就跟著用啦～XD
回覆
Ken Lo2013年6月18日 下午5:51
<8987961028152483551>(以上內容請勿刪除,從括號之後開始留言)Hack 的意思，不只是『破解』的負面意義。針對某個網站、軟體、程式設計或是硬體，Hack也有『秘技』、『小技巧』、『剖析』、『外掛』、『增強』、『延伸應用』的正面意涵。
回覆
佛心老爺2013年8月22日 下午6:33
HAHA~ 不好意思~ 因為稍微修改留言所以重貼結果貼錯地方了! 真不好意思! 非常感謝您的回覆~
謝謝您提供的網址，我就是認真看完那三篇才留言的~ HAHA~
看了您的留言解決了我的疑問，日後若有問題再向您請教~ 感恩!
回覆
匿名2014年2月8日 下午10:59
大大 請問如果我想設計像這個網站的圖牆 但我不太懂語法 不知能否請教你呢??
http://akkoandtim.blogspot.tw/ 就圖牆的部分顯示和他一樣有標題*人數*讚鈕 但不要日期
謝謝
回覆
Wayne Fu2014年2月9日 下午3:05
<6283485449738584295>(以上內容請勿刪除,從括號之後開始留言)1.謝謝您提供資訊，原來這個網站用了我的「單篇文章計數器」不過拿掉我網站的連結了。
2.請問您這個案子要發包給我嗎？請參考「諮詢服務與提案合作」→「4. 客製功能」或「5. 其他類諮詢」，然後在這個網頁與我聯繫 ^^
回覆
Lee Bruce2014年6月25日 下午9:32
期待 隨機文章＋縮圖 還有 很多留言版的切換按鈕 XD
回覆
Wayne Fu2014年6月25日 下午10:08
<5148511585014384562>(以上內容請勿刪除,從括號之後開始留言)如你所見，G+ 留言框還沒恢復正常，所以我也無法發布那個留言板的功能，如你看過我前一陣子那篇文章的話：Blogger 私密留言的三種替代方案 + 聯絡表單的應用方式
「隨機文章＋縮圖」倒是應該快了，也許再兩個月吧～
回覆
Ken CHEN2014年8月16日 下午8:49
Wayne Fu你好:
我想請教一個問題,本篇文章抬頭的分類有設定快速指向該位置的功能
我嘗試上網爬文找相關資料,看到了這篇設定http://www.thephilko.com/2013/10/blogger-anchor.html
不過我操作過後發現無法像你這篇文章如此順的轉到要的位置(會重新開一次網頁)
請問你的錨點是如何設定的??
以下是我測試用的文章http://testkenchen.blogspot.tw/2014/07/blog-post.html
謝謝你!!
回覆
Wayne Fu2014年8月16日 下午9:13
<2934891507015776375>(以上內容請勿刪除,從括號之後開始留言)這主題我會寫，過一陣子就會貼出來了～
回覆
回覆
Ken CHEN2014年8月16日 下午9:21
最近剛好有幾篇文章需要這樣的功能，謝謝wayne，麻煩你了
回覆
chao zang2016年8月10日 下午6:27
你好 有好用的模板分享吗？大陆能使用的。这是我的博客www.superchao.info
回覆
Wayne Fu2016年8月11日 下午1:13
<6041140014990522873>(以上內容請勿刪除,從括號之後開始留言)不會有大陸能用的模版喔，都要再改才行。可以參考 http://www.wfublog.com/2013/06/service-suggest-cooperation.html →「2. 架設網頁版／行動版」，這裡有很多範本網站供參考。
回覆
⏩ 提問請詳細描述狀況，並附網址或截圖，如提供的資訊不足，則無法回覆。
⏩
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。
站務相關
諮詢/服務項目
架設網站流程
架站作品
熱門文章一覽
本站 HACK 及工具一覽
社群相關
加入 FB 社團
追蹤 WFU 的 FB
加入 FB 粉絲團
BLOGGER 中文論壇
CC0 粉絲團
網站資訊
專業文章：800
留言回覆：7123
總瀏覽數：5309625
BY-NC-SA 3.0 TW
2010~2019 WFU BLOG ‧ Powered by Blogger