Blogger 百大熱門文章排行

December 6, 2015, 8:58 pm

≫ Next: 線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤

對於第一次逛到我們部落格的陌生新訪客，沒什麼工具比得上「熱門文章」，能更快熟悉網站精華之所在。就像在首次嘗鮮的店家點餐時，如果不想踩地雷，點菜單上的 "人氣"、"推薦"、"招牌" 餐點會是安全的選擇。

Blogger 官方提供了「熱門文章」小工具，是部落格側邊欄數一數二的安裝選擇，可以吸引讀者注意力、增加停留時間。不過可惜的是，這個官方工具最多只能顯示瀏覽人數最多的前 10 名文章，對於累積了數百、上千篇文章的站長而言，我們巴不得能提供更多的人氣文章讓讀者挑選，對吧！

目前而言，要提供更多的熱門文章，只能選擇自製一途，例如參考「標頭 Banner 隨機輪播熱門文章」。另外 WFU BLOG 最近製作了「百大熱門文章排行」，效果還不錯，讀者可以試玩看看。

(圖片出處: pixabay.com)

一、熱門文章百大排行﹍側邊欄

參考了「Blogger 最新文章 V2」的版面配置，製作資料庫讓熱門文章可讀取 100 筆資料後，加入上下頁的導航功能：

在縮圖左上角標示排名引起訪客關注，右下顯示瀏覽人數，就算不是第一頁的熱門文章，只要瀏覽數夠多的話，相信讀者還是很有興趣的。

根據安裝以來的實際觀測，裝上這個工具後，訪客平均單次造訪頁數(Pages per Visit) 的確大幅增加不少！

二、熱門文章百大排行﹍網頁版

排行榜放在側邊欄時，加上縮圖拉撐了區塊高度，使得側邊欄無法一次顯示太多文章。因此 WFU 另外做了個列表式的熱門文章百大排行榜：

popular-post-100-web-page-Blogger 百大熱門文章排行

可以設定一頁顯示較多的文章數，例如 20 ~ 40 都可，同樣有上下頁切換功能。

熱門文章排行榜

網頁版也可以有不一樣的選擇，有的站長可能會想要展示熱門文章的大尺寸封面圖(縮圖)，這也是做得到的，可參考這個展示頁面：

《外科失樂園》

三、製作原理

1. 要製作百大熱門文章，首先要有儲存瀏覽數的資料庫，因此必須先製作及安裝「Blogger 單篇文章瀏覽數 V2」。

2. 如果覺得自己製作資料庫的步驟很麻煩，也可交由本站處理，請參考「部落格熱門文章排行榜」，用文末的表單與我聯繫。

3. 另外，排行的依據不一定要使用 "瀏覽數"，也可以用文章的 "按讚數"、或 "+1數" 來排行，就看站長喜歡哪一種了。

更多實用工具：

本站使用的 Blogger hack 及工具整理

聯絡表單：

↧

線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤

December 9, 2015, 7:52 pm

≫ Next: 解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

≪ Previous: Blogger 百大熱門文章排行

htmlhint-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

前陣子也許 Blogger 在測試新功能，出現了這個「Blogger 論壇」貼文提到的異狀，在後台編輯文章的畫面，出現 "您的 HTML 不被接受，結尾標記沒有對應的開頭標記" 這樣的提示訊息。

其實 Blogger 編輯文章時，如果切換到 HTML 模式，衹要語法不對，本來就會出現錯誤的提示。不過這次出現的錯誤訊息實在太誇張，滿滿的一整頁的確會讓人以為我們做錯了什麼事！

因為我沒遇到這個狀況，說不定這個 Bug 現在已經修復了。無論如何，讀者如果要確定文章中使用的 HTML/Javascript/CSS 程式碼是正確的，可以利用本文介紹的這個線上語法檢查工具，來找出所有錯誤，確保文章內容都是沒有問題的。

一、HTMLHint

html-error-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

上圖就是論壇貼文原 PO 遇到的畫面，應該是 Blogger 不小心把所有 debug 訊息都顯示了出來。

要檢查 HTML 語法錯誤的話，推薦這個線上語法檢查工具「HTMLHint」：

http://htmlhint.com/

1. 簡易操作說明

編輯 Blogger 文章時，切換到「HTML 模式」，將所有內容複製到這個線上工具，就會自動偵測語法是否正確。

html-hint-1-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

如上圖，滑鼠移到紅色打叉的位置(第 9 行)，會立即提示語法錯誤的內容。上圖提示訊息翻譯成中文的意思為：「<div> 標籤的結尾匹配失敗，第 8 行找不到 </div>」，這樣我們就知道要在第 9 行補一個 </div>。

2. 參數設定

這個工具的下方有很多參數設定，根據 Blogger 文章編輯的環境，以下是建議的參數調整：

html-hint-setting-1-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

A：取消「doctype-first」，因為 Blogger 文章用不到這個項目。

B：勾選「tag-self-close」，這樣某些標籤的偵測會比較嚴謹，例如 link標籤。

C：取消「title-require」，因為 Blogger 文章不需使用 title標籤。

做完以上調整後，貼上 Blogger 文章內容時，比較不會出現無謂的錯誤提示(實際上並不算錯誤)。

二、Javascript 偵錯

雖然 HTMLHint 這個線上工具的含意代表「HTML hint」→ "檢查 HTML 語法是否正確的提示"。不過 WFU 認為最棒的設計是，除了 HTML 之外，還能一併檢查 JS / CSS 的語法，這實在是太方便了！(懶人的最愛)

html-hint-setting-2-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

如上圖，將這兩個設定打勾，那麼貼上 JS 語法時，若有錯誤的話，也會顯示提示訊息。

javascript-hint-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

上圖為範例畫面，貼上 JS 語法時，最重要的一點，如第 1 行與第 10 行處，必須有 <script>開合標籤，不能直接貼 2~9 行的 JS 語法，否則這個工具無法辨識 JS，會當成一般字串看待。

滑鼠移到上圖三角形警示圖案，會出現提示訊息，大意是說 "避免 document.write"、"行末少了分號"。

三角形圖案並非語法錯誤，只是警告而已，代表這樣的寫法不是好的習慣，但程式還是能夠執行。

如果出現 "打叉圖案" 這就是真的錯誤，需要修改語法程式才不會當掉。

三、CSS 偵錯

css-hint-線上檢查 HTML Javascript CSS 語法工具自動偵測錯誤

上圖為範例畫面，貼上 CSS 語法時，最重要的一點，如第 1 行與第 16 行處，必須有 <style>開合標籤，不能直接貼 2~15 行的 CSS 語法，否則這個工具無法辨識 CSS。

這個範例的第 6 行是個嚴重錯誤，行末沒有分號 ";"，這一段 CSS 就無法正常執行了。滑鼠移到警告或錯誤圖示時，就可看到詳細的提示訊息。

四、小結

知道這個線上工具後，除了編輯文章時的 HTML 碼可以檢查，修改 Blogger 範本時也非常好用。

將一大段程式碼貼入範本之前，不妨先用這個工具檢查一下，否則程式碼有誤時，Blogger 範本不允許儲存也是滿麻煩的。

同時修改 Blogger 範本之前，照例需要提醒一下，請先閱讀「修改 Blogger 範本的觀念」，做好備份範本、版本控制與註解，可避免憾事發生。

更多 HTML 相關技巧：

↧

解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

December 14, 2015, 7:27 pm

≫ Next: 圖床會被大陸封鎖，Blogger 有無解決方案？

≪ Previous: 線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤

windows-live-writer-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

除了這個「Blogger 論壇貼文」詢問這件事，也有朋友在 12/11 就告訴我，Windows Live Writer(以下簡稱 WLW) 一直無法發文到 Blogger 要怎麼辦？

直接說結論，這是 Google 堅持維護安全性問題造成的影響，短期內這件事無解，不過一段時間後可望有曙光，只是要多久沒人能保證。

以下先簡單說明一下為什麼會發生這件事，同時也提供幾個變通的替代方案，讓習慣 WLW 介面的讀者能繼續操作 WLW。想直接看解答請跳至「三、用 Email 轉寄 Blogger」

(圖片出處: windowsreport.com)

一、WLW 的問題

大約半年前，WLW 發生了無法連上 Blogger 的事件，詳細始末請直接參考這篇「Windows Live Writer上傳到Blogger發生密碼錯誤的問題」以及留言，有當時這件事的解法、及官方恢復正常的記錄。

1. OAuth 1.0

簡單說明一下出事的原因，過去使用第三方軟體 (例如 WLW) 登入 Blogger 時，使用的安全驗證系統為「OAuth 1.0」。直到半年前， Google 決定改採更安全的「OAuth 2.0」，導致第三方軟體措手不及，才會發生 WLW 不能登入 Blogger 的事件，一律出現 "Blogger 傳回下列錯誤: NotFound: Not Found" 這樣的訊息。

幾天後，Google 決定網開一面，只要在你的 Google 帳號開啟「允許安全性較低的應用程式存取權限」這個設定，WLW 就能繼續登入 Blogger。這個事件代表的意義為：

Google 在過渡時期允許使用安全驗證系統「OAuth 1.0」來登入 Blogger
但是你們第三方軟體要趕快改成「OAuth 2.0」
之後 Google 全面使用「OAuth 2.0」時，不支援的第三方軟體就不能登入了

2. OAuth 2.0

直到前幾天 (2015/12/11)，根據這篇「Windows Live Writer Becomes Open Live Writer」，Blogger 工程師宣布，他們當初同意給 WLW 幾個月的時間，但從 12/11 開始，就不會再繼續支援「OAuth 1.0」，也就是說 WLW 的作用將會走入歷史。

這對使用 WLW 寫 Blogger 的使用者來說，的確是個災難，只要 WLW 不升級為「OAuth 2.0」，就永遠不能登入。畢竟 Google 給了半年的緩衝期，WLW 就是不更新我們能怎麼辦呢？

就在差不多時間，微軟釋出了「Open Live Writer」(以下簡稱 OLW)，只可惜一樣尚未支援「OAuth 2.0」。

二、OLW 的問題

想試用 OLW 的話，可從這個官網連結下載：

https://openlivewriter.azureedge.net/stable/Releases/Setup.exe

原來微軟與其說是不想更新，不如說是無力更新 WLW。對於不能賺錢的產品，還要投入資源維護，真的算是苛責微軟。若是這次了修改系統支援「OAuth 2.0」，假設萬一將來 Google 又宣布支援新規格「OAuth 3.0」怎麼辦？"軟體維護" + "客服" 是一條無止盡的路，免費只能說是佛心來的。

因此微軟宣布將 WLW 開放原始碼，並改名為 Open Live Writer 算是聰明的一步，開源後所有人都可以改程式碼，想玩的自己玩，想支援什麼規格自己寫！

也因為如此，OLW 目前只是 Beta 0.5 版，一樣尚未支援「OAuth 2.0」，才剛安裝就無法登入 Blogger 了：

open-live-writer-password-incorrect-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

如上圖，會出現 "The user name or password is incorrect" 訊息。

這樣的災情在 OLW 官方網站已經回報了非常多的案例，但是 OLW 已經沒有了(微軟)資金的奧援，其版本更新的進度與速度，我們無法要求，只能期待、並靠自己追蹤這個官方的問題回報頁面：

No connection possible with Blogger?

在 OLW 支援 Blogger 登入之前，有沒有什麼解決辦法呢？本篇提供兩種替代方案。

三、用 Email 轉寄 Blogger

習慣使用 WLW 的話，現在要發表文章，只能從 Blogger 後台編輯，而這個流程比較麻煩的是版面調整、以及插入圖片。

要解決圖片的設定問題，建議讀者可使用這個「Blogger 圖片語法轉換器」，除了有多種設定可以調整，最棒的是還能自動設定「圖片 ALT 描述」，對 SEO 很有幫助。

如果你屬於 "就是比較習慣 WLW" 的讀者，堅持用 WLW 調整文章版面的話，那麼可以參考以下流程：

1. 開啟使用電子郵件張貼功能

Blogger 後台 → 設定 → 行動裝置及電子郵件 → 使用電子郵件張貼 → 勾選「立即發佈電子郵件」

email-to-blogger-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

如上圖，填入只有自己知道的字串，再按右上角的「儲存設定」即可，之後可利用這個 email 來發文。

2. WLW 編輯文章

按照平常的方式在 WLW 編輯文章，插入圖片、調整你的版面，例如以下是文章編輯完成的畫面：

windows-live-writer-edit-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

3. 使用 Gmail 或郵件軟體

接著開啟你的郵件軟體，或是最簡單的使用 Gmail 也可以，以下用 Gmail 操作舉例：

gmail-to-blogger-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

如上圖，這是撰寫郵件的畫面：

A. 收件者填入「1. 開啟使用電子郵件張貼功能」我們自訂的 Blogger 貼文 email
B. 郵件主旨填入「文章標題」
C. 郵件內容直接複製編輯好的 WLW 文章內容、並貼上即可。

最後按左下角的「傳送」，瞬間就完成了 Blogger 貼文，並且所有圖片都自動上傳完畢了喔！

這個流程比起原本的 WLW 操作，多了幾個複製貼上的步驟，但至少文章的版面能控制得跟以往操作 WLW 時一樣。

四、用 Evernote 轉寄 Blogger

1. 操作流程

如果不拘泥於用 WLW 編輯版面的話，這裡再提供另一個替代方案，操作流程會比「WLW + 郵件軟體」更加方便。

使用「Evernote」這個記事軟體來編輯文章，除了他本身編輯功能就很強，例如：

插入表格
擷取螢幕畫面
即時編修圖片
勾選已完成事項

evernote-to-blogger-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

同時編輯完畢後，請參考上圖，只要按照以下步驟，不需寄信軟體就能直接發文到 Blogger：

A. 點選編輯好的那則記事
B. 在工具列設定「電郵」這個項目後，直接點擊進行轉寄郵件
C. 這裡的步驟跟「三、用 Email 轉寄 Blogger」→「3. 使用 Gmail 或郵件軟體」類似，分別填入「自訂的 Blogger 貼文 email」以及「文章標題」，再按下傳送即可。

2. 推薦心得

雖然 Evernote 比 WLW 方便，但不熟悉 Evernote 的讀者可能編輯文章時會遇上麻煩，且 Evernote 還是有一些限制，例如：

單篇文章轉寄的容量上限為 10MB (所以圖片數量、大小要控制)
免費版單月上傳上限為 60MB

更多其他文章編輯操作上的技巧與心得，推薦參考這篇「如何利用Evernote發文到Blogger」，相信能解決許多細部的問題。

更多 Blogger 相關文章：

↧

圖床會被大陸封鎖，Blogger 有無解決方案？

December 21, 2015, 8:02 pm

≫ Next: Adsense 廣告尺寸及版面配置優化技巧整理

≪ Previous: 解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

自從之前提出「部落格網站如何不被大陸封鎖？」的構想後，不少讀者來信詢問如何進行。如果詳細讀完這篇文章，會明白最困難的是解決圖床的問題。

關於圖床 WFU 提出了多種解決方案，而礙於篇幅的關係，上一篇無法深入說明及詳細分析。因此本篇獨立出來，除了比較各方案的利弊，也讓讀者知道，使用 Blogger 突破大陸封鎖圖床時，需要付出的機會成本有哪些。

閱讀本篇之前，請務必先瞭解上一篇「部落格網站如何不被大陸封鎖？」的概念。

一、大陸部落格 + 大陸圖床

1. 優點

這是最便宜的方案，不用花一毛錢。
圖床、網站都在大陸，開啟速度最快。

2. 缺點

最麻煩的方案，必須手動搬遷部落格的所有圖、文。
將來文章、圖片必須兩邊都進行手動更新。
大陸免費部落格通常無法安裝 JS，這也代表無法放 Adsense 廣告。

3. 小結

缺乏經費的站長，只能選擇這個最花時間、精力的方案。

二、Wordpress 架站

1. 優點

圖、文都放在自己的主機空間、管理上最方便
圖片可限制存取的網域，解決盜連問題

2. 缺點

需要自己管理、維護主機，有被駭、攻擊的危險(或是乾脆花錢請人維護網站)。
圖片越多、圖檔越大，每月的固定支出越多。
流量越大，每月的固定支出越多。

3. 小結

使用 WP 就是三個字「錢、錢、錢」，不過如果你的網站是以圖片為主體，例如 "旅遊"、"美食"、"攝影" 這類的部落格，由於圖床的需求性太高，一般的網路雲端空間無法承受，那麼沒有第二條路好走，想要不被大陸封鎖，只有 WP 這個方案而已。

三、留在 Blogger 的圖床方案

從這裡開始，才是本篇的主題，如果你沒有巨量的圖床需求，而且花得起一點小錢(非經常性支出，一次性的費用)，想留在 Blogger 突破大陸封鎖，那麼請往下看。

1. 必要條件與成本

所有圖片的總容量不能太高，例如加總在 5~8 G 以內。
需要支付處理 Blogger 突破大陸封鎖的處理費用(一次性)
需要支付處理圖床、購買空間的費用(一次性)

以上這些費用，約略估計的話大概是數 K 之譜。

2. 缺點

因為 Blogger 後台上傳的圖片放在 PICASA，會被大陸封鎖，因此以後圖片只能放在新的網路空間，處理上會稍微比較麻煩。
一些會使用到縮圖的 Blogger 工具，例如「熱門文章」、「相關文章」、「隨機文章」，預設會讀取 PICASA 格式的網址。使用新的網路空間後，只能另外寫客製程式才能使用這類工具了。
由於使用了非 PICASA 的空間，每日流量會有上限。不過如果不是以圖片為主的網站，這一點的影響則不大。
整個網站的圖片搬到新的空間，是個滿大的工程，且最好每個圖檔名稱都不同，處理上才比較不易有問題。

3. 小結

瞭解以上的限制、及需要投入的機會成本後，適合使用 Blogger 突破大陸封鎖的網站類型，大致為這些：

官方網站、形象網站
文字為主的網站
沒有大量圖片的網站
流量不算太大的網站

四、總結

已經闖出名號的部落格，例如每月 30 萬瀏覽人次，那麼建議可直接搬到 WP，相信網站的收益也足以支撐 WP 費用了。

而完全瞭解「三、留在 Blogger 的圖床方案」的所有內容、符合這些條件、願意投入這些成本、知道將來要面對處理圖片的相關問題，仍想要進行突破大陸封鎖這項任務的話，那麼可再與我聯繫。

聯絡表單：

大陸封鎖網站相關主題：

↧

Adsense 廣告尺寸及版面配置優化技巧整理

December 23, 2015, 2:18 am

≫ Next: 讓行動版網頁能用手指縮放螢幕大小

≪ Previous: 圖床會被大陸封鎖，Blogger 有無解決方案？

adsense-hot-zone-Adsense 廣告尺寸及版面配置優化技巧整理

有讀者詢問 Adsense 適合擺放的廣告尺寸，以及版面配置如何最佳化。基本上不只我們會關心這件事，應該說 Adsense 官方比我們本身更關心，因為網站的廣告收入同時也直接影響 Google 及 Adsense 的收益(可抽成 32%)。為了賺更多錢，Adsense 官方的立場一定是想辦法教會所有站長，任何有關廣告配置優化的知識。

從「Adsense 官網」我們可看到，所有相關教學的文件整理的非常清楚，只不過就像看到一本厚厚的教科書，打開來查閱的慾望會比不上一本輕薄的摘要筆記。本篇簡單整理了一些 WFU 擺放、測試 Adsense 的心得，相信讀者可以從這些步驟、流程來找出最適合自己廣告版面的排列組合。

一、廣告擺設通則

如果網站的流量很大，例如一個月幾十萬人次，那麼適合對廣告的版面配置進行最佳化，因為就算只增加 1% 的收益，也是不小的數字。

如果流量普通，那麼倒是不用花時間與精力來研究最佳化這件事，使用 Adsense 官方建議的通則來擺放廣告即可，因為就算有 5%~20% 的收入差異，其實也差沒多少錢。

1. 廣告尺寸

根據官方「廣告大小指南」→「成效最佳的廣告大小」，網站只需要使用下列這些推薦廣告尺寸即可，其他尺寸先不必考慮：

300x250
336x280
728x90
300x600
320x100(行動版)

2. 擺放位置

adsense-general-hot-zone-Adsense 廣告尺寸及版面配置優化技巧整理

根據官方「AdSense廣告熱區」，上圖是大部分情況下，訪客眼球容易注意到的地方，廣告擺放在這些地方的點擊率較高。

如果從心理層面分析，適合擺放廣告位置的通則大致如下：

網站標題附近 → 左上方為第一眼的注視區塊
文章標題附近→ 訪客必定會注意的地方
文章結束處→ 閱讀完文章，必定會看到的地方

在沒有進行優化的情況下，網站的廣告只需要擺在這三個地方，就可以得到高於平均水準的點擊率。

3. 其他設定細節

這裡只提簡單的通則設定，比較複雜的則略過，請參考下圖：

A. 顏色

建立廣告單元時，「文字廣告樣式」這一項需要花點時間調配顏色，讓廣告背景顏色跟網站的背景顏色一致，或至少需要融入那個色系，廣告才不會顯得突兀。

相信我，訪客對於沒有美感的網站，是非常排斥的！

B. 邊框

只要將邊框的顏色，設定成跟背景色一樣，廣告看起來就沒有邊框。沒有邊框的廣告單元，比較能融入網站，看起來像是網站的一部份。

C. 類型

設定成同時開啟「文字廣告和展示廣告」，點擊率會比較高。

二、最佳化方式

在網站流量大幅提升之後，若通則的擺放收益已經不能滿足你，那麼可以進行「Adsense 最佳化配置」這個大工程！

1. 網站類型模版

開始之前，站長們可能腦中完全沒有任何構想，到底廣告怎麼擺可以讓點擊率最大化，那麼可以參考官方提供的範例。首先進入這個網頁：

廣告刊登位置最佳實務

adsense-optimize-example-web-style-Adsense 廣告尺寸及版面配置優化技巧整理

這個網頁的右手邊，會看到上圖的目錄，Adsense 官方提供了 "遊戲網站"、"網誌"(部落格)、"旅遊網站" 等等多種類型的範例。

點進去後，會根據不同類型的網站，針對 "首頁"、"文章頁面" 等等不同頁面，建議最佳的廣告尺寸、版面配置方式。

adsense-blog-post-optimize-Adsense 廣告尺寸及版面配置優化技巧整理

例如上圖是部落格網站類型，文章頁面之中，官方建議的一種廣告配置。

2. A/B 測試

這些官方的建議配置，跟「一、廣告擺設通則」WFU 所提出的建議一樣，都只能參考。如果說有「廣告擺放位置鐵則」這種東西存在的話，那麼只要模仿最熱門的網站，將其廣告擺法照抄，一點都不困難。

實則不然，每個網站的類型、文章風格、訪客族群、廣告點擊習慣都不同，同樣的廣告配置，在還沒進行實驗測試之前，都無法證明是最佳擺設。我們只能不斷進行交叉比對測試，持續一段時間，才能找出某個位置是否適合放廣告，或是該位置最適合的廣告尺寸為何。

想要真的讓廣告點擊最大化，可參考官方的教學文件「實驗簡介」，實驗的項目很多、流程很長、需要的時間很久。

如果覺得這件事很麻煩、賺錢不是容易的事，那麼按一般通則、或官方提供的模版進行就好，畢竟這件事非常吃機會成本，得考慮投入的時間是否划算。

3. 調整第一個廣告

Adsense 分配廣告單元的原則是這樣的，在範本中讀取到的第一個 Adsense 安裝碼，會分配到該頁面最高出價的廣告，讀取到的第二個 Adsense 安裝碼，則次之，之後以此類推。

因此，從自己的報表我們可看出點擊率最高的是哪個廣告單元，例如是 336x280 這一個，那麼我們可以想辦法將這個廣告單元，移到範本中第一個讀取到的位置。

但這件事並不容易，假設原本 336x280 是在頁面上第二個出現的位置，得具備一定的 HTML/CSS 技巧，才知道如何能將他放在範本中第一個讀取到的位置，而又出現在第二個顯示的位置。

三、符合個人風格的擺設

賺錢很重要，但賺得不高興時、不想為五斗米折腰，也是有人選擇不委屈自己。某些廣告的擺放位置，有經驗的站長都知道要放在哪裡，點擊率非常高，雖然訪客看了礙眼。

不過也是有不少站長，認為美感大於一切，且友善的閱讀體驗才是他想提供給讀者的，那麼「廣告版面位置最佳化」，就不等於 "點擊率最大化" 了。

這是我目前的廣告擺放策略，給需要平衡 "收益" 與 "閱讀體驗" 的站長參考。同樣的，讀者必須找出自己的最佳組合：

盡量減少擺放廣告，官方提供的「連結單元」其實沒什麼賺頭，就不要放了，少佔一些空間。
網站標題附近放 728x90。
文章標題上方是擺放的好位置，不影響閱讀。
不過由於 WFU BLOG 每篇文章使用了「封面圖」，因此廣告稍微往下移一些，放在「繼續閱讀」的位置。
「讓廣告出現在文章結束處」
Adsense 光展示也有收益，頁面可塞滿四個廣告單元，收取展示費用。

四、補充事項

擺放 Adsense 的注意事項其實很多，以上沒有提到的部分，這裡提供一些參考資料：

1. 四個廣告

官方規定一個頁面只能擺放三個廣告單元，其實 2014 年初 Adsense 就已經允許放四個廣告，若需要更多可以提出申請。詳細的規範、及申請表格，請參考這個「Blogger 論壇討論串」。

2. 避免違反官方政策

Adsense 是收益最多的廣告來源，但請別為了賺廣告費而走偏門，只要被發現違反規定，帳號一經停權就很難恢復。

官方網頁列舉了很多使用者可能犯的錯誤，請參考這篇「AdSense 政策常見問題解答」，簡單列出一些可能違規的項目：

含有猥褻或挑逗姿勢，或是乳房、臀部或胯部的特寫圖片或影片，都算是撩撥性慾的內容。因此，如果相關的比基尼圖片具有猥褻性質或含有性暗示，就算是成人內容。

連結到明顯侵犯版權內容政策的來源，就算是違規。

提供軟體下載或序號算是違反版權政策嗎？ → 如果您提供的是未經擁有者授權的破解版軟體，這就算是版權內容。未經擁有者許可擅自提供序號，也視同破解軟體。

如果您建立了大量內容類似或重複的網站 → 可能被判定為 SPAM

您可以選擇適當的廣告大小、顏色和背景，使廣告與您的網頁設計搭配，但切勿製作與網頁內容難以區別的廣告。此外，廣告和內容之間也一定要保持適當的距離，以免導致意外點擊。

廣告固定顯示在左側或右側 → 這類廣告稱為「黏著廣告」，是不允許使用的。

廣告上方只能放置「贊助商連結」或「廣告」標籤 → 不可有其他鼓勵或引起點擊的文字或圖片

廣告與 [下載] 連結之間一定要保持距離，讓使用者能夠輕鬆區分 [下載] 按鈕。

3. 行動版注意事項

上一點的官方政策裡面，有一些跟行動版 Adsense 有關，曾有讀者因為這一項而被停權，因此特別提出來說明：

將 300x250 的廣告單元放在高階行動專用網站上方，這種情形是否算是違反政策？ → 是的，這是違反政策的行為。這種導入方式導致使用者必須捲動網頁才能閱讀內容。因為廣告會佔據行動專用網站第一個畫面的過多空間，造成使用者瀏覽不便。請務必為網站的使用者著想，這樣他們才會持續來訪。

幾種不符合規定的廣告導入方式 →
一個行動網頁上也不得同時出現兩則 AdSense 內容廣告。

行動版最上方建議使用 320x100 這個尺寸，請勿讓 300x250 完整出現在網頁最上方的螢幕畫面，否則就違反規定了。
第二點應該比較少人這麼做，不過仍須記住這件事，否則不小心在行動版，同一個畫面連續放兩個廣告，就算違規了。

4. 更多 AdSense 優化技巧

這篇「Google AdSense 優化」記錄了 Google 官方 Adsense 線上課程的內容摘要，有興趣將將收益最大化的讀者，可再詳細閱讀。

五、客製程式

除了本文的內容，還有一些方法可以增加 Adsense 收益，但是必須經由付費客製程式才做得到。如果讀者有以下這些需求的話，可再與我聯繫：

1. 文章中插入廣告

如果你想在文章中，每隔一段固定的距離插入 Adsense 廣告，可寫程式做到這件事。

2. 隨機顯示不同尺寸

廣告擺設方式都一樣的話，對於常客而言，基本上眼睛都會自動對廣告無視。為了增加網站的新鮮感，如果想讓廣告出現的尺寸、或方式採隨機呈現的話，可用程式做到這樣的效果。

3. A/B 測試

A/B 測試需要花很長的時間進行，且一段時間後需再換另一組廣告測試。使用客製程式後，在同一時間、同一位置，可同時測試多組廣告，大大縮短測試時間。

聯絡表單：

更多 Adsense 相關文章：

↧

讓行動版網頁能用手指縮放螢幕大小

December 29, 2015, 3:13 am

≫ Next: Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

≪ Previous: Adsense 廣告尺寸及版面配置優化技巧整理

這個「Blogger 論壇貼文」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。

其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小，如果網頁有圖片的話，"能用手指縮放" 這件事的確能提供讀者友善的使用體驗。

於是研究了一下 Blogger 行動版如何開啟這項功能，其實方法很簡單，請見本文的筆記整理。

(圖片出處: pixabay.com)

一、不同範本的差異

雖然修改的原理很簡單，但由於 Blogger 範本內容事實上不斷地在更新，也可以說是官方持續地在加強範本預設的語法，因此這件事變得稍稍有點難度。如果讀者熟悉範本的語法，那麼可以直接跳到「二、修改範本」；若是不熟悉的話，建議看完這個章節，跟縮放語法相關的所有狀況。

1. 非官方語法

如果非 Blogger 平台的網頁，或是非 Blogger 官方範本，那麼跟縮放相關的語法，可能長得像類似這樣子：

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

2. 早期範本語法

不同時期的 Blogger 範本預設內容都不一樣，在後台選擇任一官方範本、並立即套用，你在範本中就可看到最新的預設內容。

在最早的 Blogger 範本，也稱為「傳統範本」，連「1. 非官方語法」這一行都找不到。

進入行動裝置時代後，如果你的 Blogger 是在這個時期建立的，那麼應該會在範本中看到下列的判斷式語法：

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />
<b:else/>
<meta content='width=1100' name='viewport' />
</b:if>

3. 最近一年的語法

今年 Blogger 進一步精簡了判斷式語法，如果你的網站是近幾個月才建立的，那麼範本中應該可找到下列語法：

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport' />

二、修改範本

1. 修改原理

雖然上面看到的語法範例都長得不一樣，不過重點只有一個，就是修改官方的預設參數，也就是下面這個字串：

maximum-scale=1.0

這代表 "網頁最大能放大為幾倍"，如果把參數改為 5.0 就是最多可用手指放大到 5 倍。
相信 5 倍已經夠用了，如果想更大可以把參數改為 10.0。
同樣的道理，如果想要用手指縮小螢幕，則修改 "minimum-scale=1.0" 這個字串，例如參數改為 0.5，就是將可視範圍縮小為一半的尺寸。

2. 修改範本

在修改範本之前，建議先閱讀「備份範本的訣竅」系列文章。

接著到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋字串 maximum-scale或 minimum-scale，按照「1. 修改原理」來調整參數即可。

3. 自行新增語法

最怕的是在範本中根本搜尋不到相關字串，這代表不知何種原因，導致你的範本沒有「一、不同範本的差異」之中的任何語法，那麼只好自行新增相關語法了，請按以下流程：

在範本中找到 <head>這個字串，在下一行新增相關語法。
請新增「一、不同範本的差異」→「2. 早期範本語法」或是「3. 最近一年的語法」都可以
最後調整縮放的參數

如果你是非 Blogger 網頁，請新增「一、不同範本的差異」→「1. 非官方語法」這裡的程式碼，再調整參數即可。

更多 Blogger 行動版技巧：

↧

Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

December 30, 2015, 4:57 pm

≫ Next: Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

≪ Previous: 讓行動版網頁能用手指縮放螢幕大小

random-number-Blogger 隨機文章 + 自訂尺寸縮圖側邊欄工具

除了「熱門文章」，側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具，就是 "隨機文章" 了。

之前曾製作了「Blogger 隨機文章 + 自適應尺寸縮圖」，由於是橫式版面，只適合擺放在文章結束處。不過將程式碼稍微修改一下，變成直式版面的話，就可以擺在側邊欄了。

以下簡單介紹這個工具的特點，想直接安裝請跳至「二、安裝程式碼」。

點此前往範例網頁

(圖片出處: pixabay.com)

一、隨機文章的特色

blogger-random-posts-Blogger 隨機文章 + 自訂尺寸縮圖側邊欄工具

請參考上面的效果圖，這個工具的特點如下：

以前的 Blogger 隨機文章工具，一次需要讀取全部的 feed 才能隨機抽樣，文章多的時候，除了讀取速度極慢，超過 500 篇則無法抽樣早期文章。
本篇的工具並非讀取網站的 feed，而是讀取單篇文章的 feed，所以速度快、不會受到網站文章數的影響。
可自訂縮圖長寬尺寸
可排除特定標籤字串的文章不顯示→ 例如 "站務" 相關的文章沒有必要出現在隨機推薦文章，可設定排除標籤含 "站務" 字串的所有文章
「支援 HTTPS 模式」

二、安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

以下參數修改請參照以上程式碼行號：

A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，以免重複安裝。

F：顯示的文章數量

G~H：可自訂縮圖的寬度、高度像素(px)值

I：藍色字串請改為自訂的 "無縮圖替代圖片網址"

J：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除所有字串，留下 []即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。

M：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，並用「Google Drive 外連產生器 V2」取得外連網址。

O~BF：如果對 CSS 熟悉可自行修改這部分的參數

以上程式碼儲存後即可看到效果，也可前往前面提到的「範例網頁」看展示效果。

三、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 有些文章無法顯示縮圖？

Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。

更多實用工具：

本站使用的 Blogger hack 及工具整理

↧

Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

January 3, 2016, 10:41 pm

≫ Next: Font Awesome 進階使用方式整理﹍製作社群分享按鈕

≪ Previous: Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

flat-social-share-button-Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

之前曾介紹過如何「改造 Blogger 官方分享按鈕」，除了增加常用的熱門社群分享按鈕，也讓官方分享按鈕展現不同的風格。

在行動裝置普及之後，「扁平化設計」開始流行，網頁開始使用簡單的顏色、線條來設計，減少陰影、立體、複雜的圖案，最直接的好處就是「減少圖片的使用後，能加快網頁載入速度」，許多熱門大站現在都是採用這樣的設計。

本篇實作一組扁平化設計的常用社群分享按鈕，並加上簡單的 CSS 動畫，是很實用的範例。

一、特點

flat-social-share-buttons-Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

上面為四個按鈕的示意圖，要觀看動畫效果及操作，請前往展示頁面：

點此看範例網頁

這組社群分享按鈕的特點如下：

不需要安裝外掛程式，可提升頁面載入速度。
不使用圖片，圖案、顏色純粹使用 CSS，縮短讀取時間。
純粹使用超連結進行分享的動作。
滑鼠經過有簡單的動畫

二、安裝 CSS

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<!--扁平化社群分享按鈕-->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'></link>
<style>
.social_buttons {
display: inline-block;
margin-top: 20px;
font-family: Arial, sans-serif;
}

.social_buttons a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
}

.social_buttons a:hover {
-ms-transform: translateY(-4px);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}

.social_buttons i {
width: 32px;
height: 32px;
font-size: 22px;
text-align: center;
}

.social_buttons i:before {
margin: auto;
line-height: 32px;
vertical-align: middle;
}

.social_fb {
background-color: rgb(59, 89, 152);
}

.social_weibo {
background-color: rgb(245, 202, 89);
}

.social_gplus {
background-color: rgb(220, 78, 65);
}

.social_twitter {
background-color: rgb(85, 172, 238);
}

.social_text {
font-size: 12px;
padding: 0 15px 0 5px;
line-height: 32px;
}
</style>
<!-- -->

開頭綠色字串這一行，可檢查範本中是否已經裝過「Font-Awesome」這個 Icone 圖示字型，若安裝過可刪除此行
其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝分享按鈕

接者可將以下程式碼，安裝在 Blogger 範本中你想顯示的地方。例如想放在文章結束處的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」→「3. 繼續閱讀」，放在這裡的程式碼後面：

<!--扁平化社群分享按鈕-->
<div class='social_buttons'>
<a class='social_fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 FB' target='_blank'>
<i class='social_logo fa fa-facebook'></i>
<span class='social_text'>Facebook</span>
</a>
<a class='social_gplus' expr:href='"https://plus.google.com/share?url=" + data:blog.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 Google+' target='_blank'>
<i class='social_logo fa fa-google-plus'></i>
<span class='social_text'>Google+</span>
</a>
<a class='social_weibo' expr:href='"http://service.weibo.com/share/share.php?title="+ data:blog.pageName + " @" + data:blog.title + "%0D%0A" + data:blog.canonicalUrl + "&amp;url=" + data:post.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 Weibo' target='_blank'>
<i class='social_logo fa fa-weibo'></i>
<span class='social_text'>Sina Weibo</span>
</a>
<a class='social_twitter' expr:href='"http://twitter.com/share?url=" + data:blog.canonicalUrl + "&amp;text=" + data:blog.pageName + " @" + data:blog.title' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 twitter' target='_blank'>
<i class='social_logo fa fa-twitter'></i>
<span class='social_text'>Twitter</span>
</a>
</div>
<!-- -->

四、補充說明

由於安裝碼包含 Blogger 語法，因此只能安裝在 Blogger 範本之中。
要放在自訂位置的話，請參考「Blogger 範本各區塊程式碼」系列文章，找到其他區塊的擺放位置。
如果只想在文章中顯示，請參考「Blogger 七種頁面形態判斷語法詳解」，自行在程式碼前後使用文章頁面的判斷式語法。
本篇提供了四個常用的分享按鈕語法，如需使用更多的分享按鈕，可參考「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」，自行增添其他按鈕。

更多社群分享按鈕工具：

↧

Font Awesome 進階使用方式整理﹍製作社群分享按鈕

January 6, 2016, 3:23 pm

≫ Next: Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

≪ Previous: Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

font-awesome-Font Awesome 進階使用方式整理﹍製作社群分享按鈕

「Font Awesome」是一套把 "向量圖示" 做成字型的套件。過去為了減少網站小圖示的使用(加快網頁讀取速度)，採用「UNICODE 特殊符號」這個方案。

而最近處理一些案子需要製作各式的 "社群分享按鈕"，發現 "UNICODE 特殊符號" 缺乏這些分享按鈕的圖示，而 "Font Awesome" 除了支援多數的社交分享按鈕，一些網頁設計常會用的網路相關圖示，例如 "Chrome"、"FireFox"、"Html5" 等等，也都內建在其中。

Font Awesome 基本的使用方法並不困難，另外一些進階的應用方式還能讓網頁設計更加方便。本篇將簡單介紹 Font Awesome 的進階使用方法，並舉例如何運用 CSS 技巧做出漂亮的社群分享按鈕圖示。

一、簡介及安裝

1. CDN 安裝方式

Font Awesome 值得推薦的理由之一，在於提供了「CDN」的引用方式。我們不需要下載 Font Awesome 檔案、放到自己的網路空間來引用。

此外，因為 CDN 快取了檔案，還可讓訪客讀取的速度更快，會比自己的網路空間還快。

安裝方法以 Blogger 為例，到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼即可：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></link>

2. Font Awesome 介紹及操作

由於網路這方面的基礎文章很多，請讀者直接參考相關連結：

Font Awesome 介紹：Font Awesome 輕鬆在網頁加入ICON圖示
操作方式教學：如何使用Font Awesome所提供的各種icon

此外，要查詢所有的 ICON 圖示，請前往這個官網頁面：

https://fortawesome.github.io/Font-Awesome/icons/

二、進階使用方式

進入官網的這個頁面，提供了許多進階範例教學：

Font Awesome Examples

以下摘要一些實用的運用方式，比較簡單的語法請直接參考官網，需要解釋的項目才詳細說明。

1. 放大

Larger-Icons-Font Awesome 進階使用方式整理﹍製作社群分享按鈕

基本的 Font Awesome 語法，例如照相機圖示的語法為：

<i class="fa fa-camera-retro"></i>
安插上圖的 class 後，可以放大圖示：

fa-lg：放大 33%
fa-2x：放大為兩倍

其餘參數以此類推，最大可使用 fa-5x。

2. 固定寬度

Fixed-Width-Icons-Font Awesome 進階使用方式整理﹍製作社群分享按鈕

每個圖示的寬度其實不一樣，有的大、有的小，但如果圖示需要垂直排列時，就會不美觀。在這個情境下，能固定寬度就能讓版面比較協調。

在所有需要固定寬度的圖示，加入這個 class fa-fw，就可做到這個效果。

3. 更改清單圖示

使用清單語法 UL、LI時，如果想置換瀏覽器預設的圓點圖示，可參考上圖，在 UL、LI 標籤分別加入 class fa-ul、fa-li，並安插喜歡的清單圖示即可。

4. 文繞圖

Bordered-Pulled-Icons-Font Awesome 進階使用方式整理﹍製作社群分享按鈕

就像 WFU BLOG 首頁的效果，如果要製作圖片在左這樣的 "文繞圖" 效果，Font Awesome 也提供了這個效果。

在圖示裡加入 class fa-pull-left就可讓圖示向左浮動，加入 class fa-pull-right就可讓圖示向右浮動。
如果想讓圖示加上外框，則加入 class fa-border。

5. 旋轉動畫

這個效果很適合拿來放在過場動畫，幫圖示加入以下 class 的效果為：

fa-spin：以固定速率旋轉
fa-spin fa-pulse：以分解動作 8 拍子來旋轉

6. 翻轉

Rotated-Flipped-Font Awesome 進階使用方式整理﹍製作社群分享按鈕

請直接參考上圖的參數，可讓圖示進行：

水平翻轉(fa-flip-horizontal)
垂直翻轉(fa-flip-vertical)
多種角度(90, 180, 270)翻轉

三、重疊圖案

這個功能比較複雜，把兩個圖示重疊顯示，適合拿來製作社群分享按鈕，因此詳細說明操作方法。

以上圖的 Twitter 圖示(飛鳥圖案)為例：

<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

在 span 母標籤，必須加入 class fa-stack，宣告我們要使用重疊圖案。
子標籤塞入兩個圖示語法。
當作外框的那個圖示，需要加入 class fa-stack-2x，代表這個圖示將放大成為外框。
當作內容的那個圖示，需要加入 class fa-stack-1x。
有時外框跟內容圖示重疊後，會因顏色相同看不出圖案，那麼可將其中一個反白。要反白的那個圖示，加入 class fa-inverse

四、製作社群分享按鈕

以下實作一個最常見的 Facebook 分享按鈕，效果如同上圖。這可不是一張圖片，而是利用 Font Awesome 字型拼出來的喔！

<span class="fa-stack fa-2x">
<i class="fa fa-square fa-stack-2x" style="color: #3B5998;"></i>
<i class="fa fa-facebook fa-stack-1x" style="color: #fff;"></i>
</span>

母標籤 span 使用 fa-2x 將圖案放大兩倍
外框使用實心圖示 fa-square，並將顏色改為 FB 的藍色底色。
將 F 圖示改為白色

這樣就簡單完成一個 FB 按鈕圖示了，完全不需要花費讀取圖片的時間呢！

根據本篇 Font Awesome 的使用說明，另外也可做出「扁平化社群分享按鈕+動畫效果」，同時下一篇也會實作更多的社群分享按鈕。

更多社群分享按鈕工具：

↧

Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

January 8, 2016, 6:09 am

≫ Next: Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

≪ Previous: Font Awesome 進階使用方式整理﹍製作社群分享按鈕

blogger-search-box-page-layout-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

過去曾介紹讀者使用「Google 自訂搜尋」來當作站內搜尋的工具，其原因在「取代 Blogger 搜尋小工具﹍Google 自訂搜尋」說明得很詳細，主要是「Google 自訂搜尋(以下簡稱 CSE: Custom Search Engine)」可動態載入搜尋結果、執行速度快，能給訪客很友善的使用體驗，快速找到需要的資料。

該篇文章最近有讀者留言，表示："google 自訂搜尋
為什麼永遠都是要等整頁全部內容load完之後, 搜尋列才會顯示出來...我的網誌經常被人說沒有搜尋列"。我的回答是："這是正確的網頁程式設計，將不重要的工具延後載入，讓網頁重要的文章內容先顯示...讓網頁內容載入時不至於塞車"。

雖是如此，這件事其實不斷有使用者提出，且長久以來我一直有個構想要解決這件事、但遲未動手。最近剛好在進行加快網頁速度的計畫，準備減少外部連結的讀取，例如不使用圖示：「圖示字型 Font Awesome 使用方式整理」，同時也會減少外掛的使用，所以 CSE 也是開刀對象之一。

最後我做出了這個更強大的搜尋框工具，功能、介面與 CSE 差不多，執行速度甚至可更快，不需外掛連結，算是我心目中最佳的 Blogger 搜尋工具了。

以下先分享原理、製作方式，共分上下兩篇，想直接安裝可跳至「二、自訂搜尋頁面」，想先測試效果可前往展示網站，操作右邊側邊欄的搜尋框：

點此看範例網頁

(圖片出處: pixabay.com)

一、製作原理

1. 官方導覽列搜尋框

blogger-nav-search-box-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

上圖紅框就是 "Blogger 官方導覽列搜尋框"，使用者多半將官方導覽列隱藏，因此用不到這個搜尋框。

前面提到的「取代 Blogger 搜尋小工具__Google 自訂搜尋」→「一、Blogger 各種搜尋方案比較」→「1. 導覽列搜尋框」，介紹過他的優點："保證可以搜尋到部落格每一篇文章的內容"；但是他的缺點很致命："每次搜尋都需要重整頁面"，等待時間長是個不好的使用者體驗。

不過話說回來，這個搜尋框如果能夠改成 Ajax 動態載入的話，那麼他的功能將會勝過 CSE。

2. Google 自訂搜尋的缺點

如了文章開頭使用者反應的 "頁面全部載入後，搜尋框才會出現" 之外，CSE 另外一個大缺陷就是，網站文章沒被 Google 搜尋引擎收錄的話，就搜尋不到了。

這件事其實並不少見，WFU 常看到使用者反應搜尋不到自己的文章，所以寫了這篇「Google 網站管理員的活用方法﹍我的例行待辦事項」。如果搜尋不到文章，那麼網站裝了 CSE 也是沒用的。

因此對於站齡不長、網站權威度不夠、流量不多的網站，安裝 CSE 可能會遇上麻煩。

另外，用「Chrome 開發人員工具」檢查網路傳輸狀態，發現所有 CSE 會用到的外連 JS + CSS 檔，加總大約要傳輸 100k，算是滿龐大的數字。不過對於網路慣用者，瀏覽器應該會有這些檔案的快取。

3. 改造方法

google-custom-search-result-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

上圖為 CSE 的搜尋結果版面，而「官方導覽列搜尋框」搜尋結果的版面，跟我們網站的首頁是一樣的，因此我依據上圖進行了這些步驟的改造：

版面編排參考 CSE 的優點，去除不太必要的部分(例如不顯示網址)。
增加縮圖顯示
搜尋字串改為一律標記紅色
文章摘要之前加入發佈日期
將 "重整頁面" 改為 "Ajax 動態載入"，可立即看到搜尋結果。
將「官方導覽列搜尋框」改為側邊欄小工具。

二、自訂 Blogger 搜尋頁面

根據以上的改造流程，我們首先要進行 "搜尋結果" 的版面改造。參考「Blogger 七種頁面形態判斷語法詳解」→「二、各種索引頁面」→「3. 搜尋頁面」，可瞭解到 "站內搜尋" 的頁面，官方稱為 "搜尋頁面" (searchQuery)。

我們現在要動手修改範本中的 "搜尋頁面"，其實這是有點危險的事，在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 搜尋頁面 CSS

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<!--搜尋頁面-->
<style>
.searchPage_Post {
margin: 10px 0;
overflow: auto;
}

.searchPage_Post h3 {
margin: 5px 0;
}

.searchPage_Post img {
float: left;
max-width: 50px;
max-height: 50px;
border: 1px solid #e2e2e2;
}

.searchPage_snippet {
margin-left: 60px;
}
</style>
<!-- -->

如果熟悉 CSS 的話，可自行修改版面效果。

2. 搜尋頁面 HTML

接著在範本中搜尋這個字串：

<b:include data='post' name='post'/>
應該只會有一個搜尋結果，然後將這一行字串，置換為以下程式碼：

<!--搜尋頁面 start-->
<b:if cond='data:blog.searchQuery'>
<div class='searchPage_Post'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='data:post.thumbnailUrl' />
<b:else/>
<img src='http://2.bp.blogspot.com/-nEPh_CvgECk/VhiRpiuYUHI/AAAAAAAAMqM/HdjiVlRXC6U/s72-c/wfublog-comment.jpg' />
</b:if>
<div class='searchPage_snippet'>
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/> <span class='red'>...</span>
</b:if>
<data:post.snippet/>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--搜尋頁面 end, designed by WFU BLOG-->

主要可修改的內容為綠色字串，這是文章無縮圖時的替代圖片，可改為自訂網址。
這部分所有的程式碼，就是 "搜尋頁面" 的版面配置，如果想要自行調整版面的話，建議非常熟悉 Blogger 語法再來，否則很可能引起災難。

3. 隱藏預設文章日期

事情還沒完，先別存檔，進行完上一點後，在範本中往上個 7 行左右，會看到以下程式碼：

<b:if cond='data:post.dateHeader'>
將這行程式碼置換為以下內容：

<b:if cond='data:post.dateHeader and !data:blog.searchQuery'>
這樣子可以隱藏 "搜尋頁面" 的文章發佈日期，版面會比較簡潔好看。

到此可以存檔，完成第一階段。

三、測試效果

想要先看一下自己網站 "搜尋頁面" 的版面效果，可以在網址輸入以下字串：

http://你的網址.blogspot.com/search?q=搜尋字串

或者也可看這個展示頁面，是搜尋 "blogger" 字串結果的畫面：

點此看範例網頁

如果版面沒什麼問題的話，下一篇我們將安裝搜尋框在側邊欄 + Ajax 動態載入的效果。

更多 Blogger 搜尋工具：

↧

Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

January 10, 2016, 6:18 pm

≫ Next: Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

≪ Previous: Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

blogger-search-box-ajax-load-Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

要安裝這個「Ajax 搜尋框」工具，請務必先完成上一篇「自製搜尋頁面」的流程，這樣搜尋結果的版面才會美觀。

第一階段完成後，本篇要把「官方導覽列搜尋框」搬到側邊欄，並加上 "Ajax 動態載入" 的搜尋結果畫面。

點此看範例網頁

(圖片出處: pixabay.com)

一、安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

<!--搜尋框 HTML-->
<div>
<input id='search_input' placeholder='搜尋文章' type='text' />
<input id='search_btn' type='image' src='http://3.bp.blogspot.com/-fpi6-9d3JpQ/Vo0LXN6iUDI/AAAAAAAANPA/89JVfzXNtXg/s1600/search-icon.png' />
</div>

<!--搜尋框 CSS-->
<style>
#search_input {
height: 20px;
width: calc(100% - 100px);
border: 1px solid #d9d9d9;
padding: 4px 10px;
background: #f0ede9;
color: #8B8B8B;
font-size: 15px;
vertical-align: middle;
}
#search_btn {
width: 13px;
height: 13px;
padding: 8px 25px;
background-color: #d9d9d9;
border: 1px solid #bbb;
border-radius: 2px;
vertical-align: middle;
}
</style>

<!--搜尋框 JS-->
<script>
(function($){var $search_input=$("#search_input"),init=function(){var query=$search_input.val().replace(" ","%20"),queryUrl="/search?q="+query+" #Blog1";ajaxLoad(query,queryUrl)},ajaxLoad=function(query,queryUrl){var _0xed55=["\x33\x20\x36\x3D\x22\x3C\x69\x20\x32\x3D\x27\x31\x64\x3A\x20\x31\x63\x20\x4C\x3B\x37\x2D\x34\x3A\x20\x47\x3B\x27\x3E\x3C\x43\x20\x42\x3D\x27\x78\x3A\x2F\x2F\x31\x65\x2E\x59\x2E\x6A\x2F\x2D\x31\x34\x2F\x31\x6C\x2F\x31\x6E\x2F\x31\x70\x2F\x77\x2F\x51\x2D\x53\x2E\x36\x27\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x2F\x3E\x3C\x35\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x3E\x20\x31\x66\x20\x31\x69\x2E\x2E\x2E\x3C\x2F\x35\x3E\x3C\x2F\x69\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x68\x28\x36\x29\x3B\x24\x28\x22\x23\x79\x22\x29\x2E\x7A\x28\x41\x2C\x39\x28\x29\x7B\x33\x20\x63\x3D\x24\x28\x22\x2E\x44\x2D\x45\x2D\x46\x22\x29\x2C\x61\x3D\x48\x20\x49\x28\x22\x28\x22\x2B\x4A\x2B\x22\x29\x22\x2C\x22\x4B\x22\x29\x2C\x62\x3D\x22\x3C\x69\x20\x32\x3D\x27\x37\x2D\x34\x3A\x20\x4D\x3B\x20\x4E\x2D\x4F\x3A\x20\x50\x3B\x27\x3E\u6280\u8853\u63D0\u4F9B\uFF1A\x3C\x61\x20\x6F\x3D\x27\x52\x3A\x2F\x2F\x76\x2E\x54\x2E\x6A\x2F\x55\x2F\x56\x2F\x57\x2D\x58\x2D\x71\x2D\x5A\x2E\x68\x27\x20\x31\x30\x3D\x27\x31\x31\x27\x20\x32\x3D\x27\x37\x2D\x31\x32\x3A\x20\x31\x33\x3B\x27\x20\x72\x3D\x27\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x35\x20\x31\x36\x27\x3E\u24E6\x20\x31\x37\x20\u52D5\u614B\u641C\u5C0B\u6846\x3C\x2F\x61\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x31\x38\x28\x62\x29\x3B\x24\x28\x22\x2E\x31\x39\x2D\x72\x20\x61\x2C\x20\x2E\x31\x61\x22\x29\x2E\x31\x62\x28\x39\x28\x29\x7B\x33\x20\x64\x3D\x38\x2E\x73\x3B\x64\x3D\x64\x2E\x74\x28\x61\x2C\x22\x3C\x35\x20\x32\x3D\x27\x31\x67\x3A\x20\x23\x31\x68\x27\x3E\x24\x31\x3C\x2F\x35\x3E\x22\x29\x3B\x38\x2E\x73\x3D\x64\x7D\x29\x3B\x63\x2E\x75\x28\x22\x61\x22\x29\x2E\x31\x6A\x28\x22\x31\x6B\x22\x2C\x39\x28\x29\x7B\x33\x20\x66\x3D\x63\x2E\x75\x28\x22\x62\x22\x29\x2E\x68\x28\x29\x2E\x74\x28\x22\x20\x22\x2C\x22\x25\x31\x6D\x22\x29\x2C\x64\x3D\x38\x2E\x6F\x2C\x67\x3D\x64\x2E\x31\x6F\x28\x22\x2F\x71\x22\x29\x2C\x65\x3D\x64\x2E\x31\x71\x28\x67\x29\x2B\x22\x20\x23\x31\x72\x22\x3B\x31\x73\x28\x66\x2C\x65\x29\x3B\x31\x74\x20\x31\x75\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x73\x74\x79\x6C\x65\x7C\x76\x61\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x73\x70\x61\x6E\x7C\x67\x69\x66\x7C\x74\x65\x78\x74\x7C\x74\x68\x69\x73\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x68\x74\x6D\x6C\x7C\x64\x69\x76\x7C\x63\x6F\x6D\x7C\x6D\x69\x64\x64\x6C\x65\x7C\x64\x61\x74\x65\x7C\x6F\x75\x74\x65\x72\x7C\x65\x71\x7C\x68\x72\x65\x66\x7C\x76\x65\x72\x74\x69\x63\x61\x6C\x7C\x73\x65\x61\x72\x63\x68\x7C\x74\x69\x74\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x66\x69\x6E\x64\x7C\x77\x77\x77\x7C\x73\x35\x31\x32\x7C\x68\x74\x74\x70\x73\x7C\x6D\x61\x69\x6E\x7C\x6C\x6F\x61\x64\x7C\x71\x75\x65\x72\x79\x55\x72\x6C\x7C\x73\x72\x63\x7C\x69\x6D\x67\x7C\x73\x74\x61\x74\x75\x73\x7C\x6D\x73\x67\x7C\x62\x6F\x64\x79\x7C\x63\x65\x6E\x74\x65\x72\x7C\x6E\x65\x77\x7C\x52\x65\x67\x45\x78\x70\x7C\x71\x75\x65\x72\x79\x7C\x69\x67\x7C\x61\x75\x74\x6F\x7C\x72\x69\x67\x68\x74\x7C\x66\x6F\x6E\x74\x7C\x73\x69\x7A\x65\x7C\x31\x32\x70\x78\x7C\x69\x6E\x64\x69\x63\x61\x74\x6F\x72\x7C\x68\x74\x74\x70\x7C\x6C\x69\x67\x68\x74\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x32\x30\x31\x36\x7C\x30\x31\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x61\x6A\x61\x78\x7C\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x62\x6F\x78\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x45\x79\x56\x5A\x30\x66\x38\x4A\x30\x71\x51\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x41\x6A\x61\x78\x7C\x62\x65\x66\x6F\x72\x65\x7C\x70\x6F\x73\x74\x7C\x73\x65\x61\x72\x63\x68\x50\x61\x67\x65\x5F\x73\x6E\x69\x70\x70\x65\x74\x7C\x65\x61\x63\x68\x7C\x32\x30\x70\x78\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6C\x68\x35\x7C\x70\x6C\x65\x61\x73\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x39\x39\x30\x30\x30\x30\x7C\x77\x61\x69\x74\x7C\x6F\x6E\x7C\x63\x6C\x69\x63\x6B\x7C\x55\x43\x65\x45\x47\x37\x61\x61\x38\x6E\x49\x7C\x32\x30\x7C\x41\x41\x41\x41\x41\x41\x41\x41\x44\x74\x59\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x39\x73\x58\x77\x35\x33\x58\x6B\x59\x58\x4D\x7C\x73\x75\x62\x73\x74\x72\x7C\x42\x6C\x6F\x67\x31\x7C\x61\x6A\x61\x78\x4C\x6F\x61\x64\x7C\x72\x65\x74\x75\x72\x6E\x7C\x66\x61\x6C\x73\x65","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x758ax1,_0x758ax2,_0x758ax3,_0x758ax4,_0x758ax5,_0x758ax6){_0x758ax5=function(_0x758ax3){return(_0x758ax3<_0x758ax2?_0xed55[4]:_0x758ax5(parseInt(_0x758ax3/_0x758ax2)))+((_0x758ax3=_0x758ax3%_0x758ax2)>35?String[_0xed55[5]](_0x758ax3+29):_0x758ax3.toString(36))};if(!_0xed55[4][_0xed55[6]](/^/,String)){while(_0x758ax3--){_0x758ax6[_0x758ax5(_0x758ax3)]=_0x758ax4[_0x758ax3]||_0x758ax5(_0x758ax3)}_0x758ax4=[function(_0x758ax5){return _0x758ax6[_0x758ax5]}];_0x758ax5=function(){return _0xed55[7]};_0x758ax3=1}while(_0x758ax3--){if(_0x758ax4[_0x758ax3]){_0x758ax1=_0x758ax1[_0xed55[6]](new RegExp(_0xed55[8]+_0x758ax5(_0x758ax3)+_0xed55[8],_0xed55[9]),_0x758ax4[_0x758ax3])}}return _0x758ax1}(_0xed55[0],62,93,_0xed55[3][_0xed55[2]](_0xed55[1]),0,{}))};$search_input.on("keyup",function(e){if(e.which==13){init()}});$("#search_btn").on("click",init)})(jQuery);
</script>
<!--Ajax 搜尋框, designed by WFU BLOG-->

第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
如果熟悉 HTML，這個區塊是搜尋框的版面構成，可自行修改例如圖示等細節。
如果熟悉 CSS，這個區塊是搜尋框的 CSS 版面設定，可自行調整參數。

儲存後即可測試效果。

二、搜尋效果

blogger-ajax-search-box-result-Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

上圖為從「Blogger工具效果展示」網站，測試搜尋字串 "blogger" 的示意圖，效果大致有這些：

若文章有縮圖，則顯示 72x72(px) 正方形縮圖；無縮圖則顯示預設圖案。
文章或摘要出現字串 "blogger" 時，無論大小寫，一律用紅字標示出來。
預設顯示結果依據 "關連性"，可看到文章日期不連續。
若要依據 "日期" 排列，可按下 "依日期排序"，同樣會採 "Ajax 動態載入" 即時顯示，不會重整頁面。

三、小結

如上一篇提到的，使用這個「官方導覽列搜尋框」來改造，有這些優點：

保證能夠搜尋到部落格的每一篇文章
搜尋結果能即時 Ajax 動態載入頁面
不需要安裝外掛(沒有外連檔案)、程式碼很短
不像「Google 自訂搜尋」需要等待頁面載入完才顯示(馬上就看得到搜尋框)

綜合比較以上幾點，這個工具的確是「Google 自訂搜尋」的絕佳替代方案。

更多 Blogger 搜尋工具：

↧

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

January 13, 2016, 10:28 pm

≫ Next: 安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

≪ Previous: Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

fancybox-cdn-Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

最近在進行整理網站外部連結的 "年終大掃除" 行動，目前已經清除所有的 "網站小圖示" (改用「Font Awesome 圖示字型」)，以及刪除 "Google 自訂搜尋" (改用「Ajax 搜尋框」)。接下來成為目標的，是「Fancybox」這個檔案肥大的 jQuery 燈箱外掛。

Fancybox 不但容量大、而且檔案又多，外部連結包含了 JS/CSS/一堆小圖示。除非網站完全不用燈箱效果，不然 Fancybox 還滿難割捨的，沒什麼檔案小、功能強、效果佳的替代方案。

還好發現有不少網站佛心地為 Fancybox 提供了「CDN」服務，外連檔案若能放在 CDN，速度絕對比自己的網頁空間快上許多，甚至還可能不必外連。

本篇簡單整理使用的方法，並同樣提供一組安裝懶人包。

(圖片出處: pixabay.com)

一、CDN 檔案

1. Fancybox 操作簡介

請參考系列文第一篇「Fancybox 安裝教學」，除了介紹 Fancybox，也提供了安裝流程：

下載官網檔案 → 上傳到自己的空間 (Google Drive) → 取得外連路徑 → 安裝程式碼 → 使用方法

這個冗長的流程不但麻煩，安裝失敗的機率也很高。

2. CDN 優點

檔案放在 CDN 除了傳輸速度快，若是熱門的檔案(例如 jQuery)，瀏覽器為了減少網路存取，會直接使用硬碟的快取檔案，那麼甚至可省下網路傳輸的時間。

因此若是越多站長外連 Fancybox 時使用 CDN 檔案，代表有越高的機會，訪客可能在瀏覽器會有 Fancybox 檔案的快取，而加快載入速度。

3. Cloudflare CDN

本篇介紹免費 CDN 霸主 Cloudflare 提供的 Fancybox 外連，請看這個網址的列表：

https://cdnjs.com/libraries/fancybox

fancybox-cloudflare-cdn-Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

上圖可看到該網頁列出 CDN 所有外連檔案的連結
紅框處為版本號，2.1.5 是最新版，需要特定版本的話再選擇其他版本即可

如果讀者熟悉如何引用這些外連檔案，那麼就可自行操作了。如果不熟悉的話，可以往下看 WFU 整理的懶人包。

二、CDN 安裝懶人包

1. 懶人包內容

以下的懶人包安裝碼，功能跟「Fancybox(2) 縮圖+滾輪特效安裝懶人包」一樣，沒有載入 Fancybox 所有功能，為了加快速度，只載入了比較常用 "縮圖+滾輪特效"，不過相信已經很夠用了。

2. 準備動作

以 Blogger 為例，請到後台「範本」→「編輯 HTML」，搜尋這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。

同時修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

3. 安裝程式碼

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

請對照以上程式碼行號：

B~F：這五個是 CDN 的連結，如需要更多功能，請參考 Fancybox 官網自行增加更多連結檔案。

F：需要注意的是，Fancybox CDN 的檔案之中，不包含 Fancybox 官網包含的滑鼠滾輪功能，因此這一行的外連，需要從另一個 CDN 目錄「jquery-mousewheel」來取得，目前最新的版本是 3.1.13。

I：紅色字串 .post-body是 Blogger 平台的文章區塊，如果非 Blogger 平台，建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id，然後置換此字串(class 的前面要加 "."，而 id 前面要加 "#")。這段前導程式做的事情為：

只抓出文章區塊的圖片來展示燈箱效果，自動加上 fancybox 需要的參數，不需要手動設定。
facnybox 預設有超連結的圖片，才能展示燈箱效果，但網頁有的圖片可能當初忘了設定超連結，那麼這個前導程式可以自動補上超連結。

U~AF：這段程式碼為 fancybox 的參數設定

V~W：設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none"，代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。

Y：藍色字串 "true" 代表「滾輪切換圖片時，背景畫面不會跟著上下捲動」。

AA~AB：藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。

存檔後找一篇圖片多的文章來測試，即可看到效果，或是點以下按鈕前往示範頁面：

Fancybox 縮圖+滾輪特效

更多其他 fancybox 的參數使用，請參閱「官方說明書」。

Fancybox 系列文章：

↧

安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

January 20, 2016, 8:11 pm

≫ Next: 讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

≪ Previous: Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

上一篇「圖示字型 Font Awesome 進階使用方式整理」，說明了如何利用重疊圖示，來組合出一個 FB 分享按鈕。

只做出一個不過癮，本篇要示範如何利用 Font Awesome 圖示字型，繼續做出所有常見的社群分享按鈕，例如 G+、Line、微博、噗浪、推特、郵件等等。

一、特點

9-round-social-share-buttons-自製常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

上面為所有按鈕的示意圖，要觀看動畫效果及操作，請前往展示頁面：

點此看範例網頁

這組社群分享按鈕的特點如下：

不需要安裝外掛程式，可提升頁面載入速度。
不使用圖片，所有的圖案、顏色純粹使用 CSS 及 Font Awesome 圖示字型，縮短讀取時間。
純粹使用超連結進行分享的動作。
滑鼠經過有簡單的動畫
可安裝在網頁多處位置

二、安裝 CSS

以下以 Blogger 的安裝方式來舉例，但本篇的程式碼並不限 Blogger 平台才能安裝，任何網頁都可使用，請參考教學自行擺放在適當位置。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'></link>
<!--圓形分享按鈕-->
<style>
#rndShareBtn a {
display: inline-block;
text-decoration: none;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
}
#rndShareBtn a:hover {
-ms-transform: translateY(-4px);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
#rndShareBtn .fa-stack-1x {
color: #fff;
}
/* FB */
.rs_fb .fa-stack-2x {
color: #3B5998;
}
/* G+ */
.rs_gplus .fa-stack-2x {
color: #d73d32;
}
/* line */
.rs_line .fa-stack-2x {
color: #00c300;
}
/* plurk */
.rs_plurk .fa-stack-2x {
color: #cf682f;
}
.rs_plurk .fa-plurk {
font-family: arial;
font-style: normal;
font-weight: bold;
}
/* weibo */
.rs_weibo .fa-stack-2x {
color: #F5CA59;
}
/* twitter */
.rs_twitter .fa-stack-2x {
color: #2ba9e1;
}
/* tumblr */
.rs_tumblr .fa-stack-2x {
color: #35465d;
}
/* pinterest */
.rs_pinterest .fa-stack-2x {
color: #EA1514;
}
/* email */
.rs_email .fa-stack-2x {
color: #939598;
}
</style>
<!-- -->

開頭綠色字串這一行，可檢查範本中是否已經裝過「Font-Awesome」這個 Icon 圖示字型，若安裝過可刪除此行。
如果想調整圖示的大小尺寸，可參考「圖示字型 Font Awesome 進階使用方式整理」→「二、進階使用方式」→「1. 放大」
其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝分享按鈕(HTML)

接者可將以下程式碼，安裝在 Blogger 範本中任何你想顯示的地方，也可放在側邊欄小工具、網頁底部等等這些常見的位置，總之可以放在多處需要分享的地方。

如果想放在文章結束處的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」→「3. 繼續閱讀」，放在這裡的程式碼後面：

<!--圓形分享按鈕-->
<div id='rndShareBtn'>
<!-- fb -->
<a class='rs_fb' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 FB' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-facebook fa-stack-1x'></i>
</span>
</a>
<!-- g+ -->
<a class='rs_gplus' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 G+' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-google-plus fa-stack-1x'></i>
</span>
</a>
<!-- line -->
<a class='rs_line' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 LINE' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-whatsapp fa-stack-1x'></i>
</span>
</a>
<!-- plurk -->
<a class='rs_plurk' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 PLURK' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-plurk fa-stack-1x'>P</i>
</span>
</a>
<!-- weibo -->
<a class='rs_weibo' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 微博' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-weibo fa-stack-1x'></i>
</span>
</a>
<!-- twitter -->
<a class='rs_twitter' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 TWITTER' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-twitter fa-stack-1x'></i>
</span>
</a>
<!-- tumblr -->
<a class='rs_tumblr' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 TUMBLR' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-tumblr fa-stack-1x'></i>
</span>
</a>
<!-- pinterest -->
<a class='rs_pinterest' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 PINTEREST' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-pinterest-p fa-stack-1x'></i>
</span>
</a>
<!-- email -->
<a class='rs_email' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 EMAIL' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-envelope fa-stack-1x'></i>
</span>
</a>
</div>
<!-- -->

也許你沒有想要 9 個按鈕全放，那麼可根據提示的註釋字串，自行刪除不需要的按鈕。
很重要的一點，這 9 個按鈕的超連結網址，全部都是空下來的，如果這組按鈕你想要用來分享特定網址的話(例如首頁)，那麼請在所有的 href=' '這裡，填入要分享的特定網址。

四、安裝 JS 程式碼

如果這組社群分享按鈕，你不是只拿來分享首頁網址，而是要讓每篇文章都能執行分享，就必須藉助 JS 來取得文章網址，代替我們自動替換分享連結的網址，那麼請務必安裝後續的 JS 程式碼。

接續之前的安裝動作，請在範本中搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

五、注意事項

最後再提醒一下：

圖示大小請按照教學連結改成滿意的尺寸
分享按鈕可以放在網頁多個地方
要分享特定網址(例如首頁)的那一組按鈕，「三、安裝分享按鈕(HTML)」這裡的程式碼，href=' '請一個個填入特定網址。
要用來分享文章的那一組按鈕，href=' '絕對不可填入網址，且必須安裝「四、安裝 JS 程式碼」。

更多社群分享按鈕工具：

↧

讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

January 20, 2016, 3:15 am

≫ Next: 在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

≪ Previous: 安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

floating-fb-fanpage-讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

過去在製作「浮動側邊欄」時，雖然知道這樣的工具可以得到大量曝光機會，不過對於要讓什麼主題在側邊欄浮動，一直沒有強烈的想法。

前陣子幫讀者提出「FB 粉絲團專頁外掛(Page Plugin)」的簡易安裝法後，產生了一個想法，以目前的網路行銷生態來看，讓「Facebook 粉絲頁」在側邊欄浮動，或許是 CP 值非常高的選擇，因為：

1. 曝光率大大提升
2. 粉絲頁按讚的機率自然提升
3. 按讚數增加後，粉絲頁貼文的觸及人數自然就增加了
4. 部落格文章都有貼在粉絲頁的話，自然也增加網站文章的能見度、被分享的機會

那麼本篇就來分享，如何讓 FB 粉絲頁外掛在側邊欄浮動。

一、改良特點

跟一般網站的浮動功能相比，本篇的工具更為強大，特點有這些：

1. 很多網站的浮動區塊，會看到一些異常現象。當浮動的側邊欄欄位比較短的時候，那麼還看不出異狀。不過當浮動區塊塞的東西比較多，也就是欄位比較長的時候，設計的缺陷就會顯露出來了。例如當網頁底部區塊內容很多、有一定高度時，會看到 "浮動區塊覆蓋了網頁底部的內容"，就像這個效果不佳的範例頁面：

點此看錯誤範例

2. 本篇的工具可以設定與底部的距離，在浮動區塊碰觸到底部區塊之前，就會平順地停止浮動。而當訪客往回捲動時，浮動區塊則又恢復浮動功能，就像這個範例網頁：

點此看範例網頁

3. 除了 FB 粉絲頁外掛，如果你想連同其他資訊一起浮動、一同增加曝光機會，例如 RSS 訂閱、Feedly 訂閱按鈕等等，只要把 HTML 碼加入，同樣可以利用這個小工具來實現。

二、安裝 FB 粉絲專頁外掛

1. 以 Blogger 的操作為例，首先到後台 → 版面配置 → 新增小工具 → 「HTML/JavaScript」，填入標題，以及 FB 粉絲頁外掛的程式碼。

2. 程式碼的安裝、以及參數的設定，請見這篇「FB 粉絲團專頁外掛(Page Plugin)」的詳細說明。

fb-fanpage-rss-讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

3. 上圖是本站目前浮動區塊的版面配置，除了「FB 粉絲頁」，如果想要增加其他的浮動內容，可自行把相關的 HTML 程式碼填入這個「HTML/JavaScript」工具即可。不過請控制一下內容多寡，免得浮動區塊超出了螢幕高度。

P.S. 圖中 Feedly 訂閱人數的小工具，請參考「讓 Feedly 按鈕顯示訂閱人數」。

三、調整「版面配置」

1. 儲存「HTML/JavaScript」工具之後，務必在後台「版面配置」的畫面，把要當成浮動欄位的區塊，拉到側邊欄的最下面──

floating-side-column-1-讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

就像上圖紅框「浮動側邊欄」這個小工具這樣，然後就可以按「儲存排列方式」。

2. 接著到「範本」→「編輯 HTML」，搜尋小工具的名稱，例如搜尋 "浮動側邊欄"──

floating-side-column-2-讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

找到這個小工具的區塊後，最重要的是記下這個區塊的 id 名稱，如上圖方框的 "HTML2" 就是我們要找的字串。

四、安裝「浮動功能」程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

一樣停留在「範本」→「編輯 HTML」的畫面，搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

請依以上程式碼行號修改參數──

B：此行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

F：紅色字串請改為「三、調整版面配置」→ 步驟 2 取得的 id 字串；綠色井字符號 "#" 請保留。

G：藍色數字代表浮動區塊距離頁面頂端的 px 值，可自行修改。

H：藍色數字代表浮動區塊距離底部多遠時停止浮動，請根據自己的版面自行調整。

五、提醒

為了怕讀者誤觸天條，雖然這一點已經提過了，不過還是重申一下：

Google Adsense 廣告請不要使用浮動效果，官方「明文告知此事」，請勿以身試法，萬一帳號遭到 Adsense 停權，想要恢復是非常困難的事。

更多實用工具：

本站使用的 Blogger hack 及工具整理

↧

在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

January 22, 2016, 4:25 am

≫ Next: Google 搜尋不到自己的文章嗎？各種搜尋結果不如預期的疑難雜症整理

≪ Previous: 讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

fb-fanpage-blogger-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

雖然已經有一些討論 Blogger 的管道，不過偶爾 WFU 也是會收到讀者從 Facebook 傳來的訊息，詢問「Blogger/部落格/網路」的相關問題。這讓我瞭解到，在 "G+/Blogger網站" 以外的生態圈，對於 FB 這個平台的使用者，還是需要一個可以討論相關主題的管道，原因很簡單：

● 不常用 "FB 帳號" 的人，可能會駐留在 "G+" 平台
● 不常用 "G+ 帳號" 的人，可能會駐留在 "Facebook"
● 有 "PTT 帳號" 的人，可能會一直掛在 "PTT"

於是搜尋了一下 FB 社團，看看有無 Blogger 的中文相關社團，也真的有熱心朋友成立了「Google Blogger 素人聊天室」。因此本文藉機會整理一下，各種可以針對 Blogger 來討論、提問、交流的中文平台。

一、Blogger 中文論壇

blogger-forum-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

1. 網址

Blogger 中文論壇：http://blogger.wfublog.com/

2. 發文限制

需要有 Google 帳號

3. 特點

資訊分類清楚，可依照討論區主題提問，最推薦的提問平台。
使用者提問的資料量很多
論壇整理了精華區、常見 FAQ
搜尋資訊方便、快速，找資料的第二推薦場所
更多功能使用的介紹請參考「BLOGGER 中文論壇正式成立」

二、G+ 社群

google-plus-blogger-community-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

1. 網址

Blogger中文社群：https://plus.google.com/communities/103807083735607134704

2. 發文限制

需要有 Google 帳號

3. 特點

跟 G+ 綁在一起，與其他 G+ 使用者交流方便
資訊分類清楚，可依照討論區主題提問
雖然帳面上社群成員數很多，但由於 G+ 式微，真正活躍的使用者不多，互動較不熱絡
文章生命週期短，最新的回覆無法自動置頂，導致優質討論串無法再次、持續地被關注，讓更多人分享到有用的資訊。G+ 社群缺乏這個討論區、論壇最重要的特質，是致命的缺陷。

三、FB 社團

fb-blogger-fanpage-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

1. 網址

Blogger 素人聊天室：https://www.facebook.com/groups/bloggerdiscuss/

2. 發文限制

需要有 FB 帳號

3. 特點

無法資訊分類，不能依照討論區主題提問。
社團的成員數跟 G+ 社群比相對上較少，但由於 FB 平台的常態使用者遠勝 G+，因此社團的活躍使用者多，互動比較熱絡，成長性比 G+ 社群佳，最適合與愛好者交流。
因社團創辦者 +李宣澤邀 WFU 擔任管理員，因此在社團若有相關主題的提問，我也會常駐在此回覆。
FB 社團的最新回覆，可讓該討論串自動置頂，雖然 FB 社團無法資訊分類，但保有這項自動置頂的特質，讓他比 G+ 社群更適合討論區這項用途。

四、PTT

ptt-blog-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

1. 網址

PTT Blog 版：https://www.ptt.cc/bbs/Blog/index.html

2. 發文限制

需要有 PTT 帳號

3. 特點

這是 "部落格" 討論區，非獨立的 "Blogger" 討論區，因此包含了所有其他部落格平台的貼文。
對於一般網路使用者有註冊、操作上的門檻及障礙。
搜尋功能方便快速
人氣低、常駐回答者少
比較適合搜尋資訊，不利於提問與交流。

五、WFU BLOG

文章分類清楚
資訊量龐大
搜尋資訊方便、快速，找資料的第一推薦場所。
需要討論、提問，請於相關文章直接留言即可。

更多 Blogger 相關主題：

↧

Google 搜尋不到自己的文章嗎？各種搜尋結果不如預期的疑難雜症整理

January 25, 2016, 4:05 am

≫ Next: 使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

≪ Previous: 在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

這個 Blogger 中文論壇貼文詢問為何「Google搜尋結果找不到文章」？相信站長們都很關心自己網站的文章，在搜尋引擎的能見度，畢竟搜尋結果會直接影響網站流量。如果能弄清楚 Google 的一些運作原理，就能知道哪些事是我們的基本動作。

類似的提問並不算少見，然而細節又有些微差異，因此藉這機會整理一下各種常見的案例，以 FAQ 的方式呈現，方便日後查詢。

(圖片出處: pixabay.com)

Q1：我寫的文章用 Google 搜尋引擎, 從來不會顯示？

要讓搜尋引擎知道我們的網站存在，首先得讓 Google 認識我們，讓搜尋引擎的資料庫有網站的資料，這樣 Google 才能建立索引。請參考「Google 網站管理員的活用方法」進行以下步驟：

1. 網站登錄

網站管理員網址：https://www.google.com/webmasters/

登入 Google 帳號後，進入以上官網，接著參考這篇「Google Webmaster 網站管理員」的 Step by Step 教學，來完成網站登錄及驗證的動作。

2. 提交網站地圖

接著必須提交網站地圖，Google 搜尋引擎才能以比較快的速度收錄文章，Blogger 可參考這篇「Blogger 提供新的網站地圖(sitemap)格式﹍一勞永逸的提交方法」。

在提交網站地圖的畫面，就能查詢目前網站文章被搜尋引擎收錄的進度了。

3. 查詢搜尋結果

以上兩點是基本動作，可確保文章被 Google 收錄。如果想知道從 Google 可以搜尋到幾篇網站的文章，可在 Google 搜尋框輸入：

site:www.wfublog.com
將紅字改為自己的網址即可。

Q2：我已經按指示提交文章，為何還是搜尋不到文章？

這是文章開頭的案例，原 PO 表示 "發表文章後....沒辦法看見文章的標題出現在搜尋結果中"。根據查驗後，這個案例的結果如下：

1. 在搜尋引擎可看到該篇文章，研判是因為新文章沒那麼快收錄，才會原 PO 發文時尚未搜尋到文章，所以只要稍待幾天就會有結果。

2. 原 PO 表示 "總不可能每篇都去手動提交" → 的確，手動提交可以加快文章收錄的速度，不想每次都手動提交的話，請見下一點。

3. Google 伺服器的工作量十分龐大，每天都有無數個新網站、以及更多的文章量產生。就像我們一天只有 24 小時可用，搜尋引擎的伺服器數量也是有限，無法即時對每個網頁、每篇文章進行索引，只能根據網站的知名度、流量決定權重，以及判斷網站會定期更新的時間點，前來進行索引的工作。為了吸引機器人縮短前來爬網站的間隔，我們必須先讓網站茁壯。而在那之前，只好耐心等待 Google 的青睞了(或是手動進行提交)。

Q3：我發的旅遊文，為何旅遊版比自己部落格排名還前面？

Q3 是這個「Blogger 中文論壇討論串」的案例，原 PO 同樣內容的文章，除了自己的網站，可能也同時發在其他論壇、討論區。這樣的情形也會出現在同時經營多個部落格平台，例如 "痞客邦"、"Blogger"、"巴哈姆特"、"Xuite隨意窩"...等等。

1. 一文多發的時候，哪個平台的排名在前很難講，因為我們不會知道 Google 的演算法。不過論壇、討論區這類網站的權重，通常會勝過我們自己經營的網站，除非我們的網站經營得比這些論壇還久。但話說回來，如果我們經營的網站權重更高的話，那麼也沒必要把文章貼在別的論壇了(自然有人會幫忙轉貼)。

2. 為了不讓主要網站的流量被搶走，建議文章發在主網站就好，其他地方若要貼文，也不要從頭到尾複製貼上，免得 Google 判定為複製文章，兩邊都造成扣分。

3. 更多詳細的建言，可參考原討論串，有高手更詳細的說明。

Q4：我有設定 "搜尋說明"，但是搜尋結果沒看到？

"搜尋說明" 就是搜尋結果中，文章標題及網址下方的敘述文字。Blogger 設定文章說明的方法，請參考「Blogger 文章設定選項」→「六、搜尋說明」

Q4 是這個「Blogger 中文論壇討論串」的案例，這個現象背後的觀念其實滿重要的，值得讀者瞭解其原理。

其實不只 "搜尋說明"，在搜尋結果中，就算是 "文章標題" 也可能跟我們的命名截然不同。為何會如此呢？有兩種原因：

1. Google 為了防止操作 SEO 的人，在文章標題塞滿關鍵字，會自動根據文章的內容與標題的關連性，來調整 "文章標題" 的字串，那麼就可能在搜尋結果看到 Google 判定的文章標題。

2. 另一種情況是 Google 會根據使用者搜尋的 "關鍵字"，自動調整顯示出來的 "文章標題"。因此同樣的一篇文章，搜尋的字串不同，搜尋結果的標題也可能不一樣，這是為了讓「搜尋結果符合關鍵字」產生的現象。

而 Q4 的案例，則是類似第 2 點，雖然我們為文章設定了 "搜尋說明"，但是當搜尋的關鍵字沒有出現在 "搜尋說明" 之中時，搜尋引擎會盡量從文章內容找出符合 "關鍵字" 的字串來顯示，才會讓原 PO 誤以為文章設定的 "搜尋說明" 怎麼沒看到。

這個案例，當我試著改用 "文章標題" 來搜尋該篇文章時，"搜尋說明" 就正常顯示出來了。

Q5：我在 "搜尋說明" 放入許多關鍵字，應該可以提高被搜尋到的機會？

這是某個讀者的提問及案例，部落格主題為旅遊，我看到其網站或文章的 "搜尋說明" 長得類似這樣：

高雄美食,高雄餐廳,高雄小吃,高雄好吃,高雄必吃,高雄夜市,高雄推薦, 高雄飯店,台南必吃,台南美食

我相信這麼做應該是看了一些古早的 SEO 文章，類似像在 META 標籤中塞 keyword 的作法。不過 Google 很久以前就更改了演算法，同時把這類 "塞關鍵字" 的行為視為操作 SEO，搜尋結果會給網站帶來負分的。

因此我的建議是，"搜尋說明" 意思就是描述網站、或文章內容的一段文字，正常該怎麼描述就怎麼描述，這段話是需要給 "人" 看的，而不是給 "機器" 看。我們就當作是寫作練習，然後適時、自然地插入幾個關鍵字，那麼這段敘述說明，就能同時讓 "人" 及 "機器" 都看得懂了，例如改成這樣：

台南及高雄最在地的美食部落格，所有必吃餐廳、夜市、小吃，讓我們為你一網打盡！

Q6：我的搜尋排名要怎麼提升到第一頁？

這是大哉問，也是新手站長的常見問題。第一頁為兵家必爭之地，要搶第一 WFU 只能說各憑本事了，以下是簡單的建議：

讓自己成為該領域的專家
把部落格經營到同性質第一名
寫別人沒寫過的主題
想辦法增加流量
有預算的話，下廣告給 Google！

Q7：搜尋結果如何出現其他分頁索引？

Q7 是來自這個討論串「請教搜尋引擎索引的問題‏」，原 PO 詢問搜尋結果網站名稱的下方，如何出現額外的分頁內容。

基本上這是 Google 對於信任度較高的網站，所給予的額外獎勵(Bonus)，這些內容會自動產生，很難自行操作，所以必須想辦法讓網站成長，等到獲得 Google 認可的那一天，就會自動出現了。

以下說明直接複製貼上：

這個功能稱為「網站連結」(Sitelinks)，無法設定、也不需要設定，Google 會根據網站的規模，自行決定是否出現 "網站連結"。
可參考 Google 官方說明：「網站連結」
以及這篇：「Google 網站連結（Sitelinks）的優化技巧」

Google 搜尋相關工具：

↧

使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

January 27, 2016, 8:11 pm

≫ Next: 部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧﹍如何進行版本控制, 當內容被覆蓋或誤刪時可以救回

≪ Previous: Google 搜尋不到自己的文章嗎？各種搜尋結果不如預期的疑難雜症整理

font-awesome-cheat-sheet-使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

最近使用「Font Awesome」替換了網站各處所有的小圖示，包含「社群分享按鈕」、各式側邊欄及網頁底部圖示。由於官網並未提供方便的安裝語法查詢管道，導致必須一一點開個別圖示的頁面來複製語法，因而浪費不少時間。

於是整理了本篇的 Font Awesome 圖示一覽表、以及安裝語法速查表(cheat sheet)，有需要的讀者可將網址存在書籤，方便隨時查閱。

一、使用方法

1. 官網 cheat sheet

這個官網的「Font Awesome 圖示一覽表」雖可查閱所有圖示，但要得到安裝語法，卻得一個個點開圖示、另開頁面才能看到。

font-awesome-official-cheat-sheet-使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

其實官網也有提供「Font Awesome 語法速查表」，如上圖，提供了 "圖示"、"class 名稱"、"Unicode" 等資訊。

說實話，這並不好用，因為複製完還必須加工，使用者要自己填補為完整的 HTML 語法，Font Awesome 圖示才能顯示出來。

2. 速查表 HTML 使用技巧

本篇將官網的表格改良，圖示後面可直接複製 HTML 語法。簡單舉兩個使用範例：

若想使用 FB 圖示，搜尋字串 "facebook" 後，直接複製後面的語法 <i class="fa fa-facebook-official"></i>，就可顯示圖案 ""。
若想使用 "標籤" 圖示，搜尋字串 "tag"，直到找到滿意的那一個為止，例如這個圖案 ""，那麼複製後面的語法 <i class="fa fa-tags"></i>即可。

3. 速查表 CSS 使用技巧

如果習慣利用 CSS 來產生圖示，那麼可以利用偽類 :after、:before，塞入速查表 CSS 那一欄的內容即可。

二、Font Awesome 速查表

以下的速查表內容，包含了 Font Awesome 最新版本 4.5 的所有圖示，請先按照「圖示字型 Font Awesome 使用方式」→「一、簡介及安裝」的說明，安裝最新版的 Font Awesome。

圖示	HTML	UNICODE	CSS
	<i class="fa fa-500px"></i>		content: "\f26e";
	<i class="fa fa-adjust"></i>		content: "\f042";
	<i class="fa fa-adn"></i>		content: "\f170";
	<i class="fa fa-align-center"></i>		content: "\f037";
	<i class="fa fa-align-justify"></i>		content: "\f039";
	<i class="fa fa-align-left"></i>		content: "\f036";
	<i class="fa fa-align-right"></i>		content: "\f038";
	<i class="fa fa-amazon"></i>		content: "\f270";
	<i class="fa fa-ambulance"></i>		content: "\f0f9";
	<i class="fa fa-anchor"></i>		content: "\f13d";
	<i class="fa fa-android"></i>		content: "\f17b";
	<i class="fa fa-angellist"></i>		content: "\f209";
	<i class="fa fa-angle-double-down"></i>		content: "\f103";
	<i class="fa fa-angle-double-left"></i>		content: "\f100";
	<i class="fa fa-angle-double-right"></i>		content: "\f101";
	<i class="fa fa-angle-double-up"></i>		content: "\f102";
	<i class="fa fa-angle-down"></i>		content: "\f107";
	<i class="fa fa-angle-left"></i>		content: "\f104";
	<i class="fa fa-angle-right"></i>		content: "\f105";
	<i class="fa fa-angle-up"></i>		content: "\f106";
	<i class="fa fa-apple"></i>		content: "\f179";
	<i class="fa fa-archive"></i>		content: "\f187";
	<i class="fa fa-area-chart"></i>		content: "\f1fe";
	<i class="fa fa-arrow-circle-down"></i>		content: "\f0ab";
	<i class="fa fa-arrow-circle-left"></i>		content: "\f0a8";
	<i class="fa fa-arrow-circle-o-down"></i>		content: "\f01a";
	<i class="fa fa-arrow-circle-o-left"></i>		content: "\f190";
	<i class="fa fa-arrow-circle-o-right"></i>		content: "\f18e";
	<i class="fa fa-arrow-circle-o-up"></i>		content: "\f01b";
	<i class="fa fa-arrow-circle-right"></i>		content: "\f0a9";
	<i class="fa fa-arrow-circle-up"></i>		content: "\f0aa";
	<i class="fa fa-arrow-down"></i>		content: "\f063";
	<i class="fa fa-arrow-left"></i>		content: "\f060";
	<i class="fa fa-arrow-right"></i>		content: "\f061";
	<i class="fa fa-arrow-up"></i>		content: "\f062";
	<i class="fa fa-arrows"></i>		content: "\f047";
	<i class="fa fa-arrows-alt"></i>		content: "\f0b2";
	<i class="fa fa-arrows-h"></i>		content: "\f07e";
	<i class="fa fa-arrows-v"></i>		content: "\f07d";
	<i class="fa fa-asterisk"></i>		content: "\f069";
	<i class="fa fa-at"></i>		content: "\f1fa";
	<i class="fa fa-automobile"></i>		content: "\f1b9";
	<i class="fa fa-backward"></i>		content: "\f04a";
	<i class="fa fa-balance-scale"></i>		content: "\f24e";
	<i class="fa fa-ban"></i>		content: "\f05e";
	<i class="fa fa-bank"></i>		content: "\f19c";
	<i class="fa fa-bar-chart"></i>		content: "\f080";
	<i class="fa fa-bar-chart-o"></i>		content: "\f080";
	<i class="fa fa-barcode"></i>		content: "\f02a";
	<i class="fa fa-bars"></i>		content: "\f0c9";
	<i class="fa fa-battery-0"></i>		content: "\f244";
	<i class="fa fa-battery-1"></i>		content: "\f243";
	<i class="fa fa-battery-2"></i>		content: "\f242";
	<i class="fa fa-battery-3"></i>		content: "\f241";
	<i class="fa fa-battery-4"></i>		content: "\f240";
	<i class="fa fa-battery-empty"></i>		content: "\f244";
	<i class="fa fa-battery-full"></i>		content: "\f240";
	<i class="fa fa-battery-half"></i>		content: "\f242";
	<i class="fa fa-battery-quarter"></i>		content: "\f243";
	<i class="fa fa-battery-three-quarters"></i>		content: "\f241";
	<i class="fa fa-bed"></i>		content: "\f236";
	<i class="fa fa-beer"></i>		content: "\f0fc";
	<i class="fa fa-behance"></i>		content: "\f1b4";
	<i class="fa fa-behance-square"></i>		content: "\f1b5";
	<i class="fa fa-bell"></i>		content: "\f0f3";
	<i class="fa fa-bell-o"></i>		content: "\f0a2";
	<i class="fa fa-bell-slash"></i>		content: "\f1f6";
	<i class="fa fa-bell-slash-o"></i>		content: "\f1f7";
	<i class="fa fa-bicycle"></i>		content: "\f206";
	<i class="fa fa-binoculars"></i>		content: "\f1e5";
	<i class="fa fa-birthday-cake"></i>		content: "\f1fd";
	<i class="fa fa-bitbucket"></i>		content: "\f171";
	<i class="fa fa-bitbucket-square"></i>		content: "\f172";
	<i class="fa fa-bitcoin"></i>		content: "\f15a";
	<i class="fa fa-black-tie"></i>		content: "\f27e";
	<i class="fa fa-bluetooth"></i>		content: "\f293";
	<i class="fa fa-bluetooth-b"></i>		content: "\f294";
	<i class="fa fa-bold"></i>		content: "\f032";
	<i class="fa fa-bolt"></i>		content: "\f0e7";
	<i class="fa fa-bomb"></i>		content: "\f1e2";
	<i class="fa fa-book"></i>		content: "\f02d";
	<i class="fa fa-bookmark"></i>		content: "\f02e";
	<i class="fa fa-bookmark-o"></i>		content: "\f097";
	<i class="fa fa-briefcase"></i>		content: "\f0b1";
	<i class="fa fa-btc"></i>		content: "\f15a";
	<i class="fa fa-bug"></i>		content: "\f188";
	<i class="fa fa-building"></i>		content: "\f1ad";
	<i class="fa fa-building-o"></i>		content: "\f0f7";
	<i class="fa fa-bullhorn"></i>		content: "\f0a1";
	<i class="fa fa-bullseye"></i>		content: "\f140";
	<i class="fa fa-bus"></i>		content: "\f207";
	<i class="fa fa-buysellads"></i>		content: "\f20d";
	<i class="fa fa-cab"></i>		content: "\f1ba";
	<i class="fa fa-calculator"></i>		content: "\f1ec";
	<i class="fa fa-calendar"></i>		content: "\f073";
	<i class="fa fa-calendar-check-o"></i>		content: "\f274";
	<i class="fa fa-calendar-minus-o"></i>		content: "\f272";
	<i class="fa fa-calendar-o"></i>		content: "\f133";
	<i class="fa fa-calendar-plus-o"></i>		content: "\f271";
	<i class="fa fa-calendar-times-o"></i>		content: "\f273";
	<i class="fa fa-camera"></i>		content: "\f030";
	<i class="fa fa-camera-retro"></i>		content: "\f083";
	<i class="fa fa-car"></i>		content: "\f1b9";
	<i class="fa fa-caret-down"></i>		content: "\f0d7";
	<i class="fa fa-caret-left"></i>		content: "\f0d9";
	<i class="fa fa-caret-right"></i>		content: "\f0da";
	<i class="fa fa-caret-square-o-down"></i>		content: "\f150";
	<i class="fa fa-caret-square-o-left"></i>		content: "\f191";
	<i class="fa fa-caret-square-o-right"></i>		content: "\f152";
	<i class="fa fa-caret-square-o-up"></i>		content: "\f151";
	<i class="fa fa-caret-up"></i>		content: "\f0d8";
	<i class="fa fa-cart-arrow-down"></i>		content: "\f218";
	<i class="fa fa-cart-plus"></i>		content: "\f217";
	<i class="fa fa-cc"></i>		content: "\f20a";
	<i class="fa fa-cc-amex"></i>		content: "\f1f3";
	<i class="fa fa-cc-diners-club"></i>		content: "\f24c";
	<i class="fa fa-cc-discover"></i>		content: "\f1f2";
	<i class="fa fa-cc-jcb"></i>		content: "\f24b";
	<i class="fa fa-cc-mastercard"></i>		content: "\f1f1";
	<i class="fa fa-cc-paypal"></i>		content: "\f1f4";
	<i class="fa fa-cc-stripe"></i>		content: "\f1f5";
	<i class="fa fa-cc-visa"></i>		content: "\f1f0";
	<i class="fa fa-certificate"></i>		content: "\f0a3";
	<i class="fa fa-chain"></i>		content: "\f0c1";
	<i class="fa fa-chain-broken"></i>		content: "\f127";
	<i class="fa fa-check"></i>		content: "\f00c";
	<i class="fa fa-check-circle"></i>		content: "\f058";
	<i class="fa fa-check-circle-o"></i>		content: "\f05d";
	<i class="fa fa-check-square"></i>		content: "\f14a";
	<i class="fa fa-check-square-o"></i>		content: "\f046";
	<i class="fa fa-chevron-circle-down"></i>		content: "\f13a";
	<i class="fa fa-chevron-circle-left"></i>		content: "\f137";
	<i class="fa fa-chevron-circle-right"></i>		content: "\f138";
	<i class="fa fa-chevron-circle-up"></i>		content: "\f139";
	<i class="fa fa-chevron-down"></i>		content: "\f078";
	<i class="fa fa-chevron-left"></i>		content: "\f053";
	<i class="fa fa-chevron-right"></i>		content: "\f054";
	<i class="fa fa-chevron-up"></i>		content: "\f077";
	<i class="fa fa-child"></i>		content: "\f1ae";
	<i class="fa fa-chrome"></i>		content: "\f268";
	<i class="fa fa-circle"></i>		content: "\f111";
	<i class="fa fa-circle-o"></i>		content: "\f10c";
	<i class="fa fa-circle-o-notch"></i>		content: "\f1ce";
	<i class="fa fa-circle-thin"></i>		content: "\f1db";
	<i class="fa fa-clipboard"></i>		content: "\f0ea";
	<i class="fa fa-clock-o"></i>		content: "\f017";
	<i class="fa fa-clone"></i>		content: "\f24d";
	<i class="fa fa-close"></i>		content: "\f00d";
	<i class="fa fa-cloud"></i>		content: "\f0c2";
	<i class="fa fa-cloud-download"></i>		content: "\f0ed";
	<i class="fa fa-cloud-upload"></i>		content: "\f0ee";
	<i class="fa fa-cny"></i>		content: "\f157";
	<i class="fa fa-code"></i>		content: "\f121";
	<i class="fa fa-code-fork"></i>		content: "\f126";
	<i class="fa fa-codepen"></i>		content: "\f1cb";
	<i class="fa fa-codiepie"></i>		content: "\f284";
	<i class="fa fa-coffee"></i>		content: "\f0f4";
	<i class="fa fa-cog"></i>		content: "\f013";
	<i class="fa fa-cogs"></i>		content: "\f085";
	<i class="fa fa-columns"></i>		content: "\f0db";
	<i class="fa fa-comment"></i>		content: "\f075";
	<i class="fa fa-comment-o"></i>		content: "\f0e5";
	<i class="fa fa-commenting"></i>		content: "\f27a";
	<i class="fa fa-commenting-o"></i>		content: "\f27b";
	<i class="fa fa-comments"></i>		content: "\f086";
	<i class="fa fa-comments-o"></i>		content: "\f0e6";
	<i class="fa fa-compass"></i>		content: "\f14e";
	<i class="fa fa-compress"></i>		content: "\f066";
	<i class="fa fa-connectdevelop"></i>		content: "\f20e";
	<i class="fa fa-contao"></i>		content: "\f26d";
	<i class="fa fa-copy"></i>		content: "\f0c5";
	<i class="fa fa-copyright"></i>		content: "\f1f9";
	<i class="fa fa-creative-commons"></i>		content: "\f25e";
	<i class="fa fa-credit-card"></i>		content: "\f09d";
	<i class="fa fa-credit-card-alt"></i>		content: "\f283";
	<i class="fa fa-crop"></i>		content: "\f125";
	<i class="fa fa-crosshairs"></i>		content: "\f05b";
	<i class="fa fa-css3"></i>		content: "\f13c";
	<i class="fa fa-cube"></i>		content: "\f1b2";
	<i class="fa fa-cubes"></i>		content: "\f1b3";
	<i class="fa fa-cut"></i>		content: "\f0c4";
	<i class="fa fa-cutlery"></i>		content: "\f0f5";
	<i class="fa fa-dashboard"></i>		content: "\f0e4";
	<i class="fa fa-dashcube"></i>		content: "\f210";
	<i class="fa fa-database"></i>		content: "\f1c0";
	<i class="fa fa-dedent"></i>		content: "\f03b";
	<i class="fa fa-delicious"></i>		content: "\f1a5";
	<i class="fa fa-desktop"></i>		content: "\f108";
	<i class="fa fa-deviantart"></i>		content: "\f1bd";
	<i class="fa fa-diamond"></i>		content: "\f219";
	<i class="fa fa-digg"></i>		content: "\f1a6";
	<i class="fa fa-dollar"></i>		content: "\f155";
	<i class="fa fa-dot-circle-o"></i>		content: "\f192";
	<i class="fa fa-download"></i>		content: "\f019";
	<i class="fa fa-dribbble"></i>		content: "\f17d";
	<i class="fa fa-dropbox"></i>		content: "\f16b";
	<i class="fa fa-drupal"></i>		content: "\f1a9";
	<i class="fa fa-edge"></i>		content: "\f282";
	<i class="fa fa-edit"></i>		content: "\f044";
	<i class="fa fa-eject"></i>		content: "\f052";
	<i class="fa fa-ellipsis-h"></i>		content: "\f141";
	<i class="fa fa-ellipsis-v"></i>		content: "\f142";
	<i class="fa fa-empire"></i>		content: "\f1d1";
	<i class="fa fa-envelope"></i>		content: "\f0e0";
	<i class="fa fa-envelope-o"></i>		content: "\f003";
	<i class="fa fa-envelope-square"></i>		content: "\f199";
	<i class="fa fa-eraser"></i>		content: "\f12d";
	<i class="fa fa-eur"></i>		content: "\f153";
	<i class="fa fa-euro"></i>		content: "\f153";
	<i class="fa fa-exchange"></i>		content: "\f0ec";
	<i class="fa fa-exclamation"></i>		content: "\f12a";
	<i class="fa fa-exclamation-circle"></i>		content: "\f06a";
	<i class="fa fa-exclamation-triangle"></i>		content: "\f071";
	<i class="fa fa-expand"></i>		content: "\f065";
	<i class="fa fa-expeditedssl"></i>		content: "\f23e";
	<i class="fa fa-external-link"></i>		content: "\f08e";
	<i class="fa fa-external-link-square"></i>		content: "\f14c";
	<i class="fa fa-eye"></i>		content: "\f06e";
	<i class="fa fa-eye-slash"></i>		content: "\f070";
	<i class="fa fa-eyedropper"></i>		content: "\f1fb";
	<i class="fa fa-facebook"></i>		content: "\f09a";
	<i class="fa fa-facebook-f"></i>		content: "\f09a";
	<i class="fa fa-facebook-official"></i>		content: "\f230";
	<i class="fa fa-facebook-square"></i>		content: "\f082";
	<i class="fa fa-fast-backward"></i>		content: "\f049";
	<i class="fa fa-fast-forward"></i>		content: "\f050";
	<i class="fa fa-fax"></i>		content: "\f1ac";
	<i class="fa fa-feed"></i>		content: "\f09e";
	<i class="fa fa-female"></i>		content: "\f182";
	<i class="fa fa-fighter-jet"></i>		content: "\f0fb";
	<i class="fa fa-file"></i>		content: "\f15b";
	<i class="fa fa-file-archive-o"></i>		content: "\f1c6";
	<i class="fa fa-file-audio-o"></i>		content: "\f1c7";
	<i class="fa fa-file-code-o"></i>		content: "\f1c9";
	<i class="fa fa-file-excel-o"></i>		content: "\f1c3";
	<i class="fa fa-file-image-o"></i>		content: "\f1c5";
	<i class="fa fa-file-movie-o"></i>		content: "\f1c8";
	<i class="fa fa-file-o"></i>		content: "\f016";
	<i class="fa fa-file-pdf-o"></i>		content: "\f1c1";
	<i class="fa fa-file-photo-o"></i>		content: "\f1c5";
	<i class="fa fa-file-picture-o"></i>		content: "\f1c5";
	<i class="fa fa-file-powerpoint-o"></i>		content: "\f1c4";
	<i class="fa fa-file-sound-o"></i>		content: "\f1c7";
	<i class="fa fa-file-text"></i>		content: "\f15c";
	<i class="fa fa-file-text-o"></i>		content: "\f0f6";
	<i class="fa fa-file-video-o"></i>		content: "\f1c8";
	<i class="fa fa-file-word-o"></i>		content: "\f1c2";
	<i class="fa fa-file-zip-o"></i>		content: "\f1c6";
	<i class="fa fa-files-o"></i>		content: "\f0c5";
	<i class="fa fa-film"></i>		content: "\f008";
	<i class="fa fa-filter"></i>		content: "\f0b0";
	<i class="fa fa-fire"></i>		content: "\f06d";
	<i class="fa fa-fire-extinguisher"></i>		content: "\f134";
	<i class="fa fa-firefox"></i>		content: "\f269";
	<i class="fa fa-flag"></i>		content: "\f024";
	<i class="fa fa-flag-checkered"></i>		content: "\f11e";
	<i class="fa fa-flag-o"></i>		content: "\f11d";
	<i class="fa fa-flash"></i>		content: "\f0e7";
	<i class="fa fa-flask"></i>		content: "\f0c3";
	<i class="fa fa-flickr"></i>		content: "\f16e";
	<i class="fa fa-floppy-o"></i>		content: "\f0c7";
	<i class="fa fa-folder"></i>		content: "\f07b";
	<i class="fa fa-folder-o"></i>		content: "\f114";
	<i class="fa fa-folder-open"></i>		content: "\f07c";
	<i class="fa fa-folder-open-o"></i>		content: "\f115";
	<i class="fa fa-font"></i>		content: "\f031";
	<i class="fa fa-fonticons"></i>		content: "\f280";
	<i class="fa fa-fort-awesome"></i>		content: "\f286";
	<i class="fa fa-forumbee"></i>		content: "\f211";
	<i class="fa fa-forward"></i>		content: "\f04e";
	<i class="fa fa-foursquare"></i>		content: "\f180";
	<i class="fa fa-frown-o"></i>		content: "\f119";
	<i class="fa fa-futbol-o"></i>		content: "\f1e3";
	<i class="fa fa-gamepad"></i>		content: "\f11b";
	<i class="fa fa-gavel"></i>		content: "\f0e3";
	<i class="fa fa-gbp"></i>		content: "\f154";
	<i class="fa fa-ge"></i>		content: "\f1d1";
	<i class="fa fa-gear"></i>		content: "\f013";
	<i class="fa fa-gears"></i>		content: "\f085";
	<i class="fa fa-genderless"></i>		content: "\f22d";
	<i class="fa fa-get-pocket"></i>		content: "\f265";
	<i class="fa fa-gg"></i>		content: "\f260";
	<i class="fa fa-gg-circle"></i>		content: "\f261";
	<i class="fa fa-gift"></i>		content: "\f06b";
	<i class="fa fa-git"></i>		content: "\f1d3";
	<i class="fa fa-git-square"></i>		content: "\f1d2";
	<i class="fa fa-github"></i>		content: "\f09b";
	<i class="fa fa-github-alt"></i>		content: "\f113";
	<i class="fa fa-github-square"></i>		content: "\f092";
	<i class="fa fa-gittip"></i>		content: "\f184";
	<i class="fa fa-glass"></i>		content: "\f000";
	<i class="fa fa-globe"></i>		content: "\f0ac";
	<i class="fa fa-google"></i>		content: "\f1a0";
	<i class="fa fa-google-plus"></i>		content: "\f0d5";
	<i class="fa fa-google-plus-square"></i>		content: "\f0d4";
	<i class="fa fa-google-wallet"></i>		content: "\f1ee";
	<i class="fa fa-graduation-cap"></i>		content: "\f19d";
	<i class="fa fa-gratipay"></i>		content: "\f184";
	<i class="fa fa-group"></i>		content: "\f0c0";
	<i class="fa fa-h-square"></i>		content: "\f0fd";
	<i class="fa fa-hacker-news"></i>		content: "\f1d4";
	<i class="fa fa-hand-grab-o"></i>		content: "\f255";
	<i class="fa fa-hand-lizard-o"></i>		content: "\f258";
	<i class="fa fa-hand-o-down"></i>		content: "\f0a7";
	<i class="fa fa-hand-o-left"></i>		content: "\f0a5";
	<i class="fa fa-hand-o-right"></i>		content: "\f0a4";
	<i class="fa fa-hand-o-up"></i>		content: "\f0a6";
	<i class="fa fa-hand-paper-o"></i>		content: "\f256";
	<i class="fa fa-hand-peace-o"></i>		content: "\f25b";
	<i class="fa fa-hand-pointer-o"></i>		content: "\f25a";
	<i class="fa fa-hand-rock-o"></i>		content: "\f255";
	<i class="fa fa-hand-scissors-o"></i>		content: "\f257";
	<i class="fa fa-hand-spock-o"></i>		content: "\f259";
	<i class="fa fa-hand-stop-o"></i>		content: "\f256";
	<i class="fa fa-hashtag"></i>		content: "\f292";
	<i class="fa fa-hdd-o"></i>		content: "\f0a0";
	<i class="fa fa-header"></i>		content: "\f1dc";
	<i class="fa fa-headphones"></i>		content: "\f025";
	<i class="fa fa-heart"></i>		content: "\f004";
	<i class="fa fa-heart-o"></i>		content: "\f08a";
	<i class="fa fa-heartbeat"></i>		content: "\f21e";
	<i class="fa fa-history"></i>		content: "\f1da";
	<i class="fa fa-home"></i>		content: "\f015";
	<i class="fa fa-hospital-o"></i>		content: "\f0f8";
	<i class="fa fa-hotel"></i>		content: "\f236";
	<i class="fa fa-hourglass"></i>		content: "\f254";
	<i class="fa fa-hourglass-1"></i>		content: "\f251";
	<i class="fa fa-hourglass-2"></i>		content: "\f252";
	<i class="fa fa-hourglass-3"></i>		content: "\f253";
	<i class="fa fa-hourglass-end"></i>		content: "\f253";
	<i class="fa fa-hourglass-half"></i>		content: "\f252";
	<i class="fa fa-hourglass-o"></i>		content: "\f250";
	<i class="fa fa-hourglass-start"></i>		content: "\f251";
	<i class="fa fa-houzz"></i>		content: "\f27c";
	<i class="fa fa-html5"></i>		content: "\f13b";
	<i class="fa fa-i-cursor"></i>		content: "\f246";
	<i class="fa fa-ils"></i>		content: "\f20b";
	<i class="fa fa-image"></i>		content: "\f03e";
	<i class="fa fa-inbox"></i>		content: "\f01c";
	<i class="fa fa-indent"></i>		content: "\f03c";
	<i class="fa fa-industry"></i>		content: "\f275";
	<i class="fa fa-info"></i>		content: "\f129";
	<i class="fa fa-info-circle"></i>		content: "\f05a";
	<i class="fa fa-inr"></i>		content: "\f156";
	<i class="fa fa-instagram"></i>		content: "\f16d";
	<i class="fa fa-institution"></i>		content: "\f19c";
	<i class="fa fa-internet-explorer"></i>		content: "\f26b";
	<i class="fa fa-intersex"></i>		content: "\f224";
	<i class="fa fa-ioxhost"></i>		content: "\f208";
	<i class="fa fa-italic"></i>		content: "\f033";
	<i class="fa fa-joomla"></i>		content: "\f1aa";
	<i class="fa fa-jpy"></i>		content: "\f157";
	<i class="fa fa-jsfiddle"></i>		content: "\f1cc";
	<i class="fa fa-key"></i>		content: "\f084";
	<i class="fa fa-keyboard-o"></i>		content: "\f11c";
	<i class="fa fa-krw"></i>		content: "\f159";
	<i class="fa fa-language"></i>		content: "\f1ab";
	<i class="fa fa-laptop"></i>		content: "\f109";
	<i class="fa fa-lastfm"></i>		content: "\f202";
	<i class="fa fa-lastfm-square"></i>		content: "\f203";
	<i class="fa fa-leaf"></i>		content: "\f06c";
	<i class="fa fa-leanpub"></i>		content: "\f212";
	<i class="fa fa-legal"></i>		content: "\f0e3";
	<i class="fa fa-lemon-o"></i>		content: "\f094";
	<i class="fa fa-level-down"></i>		content: "\f149";
	<i class="fa fa-level-up"></i>		content: "\f148";
	<i class="fa fa-life-bouy"></i>		content: "\f1cd";
	<i class="fa fa-life-buoy"></i>		content: "\f1cd";
	<i class="fa fa-life-ring"></i>		content: "\f1cd";
	<i class="fa fa-life-saver"></i>		content: "\f1cd";
	<i class="fa fa-lightbulb-o"></i>		content: "\f0eb";
	<i class="fa fa-line-chart"></i>		content: "\f201";
	<i class="fa fa-link"></i>		content: "\f0c1";
	<i class="fa fa-linkedin"></i>		content: "\f0e1";
	<i class="fa fa-linkedin-square"></i>		content: "\f08c";
	<i class="fa fa-linux"></i>		content: "\f17c";
	<i class="fa fa-list"></i>		content: "\f03a";
	<i class="fa fa-list-alt"></i>		content: "\f022";
	<i class="fa fa-list-ol"></i>		content: "\f0cb";
	<i class="fa fa-list-ul"></i>		content: "\f0ca";
	<i class="fa fa-location-arrow"></i>		content: "\f124";
	<i class="fa fa-lock"></i>		content: "\f023";
	<i class="fa fa-long-arrow-down"></i>		content: "\f175";
	<i class="fa fa-long-arrow-left"></i>		content: "\f177";
	<i class="fa fa-long-arrow-right"></i>		content: "\f178";
	<i class="fa fa-long-arrow-up"></i>		content: "\f176";
	<i class="fa fa-magic"></i>		content: "\f0d0";
	<i class="fa fa-magnet"></i>		content: "\f076";
	<i class="fa fa-mail-forward"></i>		content: "\f064";
	<i class="fa fa-mail-reply"></i>		content: "\f112";
	<i class="fa fa-mail-reply-all"></i>		content: "\f122";
	<i class="fa fa-male"></i>		content: "\f183";
	<i class="fa fa-map"></i>		content: "\f279";
	<i class="fa fa-map-marker"></i>		content: "\f041";
	<i class="fa fa-map-o"></i>		content: "\f278";
	<i class="fa fa-map-pin"></i>		content: "\f276";
	<i class="fa fa-map-signs"></i>		content: "\f277";
	<i class="fa fa-mars"></i>		content: "\f222";
	<i class="fa fa-mars-double"></i>		content: "\f227";
	<i class="fa fa-mars-stroke"></i>		content: "\f229";
	<i class="fa fa-mars-stroke-h"></i>		content: "\f22b";
	<i class="fa fa-mars-stroke-v"></i>		content: "\f22a";
	<i class="fa fa-maxcdn"></i>		content: "\f136";
	<i class="fa fa-meanpath"></i>		content: "\f20c";
	<i class="fa fa-medium"></i>		content: "\f23a";
	<i class="fa fa-medkit"></i>		content: "\f0fa";
	<i class="fa fa-meh-o"></i>		content: "\f11a";
	<i class="fa fa-mercury"></i>		content: "\f223";
	<i class="fa fa-microphone"></i>		content: "\f130";
	<i class="fa fa-microphone-slash"></i>		content: "\f131";
	<i class="fa fa-minus"></i>		content: "\f068";
	<i class="fa fa-minus-circle"></i>		content: "\f056";
	<i class="fa fa-minus-square"></i>		content: "\f146";
	<i class="fa fa-minus-square-o"></i>		content: "\f147";
	<i class="fa fa-mixcloud"></i>		content: "\f289";
	<i class="fa fa-mobile"></i>		content: "\f10b";
	<i class="fa fa-mobile-phone"></i>		content: "\f10b";
	<i class="fa fa-modx"></i>		content: "\f285";
	<i class="fa fa-money"></i>		content: "\f0d6";
	<i class="fa fa-moon-o"></i>		content: "\f186";
	<i class="fa fa-mortar-board"></i>		content: "\f19d";
	<i class="fa fa-motorcycle"></i>		content: "\f21c";
	<i class="fa fa-mouse-pointer"></i>		content: "\f245";
	<i class="fa fa-music"></i>		content: "\f001";
	<i class="fa fa-navicon"></i>		content: "\f0c9";
	<i class="fa fa-neuter"></i>		content: "\f22c";
	<i class="fa fa-newspaper-o"></i>		content: "\f1ea";
	<i class="fa fa-object-group"></i>		content: "\f247";
	<i class="fa fa-object-ungroup"></i>		content: "\f248";
	<i class="fa fa-odnoklassniki"></i>		content: "\f263";
	<i class="fa fa-odnoklassniki-square"></i>		content: "\f264";
	<i class="fa fa-opencart"></i>		content: "\f23d";
	<i class="fa fa-openid"></i>		content: "\f19b";
	<i class="fa fa-opera"></i>		content: "\f26a";
	<i class="fa fa-optin-monster"></i>		content: "\f23c";
	<i class="fa fa-outdent"></i>		content: "\f03b";
	<i class="fa fa-pagelines"></i>		content: "\f18c";
	<i class="fa fa-paint-brush"></i>		content: "\f1fc";
	<i class="fa fa-paper-plane"></i>		content: "\f1d8";
	<i class="fa fa-paper-plane-o"></i>		content: "\f1d9";
	<i class="fa fa-paperclip"></i>		content: "\f0c6";
	<i class="fa fa-paragraph"></i>		content: "\f1dd";
	<i class="fa fa-paste"></i>		content: "\f0ea";
	<i class="fa fa-pause"></i>		content: "\f04c";
	<i class="fa fa-pause-circle"></i>		content: "\f28b";
	<i class="fa fa-pause-circle-o"></i>		content: "\f28c";
	<i class="fa fa-paw"></i>		content: "\f1b0";
	<i class="fa fa-paypal"></i>		content: "\f1ed";
	<i class="fa fa-pencil"></i>		content: "\f040";
	<i class="fa fa-pencil-square"></i>		content: "\f14b";
	<i class="fa fa-pencil-square-o"></i>		content: "\f044";
	<i class="fa fa-percent"></i>		content: "\f295";
	<i class="fa fa-phone"></i>		content: "\f095";
	<i class="fa fa-phone-square"></i>		content: "\f098";
	<i class="fa fa-photo"></i>		content: "\f03e";
	<i class="fa fa-picture-o"></i>		content: "\f03e";
	<i class="fa fa-pie-chart"></i>		content: "\f200";
	<i class="fa fa-pied-piper"></i>		content: "\f1a7";
	<i class="fa fa-pied-piper-alt"></i>		content: "\f1a8";
	<i class="fa fa-pinterest"></i>		content: "\f0d2";
	<i class="fa fa-pinterest-p"></i>		content: "\f231";
	<i class="fa fa-pinterest-square"></i>		content: "\f0d3";
	<i class="fa fa-plane"></i>		content: "\f072";
	<i class="fa fa-play"></i>		content: "\f04b";
	<i class="fa fa-play-circle"></i>		content: "\f144";
	<i class="fa fa-play-circle-o"></i>		content: "\f01d";
	<i class="fa fa-plug"></i>		content: "\f1e6";
	<i class="fa fa-plus"></i>		content: "\f067";
	<i class="fa fa-plus-circle"></i>		content: "\f055";
	<i class="fa fa-plus-square"></i>		content: "\f0fe";
	<i class="fa fa-plus-square-o"></i>		content: "\f196";
	<i class="fa fa-power-off"></i>		content: "\f011";
	<i class="fa fa-print"></i>		content: "\f02f";
	<i class="fa fa-product-hunt"></i>		content: "\f288";
	<i class="fa fa-puzzle-piece"></i>		content: "\f12e";
	<i class="fa fa-qq"></i>		content: "\f1d6";
	<i class="fa fa-qrcode"></i>		content: "\f029";
	<i class="fa fa-question"></i>		content: "\f128";
	<i class="fa fa-question-circle"></i>		content: "\f059";
	<i class="fa fa-quote-left"></i>		content: "\f10d";
	<i class="fa fa-quote-right"></i>		content: "\f10e";
	<i class="fa fa-ra"></i>		content: "\f1d0";
	<i class="fa fa-random"></i>		content: "\f074";
	<i class="fa fa-rebel"></i>		content: "\f1d0";
	<i class="fa fa-recycle"></i>		content: "\f1b8";
	<i class="fa fa-reddit"></i>		content: "\f1a1";
	<i class="fa fa-reddit-alien"></i>		content: "\f281";
	<i class="fa fa-reddit-square"></i>		content: "\f1a2";
	<i class="fa fa-refresh"></i>		content: "\f021";
	<i class="fa fa-registered"></i>		content: "\f25d";
	<i class="fa fa-remove"></i>		content: "\f00d";
	<i class="fa fa-renren"></i>		content: "\f18b";
	<i class="fa fa-reorder"></i>		content: "\f0c9";
	<i class="fa fa-repeat"></i>		content: "\f01e";
	<i class="fa fa-reply"></i>		content: "\f112";
	<i class="fa fa-reply-all"></i>		content: "\f122";
	<i class="fa fa-retweet"></i>		content: "\f079";
	<i class="fa fa-rmb"></i>		content: "\f157";
	<i class="fa fa-road"></i>		content: "\f018";
	<i class="fa fa-rocket"></i>		content: "\f135";
	<i class="fa fa-rotate-left"></i>		content: "\f0e2";
	<i class="fa fa-rotate-right"></i>		content: "\f01e";
	<i class="fa fa-rouble"></i>		content: "\f158";
	<i class="fa fa-rss"></i>		content: "\f09e";
	<i class="fa fa-rss-square"></i>		content: "\f143";
	<i class="fa fa-rub"></i>		content: "\f158";
	<i class="fa fa-ruble"></i>		content: "\f158";
	<i class="fa fa-rupee"></i>		content: "\f156";
	<i class="fa fa-safari"></i>		content: "\f267";
	<i class="fa fa-save"></i>		content: "\f0c7";
	<i class="fa fa-scissors"></i>		content: "\f0c4";
	<i class="fa fa-scribd"></i>		content: "\f28a";
	<i class="fa fa-search"></i>		content: "\f002";
	<i class="fa fa-search-minus"></i>		content: "\f010";
	<i class="fa fa-search-plus"></i>		content: "\f00e";
	<i class="fa fa-sellsy"></i>		content: "\f213";
	<i class="fa fa-send"></i>		content: "\f1d8";
	<i class="fa fa-send-o"></i>		content: "\f1d9";
	<i class="fa fa-server"></i>		content: "\f233";
	<i class="fa fa-share"></i>		content: "\f064";
	<i class="fa fa-share-alt"></i>		content: "\f1e0";
	<i class="fa fa-share-alt-square"></i>		content: "\f1e1";
	<i class="fa fa-share-square"></i>		content: "\f14d";
	<i class="fa fa-share-square-o"></i>		content: "\f045";
	<i class="fa fa-shekel"></i>		content: "\f20b";
	<i class="fa fa-sheqel"></i>		content: "\f20b";
	<i class="fa fa-shield"></i>		content: "\f132";
	<i class="fa fa-ship"></i>		content: "\f21a";
	<i class="fa fa-shirtsinbulk"></i>		content: "\f214";
	<i class="fa fa-shopping-bag"></i>		content: "\f290";
	<i class="fa fa-shopping-basket"></i>		content: "\f291";
	<i class="fa fa-shopping-cart"></i>		content: "\f07a";
	<i class="fa fa-sign-in"></i>		content: "\f090";
	<i class="fa fa-sign-out"></i>		content: "\f08b";
	<i class="fa fa-signal"></i>		content: "\f012";
	<i class="fa fa-simplybuilt"></i>		content: "\f215";
	<i class="fa fa-sitemap"></i>		content: "\f0e8";
	<i class="fa fa-skyatlas"></i>		content: "\f216";
	<i class="fa fa-skype"></i>		content: "\f17e";
	<i class="fa fa-slack"></i>		content: "\f198";
	<i class="fa fa-sliders"></i>		content: "\f1de";
	<i class="fa fa-slideshare"></i>		content: "\f1e7";
	<i class="fa fa-smile-o"></i>		content: "\f118";
	<i class="fa fa-soccer-ball-o"></i>		content: "\f1e3";
	<i class="fa fa-sort"></i>		content: "\f0dc";
	<i class="fa fa-sort-alpha-asc"></i>		content: "\f15d";
	<i class="fa fa-sort-alpha-desc"></i>		content: "\f15e";
	<i class="fa fa-sort-amount-asc"></i>		content: "\f160";
	<i class="fa fa-sort-amount-desc"></i>		content: "\f161";
	<i class="fa fa-sort-asc"></i>		content: "\f0de";
	<i class="fa fa-sort-desc"></i>		content: "\f0dd";
	<i class="fa fa-sort-down"></i>		content: "\f0dd";
	<i class="fa fa-sort-numeric-asc"></i>		content: "\f162";
	<i class="fa fa-sort-numeric-desc"></i>		content: "\f163";
	<i class="fa fa-sort-up"></i>		content: "\f0de";
	<i class="fa fa-soundcloud"></i>		content: "\f1be";
	<i class="fa fa-space-shuttle"></i>		content: "\f197";
	<i class="fa fa-spinner"></i>		content: "\f110";
	<i class="fa fa-spoon"></i>		content: "\f1b1";
	<i class="fa fa-spotify"></i>		content: "\f1bc";
	<i class="fa fa-square"></i>		content: "\f0c8";
	<i class="fa fa-square-o"></i>		content: "\f096";
	<i class="fa fa-stack-exchange"></i>		content: "\f18d";
	<i class="fa fa-stack-overflow"></i>		content: "\f16c";
	<i class="fa fa-star"></i>		content: "\f005";
	<i class="fa fa-star-half"></i>		content: "\f089";
	<i class="fa fa-star-half-empty"></i>		content: "\f123";
	<i class="fa fa-star-half-full"></i>		content: "\f123";
	<i class="fa fa-star-half-o"></i>		content: "\f123";
	<i class="fa fa-star-o"></i>		content: "\f006";
	<i class="fa fa-steam"></i>		content: "\f1b6";
	<i class="fa fa-steam-square"></i>		content: "\f1b7";
	<i class="fa fa-step-backward"></i>		content: "\f048";
	<i class="fa fa-step-forward"></i>		content: "\f051";
	<i class="fa fa-stethoscope"></i>		content: "\f0f1";
	<i class="fa fa-sticky-note"></i>		content: "\f249";
	<i class="fa fa-sticky-note-o"></i>		content: "\f24a";
	<i class="fa fa-stop"></i>		content: "\f04d";
	<i class="fa fa-stop-circle"></i>		content: "\f28d";
	<i class="fa fa-stop-circle-o"></i>		content: "\f28e";
	<i class="fa fa-street-view"></i>		content: "\f21d";
	<i class="fa fa-strikethrough"></i>		content: "\f0cc";
	<i class="fa fa-stumbleupon"></i>		content: "\f1a4";
	<i class="fa fa-stumbleupon-circle"></i>		content: "\f1a3";
	<i class="fa fa-subscript"></i>		content: "\f12c";
	<i class="fa fa-subway"></i>		content: "\f239";
	<i class="fa fa-suitcase"></i>		content: "\f0f2";
	<i class="fa fa-sun-o"></i>		content: "\f185";
	<i class="fa fa-superscript"></i>		content: "\f12b";
	<i class="fa fa-support"></i>		content: "\f1cd";
	<i class="fa fa-table"></i>		content: "\f0ce";
	<i class="fa fa-tablet"></i>		content: "\f10a";
	<i class="fa fa-tachometer"></i>		content: "\f0e4";
	<i class="fa fa-tag"></i>		content: "\f02b";
	<i class="fa fa-tags"></i>		content: "\f02c";
	<i class="fa fa-tasks"></i>		content: "\f0ae";
	<i class="fa fa-taxi"></i>		content: "\f1ba";
	<i class="fa fa-television"></i>		content: "\f26c";
	<i class="fa fa-tencent-weibo"></i>		content: "\f1d5";
	<i class="fa fa-terminal"></i>		content: "\f120";
	<i class="fa fa-text-height"></i>		content: "\f034";
	<i class="fa fa-text-width"></i>		content: "\f035";
	<i class="fa fa-th"></i>		content: "\f00a";
	<i class="fa fa-th-large"></i>		content: "\f009";
	<i class="fa fa-th-list"></i>		content: "\f00b";
	<i class="fa fa-thumb-tack"></i>		content: "\f08d";
	<i class="fa fa-thumbs-down"></i>		content: "\f165";
	<i class="fa fa-thumbs-o-down"></i>		content: "\f088";
	<i class="fa fa-thumbs-o-up"></i>		content: "\f087";
	<i class="fa fa-thumbs-up"></i>		content: "\f164";
	<i class="fa fa-ticket"></i>		content: "\f145";
	<i class="fa fa-times"></i>		content: "\f00d";
	<i class="fa fa-times-circle"></i>		content: "\f057";
	<i class="fa fa-times-circle-o"></i>		content: "\f05c";
	<i class="fa fa-tint"></i>		content: "\f043";
	<i class="fa fa-toggle-down"></i>		content: "\f150";
	<i class="fa fa-toggle-left"></i>		content: "\f191";
	<i class="fa fa-toggle-off"></i>		content: "\f204";
	<i class="fa fa-toggle-on"></i>		content: "\f205";
	<i class="fa fa-toggle-right"></i>		content: "\f152";
	<i class="fa fa-toggle-up"></i>		content: "\f151";
	<i class="fa fa-trademark"></i>		content: "\f25c";
	<i class="fa fa-train"></i>		content: "\f238";
	<i class="fa fa-transgender"></i>		content: "\f224";
	<i class="fa fa-transgender-alt"></i>		content: "\f225";
	<i class="fa fa-trash"></i>		content: "\f1f8";
	<i class="fa fa-trash-o"></i>		content: "\f014";
	<i class="fa fa-tree"></i>		content: "\f1bb";
	<i class="fa fa-trello"></i>		content: "\f181";
	<i class="fa fa-tripadvisor"></i>		content: "\f262";
	<i class="fa fa-trophy"></i>		content: "\f091";
	<i class="fa fa-truck"></i>		content: "\f0d1";
	<i class="fa fa-try"></i>		content: "\f195";
	<i class="fa fa-tty"></i>		content: "\f1e4";
	<i class="fa fa-tumblr"></i>		content: "\f173";
	<i class="fa fa-tumblr-square"></i>		content: "\f174";
	<i class="fa fa-turkish-lira"></i>		content: "\f195";
	<i class="fa fa-tv"></i>		content: "\f26c";
	<i class="fa fa-twitch"></i>		content: "\f1e8";
	<i class="fa fa-twitter"></i>		content: "\f099";
	<i class="fa fa-twitter-square"></i>		content: "\f081";
	<i class="fa fa-umbrella"></i>		content: "\f0e9";
	<i class="fa fa-underline"></i>		content: "\f0cd";
	<i class="fa fa-undo"></i>		content: "\f0e2";
	<i class="fa fa-university"></i>		content: "\f19c";
	<i class="fa fa-unlink"></i>		content: "\f127";
	<i class="fa fa-unlock"></i>		content: "\f09c";
	<i class="fa fa-unlock-alt"></i>		content: "\f13e";
	<i class="fa fa-unsorted"></i>		content: "\f0dc";
	<i class="fa fa-upload"></i>		content: "\f093";
	<i class="fa fa-usb"></i>		content: "\f287";
	<i class="fa fa-usd"></i>		content: "\f155";
	<i class="fa fa-user"></i>		content: "\f007";
	<i class="fa fa-user-md"></i>		content: "\f0f0";
	<i class="fa fa-user-plus"></i>		content: "\f234";
	<i class="fa fa-user-secret"></i>		content: "\f21b";
	<i class="fa fa-user-times"></i>		content: "\f235";
	<i class="fa fa-users"></i>		content: "\f0c0";
	<i class="fa fa-venus"></i>		content: "\f221";
	<i class="fa fa-venus-double"></i>		content: "\f226";
	<i class="fa fa-venus-mars"></i>		content: "\f228";
	<i class="fa fa-viacoin"></i>		content: "\f237";
	<i class="fa fa-video-camera"></i>		content: "\f03d";
	<i class="fa fa-vimeo"></i>		content: "\f27d";
	<i class="fa fa-vimeo-square"></i>		content: "\f194";
	<i class="fa fa-vine"></i>		content: "\f1ca";
	<i class="fa fa-vk"></i>		content: "\f189";
	<i class="fa fa-volume-down"></i>		content: "\f027";
	<i class="fa fa-volume-off"></i>		content: "\f026";
	<i class="fa fa-volume-up"></i>		content: "\f028";
	<i class="fa fa-warning"></i>		content: "\f071";
	<i class="fa fa-wechat"></i>		content: "\f1d7";
	<i class="fa fa-weibo"></i>		content: "\f18a";
	<i class="fa fa-weixin"></i>		content: "\f1d7";
	<i class="fa fa-whatsapp"></i>		content: "\f232";
	<i class="fa fa-wheelchair"></i>		content: "\f193";
	<i class="fa fa-wifi"></i>		content: "\f1eb";
	<i class="fa fa-wikipedia-w"></i>		content: "\f266";
	<i class="fa fa-windows"></i>		content: "\f17a";
	<i class="fa fa-won"></i>		content: "\f159";
	<i class="fa fa-wordpress"></i>		content: "\f19a";
	<i class="fa fa-wrench"></i>		content: "\f0ad";
	<i class="fa fa-xing"></i>		content: "\f168";
	<i class="fa fa-xing-square"></i>		content: "\f169";
	<i class="fa fa-y-combinator"></i>		content: "\f23b";
	<i class="fa fa-y-combinator-square"></i>		content: "\f1d4";
	<i class="fa fa-yahoo"></i>		content: "\f19e";
	<i class="fa fa-yc"></i>		content: "\f23b";
	<i class="fa fa-yc-square"></i>		content: "\f1d4";
	<i class="fa fa-yelp"></i>		content: "\f1e9";
	<i class="fa fa-yen"></i>		content: "\f157";
	<i class="fa fa-youtube"></i>		content: "\f167";
	<i class="fa fa-youtube-play"></i>		content: "\f16a";
	<i class="fa fa-youtube-square"></i>		content: "\f166";

更多字型相關文章：

↧

部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧﹍如何進行版本控制, 當內容被覆蓋或誤刪時可以救回

January 28, 2016, 2:00 pm

≫ Next: Blogger 何時該發佈「文章」, 何時該發佈「網頁」?

≪ Previous: 使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

有讀者在「Blogger 文章不小心誤刪了怎麼辦？」留言表示，在 Blogger 後台編輯時出了意外，文章發佈前就不小心把內容覆蓋，詢問是否有機會救回？

答案很簡單：沒辦法。然而這案例發生的機率很低，所以本篇不會針對極端的狀況進行分析，主題著重在事前要如何預防意外。

很明顯的，案主會這麼問，表示他習慣用 Blogger 文章編輯器來寫作，也就是在雲端作業。而 "部落格寫作" 這件事，我會比較建議使用 "離線編輯軟體"，可以避免一些發生在雲端的意外(例如伺服器出錯)，導致花了幾個小時的心血化為灰燼。

但也不是說 "離線編輯軟體" 就不會出意外，WFU 就發生多次程式當掉、當機、不小心覆蓋原內容等等的慘痛經驗，導致文章必須重寫，所以完全可以體會案主心在淌血的感覺。那麼本篇就來分享部落格寫作軟體的選擇，以及確保文章寫作安全的各種技巧。

(圖片出處: pexels.com)

一、確保網站文章安全的技巧

進入主題之前，先介紹網站文章備份的技巧，幫助讀者建立 "同步異地備份" 的概念。雖然意外發生的機率都很低，但只要發生一次都會讓我們痛不欲生，要防止意外就是多買幾個保險，例如這個「網誌被刪除案例」。

1. Feedly 訂閱自己網站

除了在網站提供最熱門的 RSS 閱讀器「Feedly 一鍵訂閱服務」，也別忘了訂閱自己的網站文章，除了可確定 Feedly 運作是否正常，也算是用 Feedly 幫網站所有文章留備份。

2. IFTTT 備份自己網站

請參考這篇「部落格文章如何全自動備份__IFTTT 應用」，只要一發佈新的文章，IFTTT 就可幫我們將文章自動備份到另一個 Blogger。

3. Email 訂閱自己網站

請參考這篇「FeedBurner電子報設定教學」，用 Email 訂閱自己網站的 RSS，就等於用收信軟體存放在在自己的硬碟。

以上三個方案都進行的話，我們不但有實體(硬碟)備份，也有雲端多處的備份。

二、離線寫作工具

Blogger 後台文章編輯提供了 "草稿" 功能，可以方便使用者暫存一些文章構想，待完成後再發佈。這個功能算是滿方便的，也的確很多人這麼使用。

不過萬一 Google 伺服器處理資料出了差錯，或是遇上文章開頭的案例，當沒有替儲存資料規劃保險的機制，總是需要承受發生意外的損失。

站在資訊安全的立場，我們必須為所有編輯的文章內容，建立 "同步異地備份" 的機制。以下介紹兩個熱門的離線寫作工具。

1. Open Live Writer

「Windows Live Writer」是最熱門的離線寫作軟體，支援各種部落格平台，前陣子改為開源專案，更名為「Open Live Writer」。

這個軟體的介紹、操作可參考「Open Live Writer將接棒Windows Live Writer」的內容及文章內相關連結。他的編輯、各方面功能都很強，不過本篇只針對關於 "文章備份" 這個主題：

選項設定可勾選「定時自動儲存草稿」，因此可不必擔心編輯文章時遇到的各種外部因素，例如當機、斷電等等，可以救回大部分的內容。
但是無法避免個人因素，例如自己手誤將原本內容覆蓋，或是不小心清掉文章內容而又被系統自動儲存草稿，那麼原內容一樣救不回。
結論為，Open Live Writer 比較難簡單做到 "版本控制"(操作上很複雜)，可以預防大部分的意外，無法預防自己的手誤。
由於 WFU 不常用 Open Live Writer，讀者有興趣可參考這篇「如何將Open Live Writer 草稿自動同步到Dropbox」，看看能否建立版本控制的機制。

2. Evernote

「Evernote」是熱門的記事軟體，不過用來當作部落格文章的編輯軟體，也是有他的方便之處。

文章編輯操作上的技巧與心得，可參考這篇「如何利用Evernote發文到Blogger」，相信能解決許多細部的問題。接下來繼續檢討 "文章備份" 這個主題：

不需要設定選項，我們編輯的任何一個動作，都會隨時被儲存，不用擔心外部因素讓我們的草稿內容不見。
Evernote 會自動同步到雲端、所有安裝過 Evernote 的裝置，也就是說多處都有備份，隨時可在不同裝置接續我們未完成的寫作。
缺點是不同裝置間，偶爾會發生同步衝突。
付費版有 "版本控制" 的功能，所以萬一自己手誤將原本內容覆蓋、不小心清掉文章內容，都可以從歷史記錄來恢復原本的文章內容。
結論為，免費版在 "文章備份" 的效果跟 "Open Live Writer" 差不多，但付費版可以預防任何天災及人禍(人為的操作失誤)。

三、文書編輯工具

其實 WFU 用來撰寫文章的工具，是一般常見的文書編輯軟體，並非前述的兩項工具，原因後面會詳述。

1. WORD

說不定不少使用者會用 WORD 當作離線文章編輯工具，只要你用的順手，Word 有自動儲存草稿的功能，也是一種選擇。不過 WFU 不太推薦 WORD 這類工具就是了，因為貼到 Blogger 文章編輯器時，版面效果可能會不如預期，需要再細調。

2. Notepad++

這是我習慣使用的工具，可以算是 "純文字" 編輯器，不能 WYSIWYG(所見即所得)，不過我都是貼到 Blogger 文章編輯器時才調整版面，可以避免像 WORD 產生版面、字體的問題。

關於我的文書編輯技巧，可參考「修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」。以下繼續討論 Notepad++關於 "文章備份" 這個主題：

有「定時自動儲存」外掛。
無法提供 "版本控制"，但是有個技巧可輕鬆完成這項任務，請見下個章節「Dropbox」。

四、Dropbox

以下分享我使用 Notepad++ 搭配 Dropbox 的心得，不用作任何動作就可建立 "版本控制" 的機制。

1. 基本上我用 Notepad++ 編輯的文章檔案，都會放在 "Dropbox" 同步的資料夾，這麼一來跟 Evernote 一樣，檔案會隨時同步到所有的電腦、行動裝置，可以在任何地方繼續未完成的作業。

2. 在 Dropbox 網頁版的畫面，如下圖，對著檔案按右鍵，會顯示 "之前的版本" 這個選項

3. 按下後如下圖，就能選擇不同時間點來還原。如此一來，就能將人為失誤的影響降到最低了。

4. 需要提醒的是，曾經做過 "儲存" 動作的時間點，才會被 Dropbox 記錄為不同版本，時間間隔看起來比較長；若將 Notepad++ 自動儲存的資料夾，也放在 Dropbox 同步資料夾，那麼這個草稿檔案，除了儲存間隔時間較短，也可做到 Dropbox 的版本控制了。

五、小結

本篇提供了各種編輯軟體，如何建立 "文章備份"、及 "版本控制" 的機制，來避免意外摧毀了自己的文章內容。

三種方案不見得都適合每個人，讀者可以根據自己是否需要 WYSIWYG(所見即所得) 編輯器、及操作的便利性來選擇自己的方案。無論是哪種方案，很重要的一點，都是讓我們瞭解資料保存無法僥倖，如何建立 "同步異地備份" 是最重要的觀念。

更多資訊安全相關文章：

↧

Blogger 何時該發佈「文章」, 何時該發佈「網頁」?

January 31, 2016, 2:00 pm

≫ Next: 部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果

≪ Previous: 部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧﹍如何進行版本控制, 當內容被覆蓋或誤刪時可以救回

這個 Blogger 中文論壇貼文詢問「"文章" 與 "網頁" 的差別」，對於剛接觸 Blogger 的使用者，的確很難區分這兩者的差異、以及使用的時機。

Blogger 的官網「建立及編輯文章」、「在網誌中新增網頁」這兩個頁面，大致說明了兩者的使用方法。不過要從這些制式內容快速瞭解 "文章" 與 "網頁" 的特性，其實還是不太容易。

雖然這算是新手問題，不過就算是老手，也不一定能完全瞭解何時需要發佈 "網頁"，或是為何應該只使用 "文章"。因此這是個值得探討的主題，本篇會詳細說明。

一、"文章" 頁面的特點

1. 動態頁面(dynamic page)

這是 "文章" 頁面最早的定義，因為在整個網站的索引(index)之中，每篇文章的位置都是不斷變動的，只要有新文章產生，原本的第 1 篇文章，自動就成了第 2 篇，原來的第 2 篇就成了第 3 篇，以此類推。
每篇文章與其他文章是有關連性的，無論是時間上的關連(順序相關)，或是內容上的關連(相同標籤)。

2. 出現在首頁

這也是部落格系統的特點，新文章會自動在網站的首頁列出，依最新的發佈時間排序。
可以使用 "繼續閱讀" 功能，讓首頁不至於顯示過長的內容。

3. 發佈日期

文章可以設定發佈日期，也必須設定發佈日期，不可沒有日期。
使用未來的日期可以設定排程發文。

4. 設定標籤：可以對文章分類，讓相同主題的文章聚合在一起，方便讀者查詢。

5. 自訂網址：能夠自行設定網址的字串，增加文章被搜尋到的機率，對 SEO 有很大的幫助。

6. 顯示作者：文章可顯示作者資訊，這一點的重要性屬於 SEO 範疇，可以累積作者的權威度(Author Rank)。

7. RSS FEED

文章會自動出現在網站的 RSS FEED，簡單的說法可以把 RSS 視為網站公開的索引資料。
網站開放 RSS 的話有很多好處，文章能被讀者以各種形式訂閱，增加網站內容的擴散度。
根據 RSS 內容可產生各種網站小工具，例如「最新文章」、「相關文章」、「隨機文章」。
文章能被索引，就能有備份文章、匯出文章的功能(從 Blogger 後台)。

8. SEO 有利

開放 RSS 後，搜尋引擎機器人就會自動前來爬取索引內容，自然對 SEO 是有利的。
綜合 5, 6, 7 這三點，文章頁面對 SEO 都有加分效果。

9. 數量無限制：Blogger 可發佈的文章數量沒有上限。

10. 留言

文章的留言在 RSS FEED 的資料很完整
個別文章的所有留言，能從單篇文章 RSS FEED 取得
結論為，文章的留言可供多樣的網站小工具來設計及取用。

二、"網頁" 頁面的特點

1. 靜態頁面(static page)

這是 "網頁" 頁面最早的定義，因為他不會出現在整個網站的索引(index)之中，每個 "網頁" 都是獨立的存在。
因此每個 "網頁" 與其他 "網頁" 都沒有關連性，沒有時間順序的關係，內容也無法分類。

2. 不出現在首頁

沒有時間屬性，不會出現在網站的首頁。
自然不能使用 "繼續閱讀" 功能，也沒有必要使用。

3. 沒有發佈日期

不能設定發佈日期。
不能設定排程。

4. 沒有標籤：不能對 "網頁" 分類，沒有標籤功能。

5. 較難自訂網址

官方未提供自訂網址字串的功能。
可以利用在標題放置英文字串的技巧，讓該 "網頁" 自動產生對應的網址字串。
但不一定每次都能成功，需要多次嘗試，比較麻煩。

6. 不顯示作者：因為不能顯示作者資訊，無法累積作者的權威度(Author Rank)。

7. 不存在於 RSS FEED

網站的 RSS FEED 不會有 "網頁" 內容。
所以 "網頁" 無法被讀者訂閱，降低了內容的擴散度。
"網頁" 內容無法出現在例如各種網站小工具。
"網頁" 不能被索引，所以無法備份、也無法匯出，就像一般的 Blogger 小工具內容一樣。

8. SEO 不利

搜尋引擎機器人無法定期從網站的索引爬到 "網頁" 內容。
綜合 5, 6, 7 這三點，"網頁" 對 SEO 非常不利。
除非某篇文章、或網站放置了這個 "網頁" 的連結後，某天被經過的機器人爬到這個連結，這個 "網頁" 內容才能被搜尋引擎記錄。
因此 "網頁" 也是有機會被搜尋引擎登錄，但時間上會比 "文章" 慢很多。

9. 數量限制：根據目前官方的公告，Blogger 可發佈的 "網頁" 數量上限為 20 個。

10. 留言

網站的留言 RSS FEED 之中，該篇 "網頁" 的留言，沒有 "網頁" 的標題資訊。
也無法用 Blogger API 來取得 "網頁" 的留言資料。
所以 "網頁" 的留言不容易提供給各種網站小工具做設計、運用。

三、使用的時機

1. 文章

從以上的比較可以看出，使用 "網頁" 幾乎看不出優點在哪裡，沒什麼特殊考量的話，請不要使用 "網頁"，一律使用 "文章" 就對了。
官方提供的小工具之中，其中一個也叫做 "網頁"，會成為網站的 "導覽列"。別被這個小工具的名稱誤導了，以為只能放 "網頁" 進去，其實這個小工具也能放置 "文章" 連結。
因此 "網頁" 小工具，在多數的情況下，建議放 "文章" 連結就好，避免使用 "網頁" 連結。

2. 網頁

如果有以下的考量的時候，適合使用 "網頁" 功能：

私密文章：因為網頁有不被索引的特質，他的所有屬性剛好都適合用來當作 "私密文章"，讓站長把不想公開的 "網頁" 連結，提供給特定人觀看。詳細的操作方式，請參考「Blogger 私密文章的另一種選擇__網頁小工具的妙用」。
管理考量：如果導覽列使用的某個 "文章" 連結，日後需要常常更新內容的話，那麼在後台要找到這篇文章會比較花時間。把常需要重新編輯的網頁，改使用 "網頁" 的話，那麼在後台可以比較快找到，在管理上比較方便。

因此如果有某些頁面，讀者不在意 "SEO" 這件事的時候，也就是以上 2 點的考量 > SEO 之時，就是使用 "網頁" 的時機。

更多 Blogger 相關主題：

↧

部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果

February 3, 2016, 3:16 am

≫ Next: 瞭解 Blogger 動態檢視範本 + 行動版範本的特質

≪ Previous: Blogger 何時該發佈「文章」, 何時該發佈「網頁」?

雖然 WFU 已經幫不少 Blogger 平台的站長做過行動版，不過自己的行動版網頁卻是一直沒有好好進行規劃，原因跟網站性質有關，讀者多半會在網頁版閱讀程式碼及操作，且 WFU BLOG 的行動裝置訪客大約只有 10% 左右，所以改造行動版這件事遲遲沒有排進待辦事項。

不過像本站這種性質的網站畢竟比例很少，大部分網站的行動版讀者一定是越來越多，甚至已經超過網頁版的瀏覽量。而行動版首頁是網站的門面，如何設計的更精簡、專業，對於網站的形象有很大的影響。

最近找到空檔觀摩了不少部落格的行動版效果，也藉機把行動版首頁重新設計，那麼就順便分享我看到的這些行動版首頁效果，其中不乏許多知名部落格，可供讀者設計上的參考，並貼近 "行動裝置使用者的需求"。

(圖片出處: pixabay.com)

一、WFU BLOG

http://www.wfublog.com/?m=1

先介紹本站修改後的行動版首頁效果，算是調出一個自己看了還順眼的效果。由把功能擺第一，導覽列的版面設計還有改善空間。

這個版面的特點大致有這些：

為了凸顯網站 LOGO 的精神，把標頭區塊獨立出來，不塞其他東西。
導覽列才塞入各種功能性的圖示，為了不搶走網站 LOGO 與標題的目光，圖示使用單一色。
文章區塊不顯示文摘，節省行動裝置使用者翻閱的時間
長方形縮圖有別於一般的正方形縮圖
下方使用浮動社群分享按鈕、及 Go Top 按鈕，方便使用者進行分享及回到上方。

紅框標示的左、中、右三個按鈕，可讓使用者進行網站導覽及搜尋的功能。
按下的每個圖示，都會改為 "X" 提示關閉的圖案。

二、高雄美食 | 姐妹淘甜美食光

http://www.bosomgirl.com/?m=1

接下來介紹兩個 Blogger 平台的行動版效果，上圖的網站設計，非常適合旅遊、美食類的部落格，特點如下：

導覽列簡單清爽，網站名稱很清楚，功能圖示也不會搶了網站標題的目光。
文章區塊的版面設計美觀大方，大尺寸縮圖+文章標題的編排可提升點擊率。
標籤的設計也是一大亮點，其實每篇文章都設定了很多標籤，但第一個標籤固定只顯示 "區域" 名稱，第二個標籤固定只顯示自訂的分類(參考圖中左邊兩個藍框)。
顯示文章瀏覽數，讓訪客瞭解文章熱門度。

三、阿包醫生

http://www.drwubow.com/?m=1

根據網站名稱 "阿包" 而設計的 "包子" 圖示，可說是這個網站的設計亮點，除了醫師的專業度，也能拉近客群(小朋友)的距離。
浮動導覽列的空間充分運用，除了足以傳達網站形象，導覽圖示按鈕也很顯眼。
標籤使用 "包子" 圖示 + 日期的版面安排，讓文章區塊乾淨簡潔。
下方放 FB 粉絲頁是不錯的選擇。
整體色系搭配、配合粉絲頁的背景，算是很有一致性。

四、就是教不落

接下來幾個網站包含了知名資訊類部落格，如果想多看其他類型的讀者先說不好意思，因為本站就是資訊類型，所以觀摩重點也會擺在同類型。

不過本篇的心得很主觀，屬於個人看法，請讀者斟酌採用，不一定要全盤接收。而內容如有冒犯到其他站長的話，也請多多包涵。

http://steachs.com/

網站標題設計得很生動，同時所有需要讓讀者知道的訊息都有展現出來，可讓讀者印象深刻。
網站標題下方的訂閱、分享按鈕(紅框)在功能上絕對可發揮功用，我是實用派所以也會贊成。不過這些花花綠綠的圖示，在設計構圖上來說，一定程度會讓標頭區塊凌亂了些，同時讓網站標題稍微失焦。
輪播區塊除了功能很強，可以用手指直接滑動切換，整個色系跟網站也很搭，非常的棒。