WFU BLOG

接續「上一篇」，繼續來回顧第六～第十的重大時刻。

六、最震撼的消息：Google Reader 關閉

年中關閉的 Google Reader，算是今年網路上最震撼的消息，讓使用者失去了最重要的 RSS 工具。有一失也有一得，這件事催生了「Blogger私密文章」，這個很多 Blogger 使用者想要的功能。

由於 Google Reader 太強悍，部落格開站以來的任何文章都能抓取(已刪除的文章都還會留著)，這讓 Blogger 除了加密以外，很難產生私密文章這樣的功能。而現在的 RSS 閱讀器大多只從 2013 年的文章開始抓，因此把文章時間設定為 2013 年以前，讓 RSS 閱讀器沒有資料，就有辦法來隱藏 Blogger 文章。

七、最難忘的事件：參觀 Google 辦公室

九月份 Google 舉辦的「G+團圓度中秋」活動，由於適逢「Yahoo/無名」宣布關閉，WFU 獲邀參加活動，來介紹 Blogger 的優點，希望能拉一些使用者轉戰 Blogger。

這次的活動，於公、於私都非常有收穫。在公事的部分有兩點：

我介紹的主題之一「G+ 與 Blogger 結合的好處」，自己覺得內容講得還可以，對於想加入 Blogger 的新朋友應該是有加到分，詳情可參考「Blogger 的未來」→「一、Google+ 與 Blogger 的功能結合」。
藉這個機會代表 Blogger 使用者，詢問了 Google 官方對 Blogger 抱持的態度，結果與感想請見「Blogger 中文社群的定位」、「Blogger 的未來」。

在私人的部分，收穫就更多了：

首先當然是有幸進入 101 大樓的 Google 台灣總部，參觀了擺設(開發中產品展示)、設計(方便員工變換坐姿站姿的可升降辦公桌)、規劃(會議室的命名與陳設)等等。
接著是不期然遇到同是來賓之一的 +esor huang，對於從小看他文章長大的 WFU 而言，見到偶像當然太高興了，尤其能在 Google 101 留下合照實在太有紀念性了！
最後則是在活動會場遇到 +Pan Kuan，很榮幸現在她能加入 Blogger 中文社群管理群，為社群帶來許多活力，是此行的意外收穫！

八、最不敢置信的經驗__進入痞客邦 FB 留言框後台

如果曾安裝過 FB 留言板，一定能瞭解其麻煩與困難。為了構思能否有「FB留言框安裝懶人包」這樣的可能性，十一月在測試的過程中，沒有駭客之意，卻彷彿駭入了痞客邦的 FB 官方留言框後台。

這是滿不可思議的結果，過程請見「我如何進入痞客邦Facebook留言框管理介面並成為管理員」。而最終，也成功做出了懶人包，還有 email 通知功能喔！詳細步驟請參考「Facebook留言板安裝懶人包__留言email通知」。

九、最想像不到及最長青的熱門文章

本站右方側邊欄的熱門文章，排名依據設定為「最近 30 日」。今年以來大部分時間盤據榜首的多是樹狀標籤，而近幾個星期很稀奇地，竟被這篇「讓 Opera 18 能使用書籤列及書籤選單的調校心得」竄位且居高不下，這是當初寫這篇時沒有想到的，所以截個圖留作紀念。

雖然本站的主題是 Blogger，不過從熱門文章排行榜也看得出，前幾名除了樹狀標籤，幾乎都跟 Blogger 沒關係。原因也簡單，相對之下別的市場都比 Blogger 的市場大，Blogger 文章的投資報酬率不太好是比較無奈的事。不過呢，只要這還是我的興趣的一天，應該還是會再寫下去，也請讀者用自己的方式繼續支持 WFU 吧！

另外上面那張圖，還可看到一篇不可思議、破 50000 瀏覽數的「三國志11有趣劇本彙整」，其實這算是鎮站之寶了，從開站以來便歷久不衰，大家就可以想像遊戲市場有多大了，尤其是在下一代遊戲「三國志12」都已經上市快兩年的情況之下。

十、最會消費部落格的平台__7headlines

年度第十件大事出現在十二月中，無意間發現本站也被「頭七」(引述自 +Pan Kuan ...XD)給綁架了。在技術上解決框架的問題是一件事，但另一件事也很重要，就是瞭解 Google Adsense 對於這種狀況的對策與態度。

在技術上，已經找到適合 Blogger 使用的語法來擺脫框架，安裝方式請見「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」。

另外 WFU 也在 G+ 的 Adsense 社群向官方提問此事，由於這是一個封閉性的社群，無法提供該討論串的連結。但該討論串的內容其實很不錯，社群成員的回答非常有參考價值，只是官方反而一直都沒回應，最後才跟我說「很多人都問過這個問題...」挖哩～怎麼有這麼多人被框架、然後跟官方詢問嗎？怎麼我都 google 不到、社群也搜尋不到？

總之，Adsense 社群官方的態度讓我覺得不是很好，不過據爬文的結果，很多成員也說了，Adsense 基本上是大小眼的，能幫 Adsense 賺比較多錢、跟賺比較少的發佈商(也就是部落格、網站、或是大型論壇)，Adsense 的服務態度、速度、處置是不一樣的。Well，在商言商，這我能理解，只好認了。

回過頭來，雖然不能提供我發問的討論串連結，不過得感謝這篇「Adsense 小貼士」→「Tips 5」，基本上這部分的內容，完全就是我在 Adsense 社群發問的那個討論串的訊息，我猜測作者應該有看完該討論串然後整理的。如果網站有使用 Adsense 的話，非常推薦看完這篇文章，會讓你的網站更安全的！

最後，感謝過去豐富而充實的 2013，我們 2014 見！

(Pic from: iconarchive.com)「WYBoard」這個一年多前寫的部落格留言板，根據該篇留言的回應，"表情符號" 應該會是最受歡迎的擴充功能，再來是 "留言管理" 的功能。

適逢香港朋友コーさん寫了很棒的「表情符號」功能，且在コーさん協助修改其程式碼之下，WYBOARD 得以呼叫執行這個表情符號。因此只要另外安裝這個表情符號，WYBOARD 就能使用比其他留言板(例如CBOX)更多的表情符號了。

一、增加的功能

對於 WYBOARD 的優點、特色、及功能說明，可先參考「原始版本」→「一、特色」。

其實本篇也不算改版，因為運作方式與功能都一樣，其實也是因為沒時間進行改版，管理留言的功能仍是得等下一版。

不過為了迎接 "表情符號" 的功能，還是花時間做了以下變動：

1. 更改版面、配色，並修改一些 bug。
2. 資料庫使用新的試算表、使用新技術以加快資料的讀取速度。
3. 可選擇使用 "表情符號" 功能
4. 可使用 "客製試算表資料庫"

由於使用了新的試算表資料庫，過去曾安裝過 WYBOARD、而想更新到新版的使用者，得將舊的留言資料搬到新的資料庫才行，請再私下與 WFU 留繫此事：waynefu.g@gmail.com

二、安裝程式碼

1. 安裝步驟：

◎ 非 Blogger：請將下面程式碼貼在支援 javascript 的區塊。

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

2. 重要參數修改：以上標示紅字的為重要參數──

◎ 非 Blogger 的部落格：最重要的是在 E 行的雙引號內填入含 http 開頭的部落格首頁網址，其餘參數請參照 Blogger 說明。

◎ Blogger：

D：紅字 "YourEmail@gmail.com" 可改為自己的 email，那麼只要一有留言，系統會立刻寄出通知。

J：若想使用表情符號，請改為 "Y"，並依照「三、安裝表情符號」的步驟進行

K：若使用表情符號，可自訂參數，來限定表情符號圖案的大小，以免影響版面。

AB：紅字 200可改為自訂的留言區高度像素值，超過高度時會自動產生捲軸。

以上為比較重要的參數，可先存檔看一下效果，也可看我放在 Xuite 的效果並進行測試：

WYBOARD 示範網頁

3. 其他參數修改：

若想做更細部的設定、或想讓自己的 WYBOARD 跟別人不一樣，可參考所有綠字部分的說明，來變更參數、或修改 CSS。

另外，本文為 "懶人安裝法"，CSS 的執行效率會稍差，若懂 CSS 的讀者，可自行將 V～CM 行的內容搬到範本中 </head>之前，可得到較佳的執行效率。

其中 L～M 的藍色字串為自訂試算表資料庫之用，如果是獲得資料庫的讀者，請參考「四、自訂資料庫」的說明進行。

三、安裝表情符號

本版 WYBOARD 支援コーさん版本的表情圖案，請參考這篇「表情符號＋輸入表更新版＋聖誕特別版」來安裝，以下引述其部分操作：

1. 後台 → 版面配置 → 新增小工具 → HTML/Javascript → 貼入以下程式碼：

<script type="text/javascript" src="https://googledrive.com/host/0B3A_Ixxw5RrjamhLcjBFM0trRHM/talEmoti.table.min.js"/></script>
<script src="https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/kemoji.min.js"></script>

2. 最好將小工具放在最底，其他說明、設定請參照原文。

目前的表情圖案版本為 1.1，由於コーさん正在測試 V2 中，介面及操作都將更友善，若有更新時，本文會一併更新。(若本文未更新，請讀者提醒一下，謝謝！)

四、自訂資料庫

去年在「Blogger中文社群週年慶聖誕」活動的得獎者，獎品為本站提供的試算表資料庫，將可用於這個即時留言板，請依照以下步驟，來找出程式碼 L、M 這兩行需要填入的藍色字串：

1. 登入正確的 Google 帳號，進入 Google Drive：https://drive.google.com/

2. 進入我製作的試算表檔案，檔名應該會是 "WYboard──表情符號"

3. 表單 → 編輯表單 → 如下圖：

複製如圖中最下方紅線位置的字串，這就是 L 行 formkey要填入的藍色字串。

4. 回到主畫面，檔案 → 發佈到網路 → 取得公開資料 → RSS → 如下圖：

複製如圖中紅線位置的字串，這就是 M 行 sheetFeed要填入的藍色字串。

以上修改完、儲存後，可以試著自己留言，成功的話能夠收到該 gmail 帳號的 email 通知、並會在試算表存入留言資料，以後可以自行編修試算表的所有內容。

由於資料庫的製作步驟很麻煩，除了試算表的設定、還包含寄信功能的設定。若寫了教學，當操作出問題時，WFU 也沒有權限進入使用者的試算表來看是哪裡出問題，這有隱私性的問題，因此先不考慮提供資料庫的說明。而目前想得到試算表資料庫的話，只能看有沒有機會遇上「Blogger中文社群週年慶聖誕」這樣的活動，或是請考慮贊助本站(請在本站尋找"贊助" 的連結)，就當作是補貼 WFU 的時間成本了。

五、注意事項

如前所述，本版的功能其實跟上一版一樣，因此所有的注意事項，請直接參考「上一版」→「三、使用說明」→「四、補充說明」即可。

有任何問題、或功能及介面上有任何建議，歡迎再留言提出。怕前面的測試連結讀者忽略了，下面再放一次連結，可任意測試：

WYBOARD 示範網頁

1.3 「部落格即時留言板 WYBOARD」支援表情符號

歷史紀錄：2013 BLOG 更新紀要索引

有些重要的記事、SOP 流程、或是習慣養成、不再犯錯的事宜，我們可能會想把記事檔案的捷徑放在桌面，方便隨時開起來提醒自己。

如果配合雲端服務，讓這個檔案在各種裝置間同步，那麼在一處修改記事後，所有裝置都能讀取最新修訂內容，這樣就再方便不過了。而這個最好的選擇，會是利用 Evernote 來完成。

可惜的是，Evernote 在 PC 上無法直接讓記事捷徑單獨開啟。為了讓「提醒自己」這件事的操作最方便，以下為調校的心得。

一、Evernote 在 PC 的操作效果不佳

在行動裝置的 Evernote App，任何記事都能設定捷徑放到桌面，開啟捷徑後便可直接打開記事，因此「提醒自己」這件事的操作沒有任何問題。

不過 Evernote 在 PC 上的設計很奇怪，雖然記事可以設定為捷徑──

對著記事按右鍵 → 複製記事連結

(以 XP 操作為例)接著在桌面按右鍵 → 新增 → 捷徑 → 如上圖貼上剛剛複製的連結即可。

但桌面上所產生的這個 Evernote 捷徑，點擊後只能在 Evernote 視窗內顯示，如果想看全部的記事內容，得再移動滑鼠雙擊記事，才能讓這則記事單獨另開視窗顯示。這樣的操作流程麻煩，同時也失去了 "捷徑" 的意義。

二、讓 Evernote 記事連結在 PC 單獨顯示的方法

根據官方論壇的這個討論串「Linking to other notes within Evernote」，確實存在一個密技，可以直接開啟 Evernote 記事連結為新視窗，只要在操作時按住 SHIFT鍵即可。以下為操作心得：

1. 按住 SHIFT鍵的時間不夠長時，沒有任何效果。

2. 點擊記事捷徑時，必須長壓 SHIFT鍵，直到記事檔案被單獨開啟為止。

3. 雖然這方法不錯，但操作仍是麻煩，為了開啟桌面上的捷徑，必須從作業中的視窗切換到桌面，再進行第 2 點的動作，無法隨時開啟這則桌面上的捷徑。

三、更方便的操作設定

1. Evernote 的選項設定之中，有一個奇特、但又很少人知道其作用的項目，剛好是本篇任務的解答。請按以下步驟操作：

工具 → 選項 → 記事 → 勾選「在新的視窗中開啟來自其他應用程式的記事連結」→ 確定

現在重新開啟桌面的記事連結，會發現神奇的事情發生了──這則記事已經能夠在新視窗單獨顯示。

2. 更方便的操作方式，當然就是為桌面捷徑加上快速鍵：對捷徑按右鍵 → 內容 → 網頁文件 → 設定快速鍵，如下圖：

如此一來，不需回到桌面、在其他視窗作業時也能隨時按下快速鍵，叫出這則記事。

3. 開啟的單獨視窗，大部分預設的情況不會是全螢幕。如果直接按該視窗右上角的「放大到全螢幕」按鈕，那麼下次開啟時仍不會是全螢幕。此時可以直接將視窗的外框用滑鼠，拉大為全螢幕，那麼下次開啟時，系統會記憶之前的視窗設定，就會自動變為全螢幕了。

四、配合 HotKeyz 操作更方便

有時候因為重開機、或其他因素，視窗的設定會跑掉，而導致 Evernote 的記事無法開啟為全螢幕。此時 WFU 推薦使用 HotKeyz 這套軟體，讓操作更為便捷，其操作細節可參考這篇「HotKeyz v2.8.3 用快速鍵關機、關視窗、開軟體！」

1. 設定視窗最大化快速鍵

我設定了 Alt + 2的快速鍵，讓作用中的視窗立即最大化，設定可參考下圖：

2. 使用錄製巨集功能

由於這是比較進階的功能，需要自行研究一下。由於 HotKeyz 非常強悍，因此是有可能設定一組簡易的快速鍵後，自動執行「開啟 Evernote 記事連結」→「將視窗最大化」這樣的流程。

(Pic from: softicons.com)Blogger 私密文章最傳統的作法為「將內容加密」，這最安全、但操作麻煩，若忘了密碼則連自己都看不到。

去年曾研究出利用 js 來「偽裝的方案」，雖有人認為不安全、js 一關就會現形，不過 WFU 則認為從心裡層面來看是很安全的，因為站長不說的話沒人知道這個網站有私密文章，且相信沒有人會閒著特地關了 js 來測試每個網站有無私密文章，尤其在根本分辨不出某篇是否為私密文章的情形之下(只要不在文章開頭寫著「這是一篇私密文章...」)。

無論如何，想更保險的話，要在 Blogger 實現私密文章，現在還有另一種可能性──使用「網頁」官方小工具。

一、網頁小工具的特性

網頁小工具所產生的「空白網頁」，看起來跟建立「新文章」差不多，不過還是有很多差別：

不能設定標籤
沒有發文日期
不能自訂網址
無法顯示作者
訪客留言無法收到通知

因此，這些「空白網頁」本質上並非「Blogger 文章」。另外，所有 Blogger 文章都存放在 feed 裡面，例如以下網址即可存取：

http://你的blogger網址/feeds/posts/default

「空白網頁」的本質屬於小工具，就跟其他所有官方小工具的內容一樣，都存放在 Blogger 後台，除了官方的程式、API，沒有其他管道可以讀取。

在「Blogger範本(二)」→「四、側邊欄」→ 曾提到一件很重要的事──"儲存在小工具的內容，沒有辦法備份，萬一不小心刪除了小工具，裡面的資料就再也無法恢復"。因此「網頁」小工具、「空白網頁」也一樣，不小心刪了的話，資料就再也找不回來；而 Blogger 文章就算不小心刪了，只要曾用「RSS 閱讀器」訂閱自己的網站，可輕易到 RSS 閱讀器找回備份的文章內容。

二、利用「網頁」小工具製作私密文章

以上使用不少篇幅及硬知識介紹「網頁」小工具的特性後，現在我們瞭解「空白網頁」因為不會存放在 feed、無法輕易讀取、無法備份，根據這幾點剛好可以拿來當作「私密文章」的替代方案。以下是簡單的操作步驟：

1. 建立空白網頁

Blogger 後台 → 網頁 → 新網頁 → 空白網頁

2. 撰寫內容

由上圖可看到，右邊的編輯選項少得可憐。由於文章網址無法自訂，如果文章標題沒有英文字串的話，網址將由系統自動產生。

3. 取得連結網址

發佈網頁後，對著「檢視」按右鍵 → 複製連結網址，例如這篇網頁的連結為：

http://wfu-blog.blogspot.com/p/wfu-blog.html

4. 隱藏網頁顯示

Blogger 後台 → 版面配置 → 網頁 → 編輯，如下圖──

將剛剛建立的「WFU BLOG__私密文章測試」這個網頁取消打勾，儲存後這個網頁就不會出現在網頁清單了。

5. 測試效果

進入「WFU BLOG 測試網站」，會發現導覽列上的網頁清單，只會看到「首頁」，不會顯示剛剛那個私密網頁。

站長只要將「3. 取得連結網址」所複製的連結告訴他人，那麼只有知道連結的人可以進入那個網頁，例如這篇測試網頁的網址：

http://wfu-blog.blogspot.com/p/wfu-blog.html

三、私密網頁的侷限

1. Blogger 私密文章目前為止沒有完美的解決方案，包括本文也是。根據「官網的說明」，網頁小工具最多能增加 20 個空白網頁。

如果有大量私密文章需求時，也許可以開多個 Blog，每多一個 Blog，又可多 20 篇私密文章的額度，只是建立不同的 Blog 又得重新裝潢一下了。

2. 在沒有任何外部連結指向這篇私密網頁時，理論上搜尋引擎將不會收錄這個網址(蜘蛛機器人需要靠爬連結來蒐集、收錄網頁內容)。不過萬一有人偷偷分享這篇私密網頁的連結，然後又被搜尋引擎爬到的話，那麼這篇私密網頁就會出現在搜尋結果了。

文章開頭提到的另兩個方案，「文章加密」不會有這個困擾，而「私密文章偽裝方案」則可將網址導向 404 錯誤網頁，讓不慎闖入的讀者誤以為文章已刪除、不存在。

四、小結

根據以上做個簡單結論，想在 Blogger 使用私密文章，可先瞭解以上三種方案的原理，評估自身的需求、操作方便性等等綜合因素，再選擇最適合自己、最能承擔風險的方式。

(Pic from: eightforums.com)當使用平板或行動裝置時，為了節省電力，切換飛航模式來控制是否使用網路是重要的功能。在 Android 系統可以藉由 app 完成這件事，但 Win8 的 app 貧乏，要做到這件事並不容易。

而 Win8 的優點是還可藉由桌面系統來彌補 app 的缺乏，如果你也是 Win8 行動裝置的使用者，那麼可以參考本文的技巧。另外，本文的測試環境為 Win8.1，請先升級以排除可能的錯誤因素。

以下詳細說明各種方式的原理及操作方法，想節省時間的話，可直接跳到文末來下載檔案。

一、現成的切換程式

Google 到這個網頁「Airplane Mode On or Off Shortcuts - Create in Windows 8」，作者提供兩個檔案，一個用來切斷網路，一個用來連上網路。

該網頁的留言有人反應可以使用，也有人說 Win8.1 無法使用。而 WFU 在自己的系統測試也是無法使用，不清楚是否為中文系統的關係，有興趣的讀者可以自行測試看看。

二、使用 Hotkeyz 製作快速鍵

自行製作切換飛航模式的快速鍵是可行的，可以藉助舊版 windows 下強大的 Hotkeyz 這套免費軟體，來模擬按鍵的輸出。

1. 安裝 Hotkeyz

官網：http://www.skynergy.com/hotkeyz.html
下載網址：http://www.softpedia.com/get/Tweak/System-Tweak/HotKeyz.shtml
操作說明：http://briian.com/5523/hotkeyz.html
注意事項：由於 Hotkeyz 沒有出 Win8 版本，執行前建議將檔案的相容性設定為「Windows 7」，以確保不會異常。

2. 模擬的按鍵順序

可在自己的 Win8 測試一下，是否依照以下順序按下鍵盤，就能切換飛航模式：

Win + I(這是 window 鍵 + i 的意思) → Tab→ Space→ Space

3. 設定 Hotkeyz

按下左上角的 New 後，會產生設定框。

如上圖，Description 隨意填入自訂敘述，接著：

A. 按下 Click → Hotkeyz Commands → Remap Keyboard
B. 這裡會自動產生 Parameter 的分頁，如何填寫請見後述。
C. 在這個位置按下自訂的熱鍵組合即可。

接續步驟 B，切換到 Parameter 後，填入下面的字串：

[WinD][I][WinU][Pause][Tab][Pause][Space][Pause][Space]
按 OK 即可，以後便可使用自訂快速鍵來切換飛航模式了。

三、使用 TinyTask 製作模擬按鍵執行檔

如果是平板系統，快速鍵將無用武之地，此時需要的是能放在桌面執行的小圖示。在這個情境下，可以藉助 TinyTask 這個短小精悍的程式，來模擬按鍵輸出。

1. 安裝 TinyTask

官網：http://www.vtaskstudio.com/support.php#tools
下載網址：http://www.vtaskstudio.com/vista.pl?action=download&link=tinytask.exe
操作說明：http://briian.com/7471/tinytask.html

2. 錄製按鍵

執行 TinyTask 後，出現下圖的工具列──

按圖中紅框的藍色燈，可開始錄製，如前所述，請依序按下 Win + I→ Tab→ Space→ Space

完成後，按下圖中方框的紅色燈，結束錄製程序，再按下圓框的圖示，可儲存為執行檔。將這個檔案拉到桌面，以後執行這個檔案就能快速切換飛航模式了。

3. 下載切換飛航模式執行檔

如果操作上有問題，也可直接下載這個 WFU 用 TinyTask 錄好的檔案，可省去以上說明的研究時間：

https://googledrive.com/host/0BykclfTTti-0ZHNDNWM5eTZ5T28/FLIGHT-MODE-WFU-BLOG.exe

執行以上這個檔案時，沒意外的話通常會出現「Windows 已保護您的電腦....」這樣的字樣，只要按下「其他資訊」→「仍要執行」即可執行程式，以後不會再詢問此訊息。如果不放心的話，可以按照「2. 錄製按鍵」的步驟，自行製作一個模擬按鍵執行檔就行了。

(Pic from: freepik.com)其實 Blogger 留言頭像無法顯示的比例並不高，不過偶然發生時還挺麻煩的，不容易很快找出原因來。

前陣子讀者留言時，頭像發生不尋常的狀況，因此藉這個機會整理一下留言頭像異常的原因，從 WFU BLOG 現有的留言找出一些案例來嘗試進行分析。以下按例先說明原理，想直接看結果請跳至「三、Google+ 沒有設頭像」。

一、找出後台留言 feed 資料

整個原理大致是這樣，從留言看到異常頭像後，記下留言者暱稱，從網站的留言 feed 網址可列出留言資料：

http://你的網址/feeds/comments/summary

不過測試的結果，就算設定再大的顯示數量(例如 999)，最多只能顯示最近 500 筆資料：

http://你的網址/feeds/comments/summary?max-results=999

因此想要查閱更久遠的資料，必須加上起始留言編號參數，例如：

http://你的網址/feeds/comments/summary?max-results=999&start-index=501

這樣就會從第 501 筆開始顯示。接著搜尋留言者暱稱就能快速找到資料，進而找到留言者頭像網址，這部分請直接參閱「Blogger 最新回應＋留言者各種身份頭像」→「一、從 Json 資料找留言者頭像」→「2. 留言者頭像網址」

從 feed 裡面的留言頭像網址，與在文章留言的頭像網址相互比對，通常就能找出為何顯示異常的原因了。以下列出從 WFU BLOG 看到的各種異常狀況。

另外，對 feed 參數有興趣的話，可參考「Blogger 知識(筆記)」→「Blogger 結構」→「Blogger 資料來源用法與整理」

二、Blogger 頭像處理方式的異動

1. PICASA 的圖片參數

首先請參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」，在 PICASA 圖床的圖片都可使用網址參數來變更實際圖片大小。

2. Blogger 留言頭像的尺寸

過去的 Blogger 留言頭像總是使用圖片原尺寸，這導致留言區塊的圖片載入速度耗時。

近期 Blogger 做了改變(不確定改了多久)，有更新過 Blogger 簡介的使用者，無論使用上傳或是連結 PICASA 圖片，一律會被 Blogger 利用第 1 點的原理，將圖片強制取為正方形後，再將尺寸縮小到 45 x 45 px，可以發現圖片網址參數成為 s45。

這麼做的好處是，以後留言區塊有近期變動過的留言頭像時，載入速度就能比較快了，不過舊的留言頭像實際尺寸因為沒變，這部分就沒比較快。

有一好沒有兩好，這也是造成部分留言頭像無法顯示的主因，請見本文案例便可知曉。

三、各種異常案例

1. Google+ 沒有設頭像

上圖出現了三角框內有驚嘆號，點進其簡介後發現，他把 Blogger 帳號轉換為 G+ 帳號，而 G+ 帳號並沒有設定頭像。因此推測轉換帳號後沒有設定頭像，就會出現這樣的圖案。

2. 簡介不存在

一樣是三角框內有驚嘆號，點進其簡介後發現──「簡介不存在」。

從以上兩則例子算是可以歸納出，系統讀不到簡介的頭像設定時，會出現這樣的驚嘆號圖示。

3. 使用預設空白頭像

以上圖為例，這位留言者的頭像是無名氏，點進其簡介後發現，簡介的頭像也是無名氏(不過是另一張無名氏的圖)，因此推測使用系統預設空白頭像時，就會如此顯示。

4. 圖片已經移除

上圖出現了圓框內有禁止符號，進入留言 feed 查閱這張圖片的網址，發現的確無法讀取，因此推測這個圖片連結已經遭到移除，故無法顯示。

5. 圖片設定了隱私權限

一樣是圓框內有禁止符號，不過進入留言 feed 查閱這張圖片的網址後發現，其實這張留言頭像圖片是能讀取的──

http://2.bp.blogspot.com/_hHnLbTPS9CY/SYhxsnylFbI/AAAAAAAAArA/WO1eMRE2zME/S220/DSC02636.JPG

我們可發現到這張圖的網址參數有 "s220"，代表原始尺寸 220px。試著把尺寸改成 Blogger 目前預設的 45px，也就是把參數改為 "s45" 看看──

http://2.bp.blogspot.com/_hHnLbTPS9CY/SYhxsnylFbI/AAAAAAAAArA/WO1eMRE2zME/S45/DSC02636.JPG

結果發現這張圖片不能讀取了，說明了這張圖片可能在 PICASA 相簿有設過隱私權限，例如 "僅限擁有連結的使用者"，由於網址參數改了之後，PICASA 認定非原始連結，圖片就不給看了。

因此，這就是前面「二、Blogger 頭像處理方式的異動」所提的，有一好沒有兩好。Blogger 自動調整頭像尺寸大小，立意良善但可惜沒有解決 PICASA 隱私設定而造成的問題。

所以結論為，設定頭像圖片之前，請先注意一下該張圖片在 PICASA 的隱私權設定是否為公開，可參考官方網頁「相簿瀏覽權限」的說明。

四、離奇的異常頭像狀況

接下來這個案例其實也不必過於驚訝或害怕，因為發生機率個人估計不到萬分之一。這個狀況很奇特，不但受害者 Hyllus 自己的留言頭像無法顯示，而且 WFU 親自過去測試留言，也是無法顯示頭像──

這個狀況 WFU 真的沒輒，完全無法想像是什麼原因，只能推測是 Blogger 後台資料錯誤所造成的問題，認為應該寫意見回饋跟官方反應。

不過 Hyllus 提供了一條線索非常值得參考，他表示很久以前根據這篇文章「秀出你的大頭來‧Blooger新增留言者頭像圖片功能」，也許不小心在後台的選項「在評論上顯示簡介圖片」勾選了"否"，所以一律不會顯示頭像。

但是那篇文章是 2009 的古早年代，現在 Blogger 的新範本早就沒有這個選項了，或許 Hyllus 在不知情的情況下將舊範本升級為新範本，而這也代表著──永遠沒有機會將頭像恢復顯示了，因為就算現在切換回舊範本，一樣找不著這個選項了。

相信這個狀況最多發生在 "非常資深" 的 Blogger 使用者身上，若真的碰上了，趕緊跟官方回報吧！

(Pic from: lex100.com)Google 試算表的威力十分強大，許多我們在電腦前無法監控、執行的事務，都能交給他全天候 24hr 不間斷執行，尤其跟 Blogger 結合後更顯得無所不能，可參考這篇「利用 Google 問卷(試算表)當小型資料庫」。能凸顯其威力的其中一個因素是，內建函數能做到的事就已經很廣泛(而且內建函數還不斷在擴充中)，而做不到的事，還可自行另外寫程式(script)來實現。

此次「Blogger中文社群週年慶聖誕活動」，猜謎的部分利用試算表儲存問卷回答資料後，需要一個能全自動核對答案、並統計分數的系統。這對 Google 試算表而言，其實不是什麼難事，但可惜並沒有 Google 到任何中文網頁，來說明函數或是程式碼(script)要如何寫。

因此研究了一下這功能要如何實現，請依「二、製作能自動計分的試算表」的步驟進行，以後就能輕易地讓問卷試題自動計分了。

一、製作問卷試題

如果不熟悉如何製作問卷的步驟，可參考這篇「Google文件 2013新版問卷製作」；而製作問卷可能遇到的問題，可參考這篇 +Ken Lo 的技巧與心得「Google 問卷相關操作」。

以下是「Blogger 中文社群週年慶猜謎活動」的問卷，可用內嵌方式放在網頁上：

其試算表的內容大致如這個網址：

https://docs.google.com/spreadsheet/ccc?key=0AikclfTTti-0dFM2czNqUzNOWF9XQzA0ZGFGM1dseUE&usp=sharing

為了能自動計分，WFU 必須搶先第一個回答問卷填入正確答案，讓資料存入試算表，供系統有比對答案的基準(該活動答案的說明可參考「Blogger中文社群週年慶__猜謎問題解答」)

二、製作能自動計分的試算表

1. 完成問卷後，進入試算表的畫面，假設如同「一、製作問卷試題」，已經完成了正確答案的填寫，就像下圖第一位填問卷者 Wayne Fu──

首先需注意第一題的位置，存放正確答案的儲存格是由 "F2" 開始，請記下這個位置；另外 "B 欄" 用來記錄答題者暱稱，這一點之後會用到。

2. 接著我們新增一個工作表，如下圖(按左下角的 "＋" 即可)──

新增的第二個工作表假設取名為 "計分"，如上圖紅框；而原本儲存回答資料的工作表，假設名稱為 "WFU_exam"，請務必記住這個自訂的工作表名稱。
接著 A 欄要保留給答題者名稱，請空著。
從儲存格 B1 開始，利用滑鼠拖曳的方式，題目有幾題、數字就拉到多少(拉不成功只好手動打上 1~12)，例如本次活動有 12 題，將從 B1～M1 來標示題號。
最後 N 欄註明 "總分"即可。

3. 將游標移到 A1 儲存格，我們要將答題者名稱複製過來──

在 A1 貼上以下字串：

=query(WFU_exam!B:B)

這個 query 函數的意思為，以後無論有多少人答題，都能將 "WFU_exam" 這個試算表 B 欄的所有資料複製過來，我們不必再手動複製，非常地方便。
"WFU_exam" 字串請置換為自訂的試算表名稱。
如果原工作表(WFU_exam)的答題者名稱不在 B欄，請自行置換對應的英文字母欄位。

4. 接著將游標移到 B2 欄位，我們要將進行改考卷的動作──

在 B2 貼上以下字串：

=ArrayFormula( if(ISBLANK(WFU_exam! F2:F)=false, if(WFU_exam! F2:F = WFU_exam! F$2, 10, 0), ) )

這段函數一貼上之後，馬上可看到第 1 題所有人的分數都被統計出來了(答對得 10 分，答錯 0 分)，不必再使用滑鼠拖曳來複製。
所有藍色字串 F代表「第 1 題從原工作表(WFU_exam)的 F 欄開始」，所有藍色字串 F 請改為自己第 1 題的起始欄位。
紅色字串 10、0，請改為自訂的分數。

這段函數的意思不容易簡單解釋，大致的意思為「從儲存格 F2 開始檢查 → 如果 F 欄該儲存格有資料 → 一律跟 F2 比對資料 → 如果資料相同則得到 10 分 → 如果資料不同則得到 0 分」

5. 這個步驟沿用上個圖，請注意圖中的紅圈，滑鼠移到這個有藍色小正方形的位置，將他往右邊拖曳，直到最後一題為止，就能將步驟 4 的函數，從第 1 題複製到最後一題了。

6. 下面是滑鼠將藍色小正方形拉到第 12 題的狀況，我們可以發現，所有人每一題的答題分數，瞬間全部顯示出來了──

7. 最後一個步驟，將每個人的分數加總。滑鼠移動到總分那一欄、如下圖 N2 儲存格──

在 N2 貼上以下字串：

=MMULT( INDIRECT("B2:M" & count(B:B)), TRANSPOSE( ARRAYFORMULA( COLUMN( INDIRECT("B2:M" & count(B:B)))^0)))

這段函數一貼上之後，馬上可看到所有人的分數被自動加總完畢。
兩個紅色字母 M代表最後一題的欄位，請改為自訂的最後一題欄位字母。
所有藍色字母 B代表第 1 題的欄位，可改為自訂的第 1 題欄位字母。

這段函數的意思比上一段函數更像天書，其原始出處為這個網頁「How can I use ARRAYFORMULA and SUM together to get a column with the sum of the proceeding rows」，原作者能找出這個方法真的是天才，因為一般的解法會使用 SUM 函數加總，但可惜 SUM 無法做到全自動執行的效果。原作者有用英文稍微解釋一下含意，不過用中文 WFU 也不會表達(跟陣列有關)，有興趣可看原網頁並參考 Google 官方函數說明。

但是我的版本跟原作還是有一些差別，因為原作的版本只能處理固定範圍，意思就是只能一次性的處理，有額外的答題者時得手動操作、少於預定的答題者時畫面會不美觀。

現在 WFU 修改後的函數，不必設定初始答題人數，有再多的額外答題者，系統依然能全自動加總。想測試是否如 WFU 以上所言，可進入前面提供的問卷表單隨意填寫：

https://docs.google.com/forms/d/1L7K65XyQ_Jsjh64lK_m0NrJCCMXaSukIakZI-answIA/viewform?embedded=true#start=embed

然後再到以下的試算表 → "計分" 工作表查看，

https://docs.google.com/spreadsheet/ccc?key=0AikclfTTti-0dFM2czNqUzNOWF9XQzA0ZGFGM1dseUE&usp=sharing

就能看到你的考卷是否已經被立即改好、並打上分數了！

三、小結

本文的函數內容很不好懂，不過有很強大的優點：

1. 當答題者數量無法確定的情況下，一般的函數無法處理這樣的情形，只能等所有人答題完畢後進行一次性的處理。每次有額外的答題者時，必須另外手動操作以複製儲存格的函數，才能進行計分動作。

2. 使用本文的函數後，不必假定答題者人數、或設定儲存格範圍，系統隨時都能全自動運算統計。

這篇文章看起來不短，然而其實只需要貼上幾個函數、改一下參數就能完成。存成範本的話，以後使用的速度將更快，相信是一個很好的 "自動計分" 解決方案。

(設計: +Totoa Hari, 素材: goo.gl/x6WzZC)如能善用 CSS 語法，不需要使用影像編輯軟體，也能讓圖片輕鬆做出「外框 + 陰影」的效果。不過使用 CSS 做出簡單的陰影很容易，要做出不錯的立體感就稍微困難一些。

另外，要在單一圖片使用 CSS 效果很容易，要找出特定範圍來一併套用 CSS 效果就麻煩一些(例如指定文章區塊)；又，文章內可能不是每張圖都適合加框、上陰影，這也得另外來處理。

以下先舉例沒使用 CSS 的情形，再簡單示範一個效果不錯的立體陰影 CSS 效果，並說明如何排除特定圖片、不使用陰影效果的方式。

一、使用影像編輯軟體

1. 若是對 CSS 不熟，一些立體陰影效果只能藉由影像編輯軟體才能完成，這樣處理部落格圖文的時間就會拉長，例如下面這張圖的效果，就是使用後製完成的──

上圖左下、右下角模擬紙張翹起的立體陰影，其實可以利用 CSS3 語法做到，不過較為複雜，會在下一篇介紹。

2. 本站文章開頭的示意圖，使用了模擬紙張下方凸起的立體陰影效果，例如下面這張圖──

這就不是使用影像編輯軟體後製，而是使用 CSS3 語法。只要對著圖片按下、另開視窗就可看到原始圖片，沒有任何陰影效果。由於較為複雜，一樣在下一篇文介紹。

3. 本站內文使用的圖片，效果類似下圖──

這也是使用 CSS 語法產生的立體陰影，可另開視窗看原始圖片，本文將以此效果舉例。

二、找出要套用 CSS 的區塊

如果為圖片標籤 img 設定 CSS 陰影，將會導致全網頁圖片都套用此效果，例如以下：

<style>
img {
box-shadow: 1px 1px 1px #ddd;
}
</style>

因此必須限定特定區域的圖片標籤 img 才套用 CSS 陰影。以 Blogger 的為例，在範本中內文區塊的 class 為 "post-body"，所以可以設定如下：

<style>
.post-body img {
box-shadow: 1px 1px 1px #ddd;
}
</style>

如此將只有內文區塊的圖片，才會套用此 CSS。如果非 Blogger 平台，可參考這篇文章「Chrome 開發人員工具」的操作方法，來找出內文區塊的 class 或 id，就能設定 CSS 了。

三、不錯的立體陰影 CSS 設定

接著以下圖為例，將這個效果的 CSS 放入範本中。(請注意:IE8(含)以下不支援CSS陰影語法，建議參考這篇文章、並在部落格宣導「建議避免使用 IE8(含)以下瀏覽器」)

以 Blogger 來說明，要將效果套用到內文區塊的所有圖片，請到後台範本 → 編輯 HTML → 搜尋字串 .post-body img。由於每個範本都不一樣，說不定預設已經有一些內容，例如像下面的程式碼：

.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}

如果不想用預設效果，想使用本文效果，請改為以下：

以上黑色字串為原程式碼，有顏色的字串為新增的程式碼。儲存後，所有在文章中的圖片將自動套用此立體陰影效果。

以下說明請參照程式碼行號──

B、L：B 行的紅色字串 "/*" 與 L行的紅色字串 "*/" 代表將中間的黑色字串(預設程式碼)註解掉，使其不執行。範本中的所有預設程式碼都不建議刪除，方便將來還原之用，請參考這篇「Blogger 範本__(一)各種註解方式及區塊的修改」→「一、範本註解方式」的說明。

N～P：藍色字串為外部陰影的語法、綠色字串為內襯陰影的語法；一般只使用藍色字串的語法，不過本文的效果使用綠色字串後，立體效果更佳，可模擬紙張邊緣的光線效果。

Q：設定紙張邊緣(外框)的寬度，8px可改為自訂數值。

R：設定背景色為 "白色"(#fff) 時的光線效果，也可自訂為其他顏色。

S：不使用框線

四、放在自訂區塊的 CSS 程式碼

「三、不錯的立體陰影 CSS 設定」的說明是使用 "修改" 範本程式碼的方式，不過如果在範本沒有搜尋到 ".post-body img" 這樣的字串，或是想要將 CSS 程式碼套用到自訂的區塊，那就得用 "新增" 程式碼的方式。

請在範本中搜尋 </head>字串，然後在其前一行，新增以下程式碼即可：

.post-body img {
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding: 8px;
background: #fff;
border: none;
}

以上紅字 ".post-body" 可改為自訂區塊的 class 名稱。

修改說明請參照「三、不錯的立體陰影 CSS 設定」。如果對程式碼熟悉的話，以上程式碼請自行放到範本中的 CSS 區段比較利於管理。

五、特定圖片排除陰影效果的方式

有的時候某些內文圖片是不需要加特效的，例如一行文字裡面穿插小圖示(參考這篇「Blogger 網誌清單的妙用＋網站小圖示的調校」)、使用圖片式標題(參考這篇「為健康把關的57堂課__飲食篇」)等等。對於出現頻率比較低的情境，可以為這些圖片另外設定 class 來套用，以下為步驟：

1. 在範本中 </head>之前插入以下程式碼──

<style>
.no-shadow {
padding: 0px;
box-shadow: none;
background: transparent;
border: none;
}
</style>

以上 "no-shadow" 可改為自訂的 class 名稱，套用這個 class 的圖片將消除所有陰影效果、背景顏色、邊框等等。

2. 接著在文章中不想使用陰影的圖片，記得在 img 標籤內加入 "no-shadow"(或自訂字串) 這個 class 名稱，例如以下範例：

<img class="no-shadow" src="http://4.bp.blogspot.com/-9aoXd1tS9cA/UqKQoSBPbqI/AAAAAAAAIWM/p9kZ3LemOu8/s1600/blogger-community-xmas-one-year.jpg"/>

如此這張圖片將沒有任何額外效果，如下圖：

六、小結

以上看起來內容很多，其實要操作的步驟並不多，而且只要做一次便可以一勞永逸，所有文章內的圖片都可自動套用陰影效果。本文是比較簡單、入門的範例，下一篇將介紹更立體的 CSS 語法，操作上更進階，但效果絕對令人炫目。

中文字型由於先天上的諸多限制，無法像英文字型般，在網頁上能有多樣性的呈現。若是想與眾不同，最簡單的方式是將特殊中文字型做成圖形(例如網站標題及敘述)，不過缺點是不利於 SEO。

而不使用圖形也是有辦法來顯示自訂字型，可參考這篇「自製中文網頁字形（Web Font）並內崁至網頁中」，不過操作步驟很多，需要一些基礎知識，且 IE8(含)以下不支援；另外的方法就是付費使用某些線上的服務了。

那麼退而求其次，假設不滿意 "新細明體" 的效果，能否讓網頁在各種作業系統下都能顯示其最佳字型呢？以下為整理 CSS 語法 font-family 的心得筆記，先說明各種設定的原理，若想直接看結果請跳到「五、最佳化設定」。

一、各平台預設的中文字型

由於中文字型檔太大(都是數 MB 起跳)，網頁不可能引用特定的中文字型檔來呈現某種字體，還沒載入完畢訪客應該就先行告辭了，因此最好的方法就是讓網頁顯示作業系統的中文預設字型。

大部分作業系統都能顯示的 "新細明體"，若想要改為顯示其他字型，那麼得先瞭解一下各種作業系統的預設中文字型，以下大致列出各系統較熱門的預設繁體字型：

1. WIN 2000/XP

新細明體：PMingLiU
標楷體：DFKai-SB

2. WIN Vista/7/8

微軟正黑體：Microsoft JhengHei
標楷體：DFKai-SB

3. Mac OS

黑體-繁：Heiti TC (Mac OS 10.6 以後預設字型)
儷黑 Pro：LiHei Pro
標楷體：BiauKai

以上 1～3 詳細的字型列表可參考這個網頁「常用的中文字體的英文翻譯」

4. Linux

文泉驛正黑：WenQuanYi Zen Hei
全字庫正楷體：TW-Kai

參考：利用 X 字體別名，讓 Linux 桌面環境顯示文件中的標楷體、細明體與黑體

5. Android

Android 系統的字型很少，不過預設中文字型 Droid Sans 就已經比新細明體好看，所以不用特地為 Android 系統設定中文字型。

參考：Android系統顯示用字型解決方案

二、英文字型及中英文字型的設定順序

1. 英文字型選擇

各種作業系統能共用的英文字型非常多，想找出幾個最佳共用字型的話，可參考這篇「Best font family for windows, mac and linux」，選擇喜歡的自訂英文字型。

2. 中英文字型個別設定的順序

如果網頁的中、英文想要各自使用不同的字型，那麼 CSS 的語法 font-family，設定字型的順序就非常重要，請參考這篇「CSS font-family 順序」有詳解。

簡單舉兩個例子：

◎ font-family: "新細明體", Arial;

中文字型在前、英文字型在後，這是錯誤的設定方法→ Arial 這個英文字型永遠不會被使用，因為 "新細明體" 已經內含英文字型，所以英文字永遠會使用 "新細明體"。

◎ font-family: Arial, "新細明體";

英文字型在前、中文字型在後，這是正確的設定方法。英文字會使用 Arial 這個字型；而中文字在 Arial 字型找不到編碼，便會轉而找順位在後的 "新細明體" 來使用。

3. 中文字型設定順序

依據同樣邏輯，如果把含括性較廣的中文字型設定在前、而較不通用中文字型設定在後，那麼就是錯誤的設定方式。請見以下舉例：

◎ font-family: "標楷體", "儷黑 Pro";

這是錯誤的設定方法，由於 "標楷體" 幾乎每個作業系統都有，在 Mac 上也有，這麼設定的話，"儷黑 Pro" 就沒有被執行到的機會了。

◎ font-family: "儷黑 Pro", "標楷體";

使用機率低的中文字型在前、使用機率高的中文字型在後，這是正確的設定方法，Mac 上會使用 "儷黑 Pro" 這個字型；而非 Mac 系統找不到 "儷黑 Pro" 時，便會轉而使用順位在後的 "標楷體" 來使用。

4. 補充說明

英文字型名稱由一個單字組成，不須加雙引號；由兩個以上的單字組成，則須加雙引號。
中文字型名稱最好都加雙引號，以確保瀏覽器相容性。

三、字型名稱與通用字型

font-family 的參數可以使用兩種：字型名稱(family-name)與通用字型(generic-family)，詳解請參考這篇「CSS font family 字型字體」。

簡單來說：

前面提到的 Arial、新細明體都是 "字型名稱"。
"通用字型" 是瀏覽器的預設字型。
萬一我們設定的 "字型名稱"，瀏覽器在作業系統找不到字型檔時，那麼設定 "通用字型" 就是一個買保險的動作，讓瀏覽器能找到字型來顯示。

因此，配合前面中英文字型混合的例子，讓瀏覽器能正常顯示字體的安全設定方法為：

font-family: Arial, "新細明體", sans-serif;
字串 "sans-serif" 可改用其他通用字型，請參考上面參考連結的內容。

四、不同語系的設定

前面的例子設定了參數字串 "新細明體" 為中文字型，實際上，這樣的設定參數無法通用各種瀏覽器版本及各種語系，詳細原因請參考這篇「正體中文與簡體中文之網頁泛用字型設定」。

簡單說，這篇參考文章表示，IE 在「中文(台灣)」的作業系統環境，只認得 "新細明體" 這個參數；而 IE 在其他(國外)地區的系統，只認得 "PMingLiU" 這個英文參數。所以如果華人訪客來自國外、使用 IE 連上我們網站時，若 font-family 沒有設定正確，就看不到我們設定的中文字型了。

因此，配合前面的例子，讓瀏覽器能正常顯示字體的安全設定方法為：

font-family: Arial, "新細明體", PMingLiU, sans-serif;
同一個中文字型，使用兩個中英文語系字型名稱並存的設定方法，是跨瀏覽器、跨語系的安全作法。

五、最佳化設定

1. 概念

綜合以上的基礎知識，font-family 的參數必須從含括範圍最小的字型，一路設定到含括範圍最大的字型，才能達到跨平台(作業系統)、跨語系的最佳效果。

大致上可行的概念為：

英文字型 → Linux 字型(中英文名稱) → Mac 字型(中英文名稱) → Vista 字型(中英文名稱) → XP 字型 → 通用字型

2. 實例

根據以上概念，試做一個範例，來兼顧各個作業系統：

font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;

六、依網頁不同區塊設定 font-family

有了最佳化的概念後，我們可以為網頁不同區域的字型來分別設定。

1. 全部網頁

如果字型的設定想套用到全部網頁，那麼可在範本中尋找 body {...} 這個區間，新增或修改原本 font-family 的參數設定。

2. 標題

網頁的文章標題，WFU 覺得用楷體比較好看(如本站使用 "標楷體" 的效果)，以 Blogger 為例，可參考以下的步驟及參數：

1. 如果文章標題沒有超連結效果，可尋找範本中的字串類似 h3.post-title {...}這個區間，然後加入 font-family 的敘述。

2. 如果文章標題有超連結效果，可尋找範本中 h3.post-title a {...}這個區間(找不到以上字串時，可用新增的方式，請參考後面「3. 文章內文」)，然後加入 font-family 的敘述。

3. font-family 敘述可為以下：

font-family: Arial, "全字庫正楷體", "TW-Kai", "標楷體", "BiauKai", DFKai-SB, sans-serif;

3. 文章內文

網頁的文章內文區塊，如果想換掉預設的新細明體，改為各個作業系統顯示效果較佳的自訂字體，以 Blogger 為例，可參考以下的步驟及參數：

對範本熟悉的話，在 CSS 區段加入 font-family 相關敘述。
不熟悉的話，先在範本中找到 </head>，在前一行插入以下程式碼：

<style>
.post-body {
  font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
</style>

如此一來，在大部分的作業系統，都不會出現 "新細明體" 了！

以 WFU BLOG 為例，經以上設定後，目前文章內文的字體，在 Linux 將顯示 "文泉驛正黑"；在 Mac 將顯示 "儷黑 Pro"；在 Win Vista 以後的系統將顯示 "微軟正黑體"；只有 Win XP，因為沒有特別設定，系統還是會回去找 "新細明體"。

「下拉選單」是個從部落格建立以來便很想要的功能，不過大部分下拉選單除了安裝方式不容易，通常需要有 HTML 基礎才比較能成功；且另外比較麻煩的是，下拉選單很難具備管理性，也就是日後想調整選單內容、順序時，是個不太輕鬆的工程。

以上便是這篇安裝懶人包的源由，使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理，因為私心偏好做了個 "三角頂端" 的選單形式，其原理十分複雜，需要專文解釋才清楚，如果想瞭解原理的讀者請再留言了，這樣目前可減少一些篇幅另外說明。

一、準備動作

基本上，部落格得先建立導覽列，才能使用本篇的下拉選單小工具。因此只要你的網頁或部落格有導覽列，理論上無論是否為 Blogger 平台應該都 OK。不過本文主要使用 Blogger 來說明，其他平台有問題請再提出了。

1. 建立導覽列

◎ 網頁小工具：

Blogger 最簡單的方法就是使用「網頁」小工具當導覽列，請先到後台 → 網頁 → 將網頁顯示為 "最上層標籤"

◎ 其他小工具：

許多官方小工具，例如「標籤」、「連結清單」等等，都能在後台 → 版面配置的畫面，用滑鼠拖曳到導覽列的位置。可參考這兩篇「將 Blogger "標籤"小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列？」。

2. 更改超連結

本篇下拉選單的效果為「滑鼠移到選單時，自動顯示下拉選單」，這樣的效果在 PC 上沒有任何問題，但行動裝置由於 "沒有滑鼠"，必須 "點擊選單" 才能讓下拉選單顯現。

因此行動裝置會產生一個問題 → 若原本的選單有超連結，點擊後會另開新視窗。

因此建議導覽列上、有下拉選單的項目，其超連結設定為井字符號 "#"，這樣在行動裝置上就不會另開視窗了。需要操作步驟的話可參考「在 Blogger 功能選單使用語法產生動態效果」→「一、使用方式」的圖片，在網址的部分填上 "#"。

二、安裝程式碼

1. CSS 樣式

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

<style>
.tabs-outer, .tabs-outer ul {
overflow: visible !important;
max-height: none !important;
}
.dropMenu li{
display: block;
position: relative;
margin: 0px !important;
padding: 0px !important;
}
.dropMenu a{
display: block;
text-decoration: none;
border: none !important;
padding: 5px !important;
height: auto;
}
.dropMenu {
top : 45px;
left: -20px;
text-align: left;
background: #e6e6fa;
position: absolute;
z-index: 100;
margin: 0px !important;
padding: 5px !important;
border-radius: 4px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
display: none;
}
.dropMenu:after {
width: 0;
height: 0;
border-left: 140px solid transparent;
border-bottom: 15px solid transparent;
content: '';
position: absolute;
left: 0px;
top: -15px;
}

.dropMenu li:first-child:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #e6e6fa;
content: '';
position: absolute;
left: 50%;
top: -15px;
margin-left: -10px;
}
</style>

2. 主程式碼

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

以上的參數如何修改，請見後面的說明。

三、參數修改

請對照以上的程式碼行號──

1. 基本參數修改

G：如果是 Blogger 官方的範本，這一行通常不需要改，導覽列區塊就是在這裡；如果不是官方範本、改過範本或配置的話，可參考「Google Chrome 開發人員工具」來找到導覽列的區塊，然後置換本行字串 ".tabs-outer"──

如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#navbar"。
如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".navbar"。

H：如果下拉選單字串會被斷行的話，表示預設數值 120 不夠大，建議調整為更大的數字，直到不會斷行為止。

I："#e6e6fa" 字串為預設的下拉選單背景色，可參考這個網頁「網頁色碼選擇器」來更改色碼預設值。

J：可自訂下拉選單的提示圖案，也可使用圖片(改為圖片網址即可)。

2. 自訂下拉選單內容

這裡即為下拉選單的管理介面，O～U及 W～Z行為兩個範例──

O：紅字 "網站導覽" 請置換為自己導覽列上的選單字串

P～T：

藍色字串請置換為自訂的下拉選單項目名稱
http 開頭的網址請置換為自訂的超連結
名稱與網址之間請用蚯蚓符號 "~" 隔開，有空格沒關係，比較能清楚辨識，程式處理時會自動去除空格。
每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。

在 AC 行之前要插入幾個項目都可以，可複製 P～T 行的格式來修改，並自行增減項目。

想要對照效果請看本站畫面上方的浮動導覽列即可。

3. 有異常顯示的官方範本

由於官方範本很多，無法一一測試所有的狀況，若有發現顯示不正常的情形，或許是該範本使用了特殊的 CSS 設定，請另外留言回報狀況，再看看 CSS 如何調整即可。

四、小結

這個安裝懶人包比起一般需要處理 HTML 碼的方式算是方便許多，而如果懂 CSS 的話，還可自行修改「二、安裝程式碼」→「1. CSS 樣式」，讓自己的下拉選單與眾不同。

另外這個下拉選單也支援「浮動導覽列」，而浮動導覽列的優點請見「這篇說明」，因此建議一併安裝，可為部落格加分不少。

(Pic from: felipegodoy.wordpress.com)

一、版權聲明

本站採用的版權聲明為「CC 姓名標示-非商業性-相同方式分享 3.0(CC BY-NC-SA 3.0)」，詳情請點上述連結，簡單敘述如下──

您可自由：分享 — 修改本著作

惟需遵照下列條件：

姓名標示— 您必須註明作者為 Wayne Fu (或 WFU)，提供指向相關著作的連結，以及指出本素材是否已被變更。
非商業性— 你不得將本素材進行商業目的之使用。
相同方式分享— 若你重混、轉換本素材，或依本素材建立新素材，你必須依本素材的授權條款來散佈你的貢獻物。

二、版權圖示

本站大部分的工具、hack 作品是沒有放版權圖示的，而如果是有放的話，一方面代表自認為這是個上得了檯面的作品；一方面 javascript 是個攤在陽光下的語言，任何人都能輕易修改內容、甚至自己添加版權宣告，因此本站自行先加上版權圖示，算是一種基本的保障。

且，本站提供的工具均為免費使用，並沒有跟使用者收取費用。免費軟體程式設計者，無法得到實質的回饋，在作品加上版權聲明是唯一能表彰 Credit 的方式，希望使用者能接受這一點。

有部份使用者會以顏色不搭、跟版面設計不協調等理由自行除去版權圖示，對此，WFU 的想法請見下個章節。

三、本站對移除版權圖示的態度

有人反應過，程式碼不是有註明「本程式可任意使用」？沒錯，以「Blogger 最新回應＋留言者頭像＋文章標題」為例，該篇文章附了程式的「原始碼」，基本上本站的所有工具，都符合原始碼版權聲明的敘述：「本程式可任意使用，但不包含商業行為；若修改轉載請註明出處。」

移除版權圖示的確是「使用者的權利」，不過不代表我喜歡使用者這麼做。WFU 認為，會移除版權圖示，就表示技術能力很行，那麼建議避免來本站留言(無論是尋求技術支援或是其他目的，本站將不會提供任何服務，「這也是本站的權利」。

四、修改版權圖示的建議作法

如果覺得版權圖示不美觀、影響版面，這是可以理解的，因為每個部落格的配色、配置都不同。不過如果拿這個當作自行移除版權圖示的理由，只能說著作權還未成為普世價值。

為了讓版權圖示符合部落格版面，方法很多，改顏色、改圖案都行，只要超連結還存在，都是可以接受的，但請不要移除、縮小或隱藏起來。

「welkinwayfarer」的作法可供參考，下圖紅框的圖案修改了原本的版權圖示，這是可以接受的：

五、移除版權圖示的管道

想移除版權圖示，又想得到本站的技術支援，能接受的方式為以下：

1. 請事先與我聯繫，那麼我會考慮；而同不同意得看作文技巧能否打動我、或是跟本站的往來程度了。

2. 請參考「贊助 WFU BLOG 的管道」→「四、贊助的小禮物」，有詳細說明。

除此之外，如果擅自移除了本站小工具的版權圖示，麻煩儘可能地不要讓我知道貴站的存在、不要來本站留言。能夠接受的方式只有事先知會，不接受事後被發現時，再來辯解的各種理由。

本站為研究 Blogger 最深入的中文部落格，同時也有最新的資訊(G+專頁)及討論管道(Blogger中文社群)。如有以下 Blogger 相關的需求或提案，歡迎與我聯繫：

1. 個人諮詢：不方便公開身份留言討論，有 Blogger 方面的問題尋求私人諮詢。

2. 商業諮詢：貴站為商業網站，有 Blogger 方面的問題尋求商業諮詢。

3. 網站優化：如果覺得網站執行速度過慢，想要優化範本的程式碼(或需要這方面的諮詢)。

4. 客製功能：網站需要執行特定需求的程式，或需要寫客製化的工具。

5. 其他類諮詢：若詢問非官方範本、或其他網站寫的功能，必須花時間去了解程式的思考邏輯、架構等等，時間成本很高、且這些程式不具一般性及普遍性，公開討論對一般的 Blogger 使用者不一定有幫助、用到的機會也不大，因此多數情況將視為「1. 個人諮詢 \ 2. 商業諮詢 \ 4. 客製功能」。

6. 資料庫建置：網站有資料庫建置需求，若非大型資料或流量時，可協助利用 Google 試算表建置資料庫。本站利用 Google 試算表製作的工具如下：

以上需求可與我聯繫、或在本頁面表單提出，會根據難易度提出建議或報價。

6. 其他意見、合作提案：對於本站的建議、或有任何提案，也歡迎與我聯繫。

聯繫人：Wayne Fu
Email：waynefu.g@gmail.com
Google+：https://plus.google.com/+WayneFu

聯絡表單：

一、網站源起

對 WFU 而言，記憶是一種越來越不可靠的東西，除了會遺忘、還可能欺騙自己！因此，對於費心整理的重要知識及解決方案，要記住與瞭解還是儲存在電腦比較保險；有幸跟上了雲端的時代，資料存放在 BLOG 等於是買了雙保險。把在大腦中做儲存與搜尋的動作，轉移到電腦與部落格，這下要忘記可就難了吧！

歡迎來到我的雲端資料庫──WFU BLOG，這是一個資訊共享的時代，競爭的本質轉變為 "資訊應用" 的能力。

二、網站圖像與敘述

進入部落格，最明顯的應該就是這座腳下佈滿雲朵的橋樑了。「Le Viaduc de Millau」──世界最高、常年位於雲端之上，引領人們通往雲端的橋樑。藉此圖示為精神象徵及鞭策期許，但不敢妄自僭越比擬，故加上個「偽」字較為貼切！

雖是「偽 ‧ 雲端」，但英文讀音其實就是「Wayne 端」，那麼「Wayne 端的調校資料庫」，倒也名符其實了！

三、網站內容

起初這裡是遊戲「三國志11」所使用的圖文儲存平台，沒想到遊戲不碰了之後，倒是 Blogger 的自由度成了研究的興趣，網站的主題也轉變為 Blogger 的調校心得。而接觸部落格的時間越久，了解更多網路的相關知識後，整個雲端世界又是另一個新天地！目前除了 Blogger 的心得筆記，所有網路、雲端的應用也會是研究範疇。而未來網站可能還會含括什麼樣的內容與主題，就看雲端世界能帶領走多遠了！

四、網站精神

「取之於網路、用之於網路」，在這個網站，我所得到的知識，都是從網路上獲得的。一方面得歸功於 Google──這個真正世界最高、帶領人們通往雲端的橋樑；一方面也希望回饋於網路，讓資訊在網路上流通。

將心得、原理筆記分享出來，可讓知道運用、善用網路的人，省去摸索的時間，將精力與心力放在 "延伸"、"應用" 與 "創造" 的層面上，減少在尋求 "基礎知識" 上打轉的時間。

同樣也希望留言發問的朋友，能夠 "公開" 提問、讓資訊流通。我們也都是從別人的公開提問得到益處，那麼也讓我們的公開討論，成為別人的幫助。

除了可以為友誼的橋樑，希望我們都可成為他人眺望雲端的橋樑。

一、關於 WFU BLOG

本站研究最深入的主題為 Blogger，並成立了「Blogger中文社群」，同時也有許多關於網路、雲端的應用心得。

想瞭解更多網站源起、網站圖像、網站內容、網站精神等小故事，請看這篇：

WFU BLOG 網站故事

二、網站導覽

想知道如何在本站快速找到需要的資訊，那麼可以參考這幾篇導覽文章：

三、訂閱最新文章及資訊

除了網站的最新文章，本站成立的 Google+ 專頁「Blogger 調校資料庫」蒐集了 "部落格建構"、"網頁技巧"、"網路雲端應用" 等最新資訊，請參考這篇的各種訂閱管道：

訂閱最新文章及資訊

四、諮詢服務與合作提案

如有以下 Blogger 相關的需求或提案，歡迎與我聯繫──

個人諮詢或商業諮詢
網站優化、其他部落格功能、客製化需求
網站小型資料庫建置
其他合作提案

詳情請見這篇：

諮詢服務與提案合作

五、版權聲明、版權圖示、贊助事宜

WFU BLOG 的版權聲明及版權圖示

一方面贊助者可以有移除版權圖示的權利，一方面 WFU BLOG 的性質無法像新聞發報式的部落格，來獲得大量的點閱率，不過可以確定的是，在這裡看到的都會是別的地方沒有的第一手心得與應用。如果支持這樣的精品創作形式，可以在這篇文章找到適合您的贊助方式：

贊助 WFU BLOG 的管道、小禮物、及功能需求建議

六、作者相關連結

作者：Wayne Fu (或 WFU)
Google+ 個人頁：https://plus.google.com/+WayneFu
Google+ 專頁：https://plus.google.com/+WayneFu-Blogspot
Facebook 粉絲頁：https://www.facebook.com/WFU.BLOG
Blogger 中文社群：https://plus.google.com/communities/103807083735607134704
三國志 11 分站：http://wfu-san11.blogspot.com/
Email： waynefu.g@gmail.com

Hotkeyz 是 Windows 下非常強悍的一套免費軟體，大部分的動作都能利用 Hotkeyz 設定成熱鍵來執行。雖然另一套軟體 AutoHotkey 功能最強大、自訂性最高，不過需要不少基礎知識及一點語法底子，相較之下 Hotkeyz 則適合每個人使用，且大部分的操作、設定都十分簡單，不需要參考說明文件也能輕鬆上手。

而本文要介紹的是，Hotkeyz 比較不易操作、但功能比較強大的部分──重新定義鍵盤(設定連續組合鍵)。這個功能可模擬連續的鍵盤輸入，而達到機械化的自動流程。以下先說明原理及操作方法，最後附上一個實用範例解說──Win8 睡眠模式快速鍵。

一、基本說明

基本介紹及操作說明：http://briian.com/5523/hotkeyz.html
下載網址：http://123.briian.com/forum.php?mod=viewthread&tid=87
注意事項：由於 Hotkeyz 沒有出 Win8 版本，執行前建議將檔案的相容性設定為「Windows 7」，以確保不會異常。

二、設定簡單的連續組合鍵

1. 操作範例

假設我們每天都要執行輸入帳號的動作，例如輸入「"wayne fu"」→「按下 "Enter"」。對於例行性的動作，就可以交由 Hotkeyz 處理，設定快速鍵後，幫我們連續按下以上這些按鍵。以下為簡單的操作範例：

按下左上角的 "New" 後，會產生設定框。

如上圖，Description 隨意填入自訂敘述(提示用)，例如 "wayne fu"，接著：

A. 按下 Click → Hotkeyz Commands → Remap Keyboard(重新定義鍵盤)
B. 這裡會自動產生 Parameter 的分頁，如何填寫請見後述。
C. 在這個位置按下自訂的熱鍵組合即可，例如圖中的 Ctrl + Alt + W。

接續步驟 B，切換到 Parameter 後，填入下面的字串參數：

[w][a][y][n][e][SPACE][f][u][ENTER]
按 OK 即可，以後按下這個我們自訂的快速鍵 Ctrl + Alt + W時，就會自動輸入「"wayne fu"」並「按下 "Enter"」。

2. 使用說明

從以上範例可得知，設定的每個按鍵字串，必須放在括號 "["、"]" 之內。
按鍵字串不分大小寫，就算輸入 "[W]"，使用快速鍵後，顯示出來的依舊是小寫 "w"。
若想顯示大寫 "W"，必須設定組合鍵 SHIFT + W，但 SHIFT 屬於特殊按鍵，使用方法請見「三、設定特殊的連續組合鍵」。

3. 特殊按鍵

特殊按鍵有以下這些：

Ctrl→ 使用 "Control" 字串
Shift
Alt
Window→ 使用 "Win" 字串

三、設定特殊的連續組合鍵

1. 前面所提的四個特殊按鍵，大部分情況都是配合其他按鍵使用；而配合其他按鍵成為組合鍵時，必須拆解成 "按下"、"放開" 兩個動作，否則作業系統會當掉一段時間。這四個特殊按鍵的字串後面 + "D" 就代表 "按下"(down 之意)；字串後面 + "U" 就代表 "鬆開"(up 之意)。

2. 以前面的例子來說，想要顯示大寫 "W"，我們必須在鍵盤按下 Shift + W，而 hotkeyz 能接受的指令為 "按下 Shift 鍵" + "w" + "放開 Shift 鍵" → 因此完整的指令為 [ShiftD][w][ShiftU]。

3. 同理 ctrl與 window這兩個鍵，與其他鍵組合使用的指令為：

[ControlD]、[ControlU]
[WinD]、[WinU]

4. 執行多個組合鍵時，最好間格一小段時間，以免系統還來不及反應時，下一組按鍵即送出，導致執行錯誤。而 Hotkeyz 提供的 "間隔" 指令為 [Pause]，這指令十分重要也常常用到。

四、Win8 睡眠模式

瞭解基本操作方式後，現在來看這個完整範例。

1. 系統指令

Hotkeyz 本身有提供 "重開機"、"關機" 等系統指令，位於 New → Command → Click → Windows Commands → Shutdown Options → Reboot(重開機) 或 Shutdown(關機)。

雖然也有提供 Standby / Sleep (睡眠) 的選項，但 Win8 系統設立了權限，因此 Hotkeyz 無法執行這個指令。不過藉由本文介紹的重新定義鍵盤功能，可以輕鬆執行這個任務。

2. 睡眠模式組合鍵

在 Win8 我們可藉由連續按下以下組合鍵，來達到 "睡眠模式"：Win + D→ Alt + F4→ 向上鍵→ Enter

可以自行測試一下是不是如此，沒問題的話，我們就可以將以上組合鍵寫進 Hotkeyz，按照「二、設定簡單的連續組合鍵」→「1. 操作範例」的步驟，一直到 Parameter 頁面為止，然後輸入以下字串：

[WinD][d][WinU][Pause][AltD][F4][AltU][Pause][Up][ENTER]
儲存後就可使用自訂的快速鍵來讓 Win8 進入睡眠模式。而製作其他的連續組合鍵，只要依本文要領進行即可。

五、更多操作範例

日後有其他 Hotkeyz 設定連續組合鍵的實用範例時，會持續補充在此：

部落格文章放在雲端不安全嗎？其實以 Blogger 來說，由於是 Google 的產品，可靠度相對而言較佳，印象中只有幾年前系統不穩，某個時段的發文曾暫時消失。

撇除雲端系統自己出的狀況，其實有時候是我們自己手殘，不小心將文章給刪除，當 Blogger 的文章一經刪除，要想救回來還得憑運氣；而更多時候是我們在重新編修文章時，操作錯誤將某段內容誤刪或覆蓋而不自覺，就按下了「更新」按鈕。總之，需要備份的原因，比較大的成分是避免人為失誤。

本篇將介紹一些常見的備份方法，並提供個人認為的最佳方式──利用 IFTTT 同步備份。

一、各種備份管道

1. 免費線上備份服務

部落格備份的線上服務不少，WFU 推薦這個 BlogBackupr，能備份文章及圖片(有限制)。

官方網站：https://blogbackupr.com
簡介：「Blogger 周邊產物 (筆記)」→「部落格文章備份-Blogbackupr」

2. RSS 閱讀器

使用 RSS 閱讀器訂閱自己網站，就等於免費幫自己部落格的文章備份。可參考「無痛轉換 Google Reader 的四種替代方案比較」，其中 Feedly 是目前市佔率最高的選擇。

不過自從 Google Reader 關閉之後，這些 RSS 閱讀器的備份能力都遠不及 Google Reader，在 2013 年以前的文章均無法備份到。

3. 使用 Email 當媒介

使用官方工具「透過電子郵件追蹤」，用 email 訂閱自己網站後，可以有跟 RSS 閱讀器一樣的備份效果。

而且透過 Email 自動轉寄的功能，可以將那些訂閱網站文章的郵件，自動轉到 evernote、或 Facebook、或其他任何能夠用 email 轉寄的雲端服務，而達到「利用其他雲端工具備份」的目的。(不過隔天才能收到)

而轉寄到 evernote、FB 的原理與操作細節，由於與本文無關，可參考這兩篇文章：

二、最佳備份管道──就是 Blogger

這是本文要介紹的方式，將自己的部落格文章，完整備份到另一個 Blogger。(即使你網誌的平台不是 Blogger 也可以這麼做)

1. 其他備份管道的缺點

免費線上備份服務：免費服務何時會收攤沒人知道，至少不會比 Google 久。
RSS 閱讀器：2013 年之前的文章無法備份；沒有 HTML 模式的內容。
使用 Email 當媒介：同上

2. 備份到另一個 Blogger 的優點

解釋一下何謂「沒有 HTML 模式的內容」，假設我們誤刪了一篇文章，那麼我們可以從 RSS 閱讀器的備份文章，將文字複製過來。但除了文字以外的內容我們將無法處理，得全部重來，例如：

文字的顏色、字體、大小
圖片、超連結的語法
HTML 標籤內容、其他語法如 javascript(假使有的話)

因此，如果我們能將文章備份到另一個 Blogger，就能進入 HTML 編輯模式，直接將原本的所有 HTML 碼複製回來，不用傷任何腦筋。

3. 備份到另一個 Blogger 的原理

那麼，要怎麼實現自動備份到另一個 Blogger 呢？

◎ 備份舊文章：將原 Blogger 的所有文章匯出，然後匯入新的 Blogger 即可。

◎ 備份新文章：新的文章就交給 IFTTT 這個網路服務，將原 Blogger 的 RSS FEED 同步到新的 Blogger。如此，原網站的所有文章全部會出現在新的 Blogger 了。

三、建立備份用的新網誌

1. 建立新 Blogger

先在原 Blogger 的後台 → 設定 → 其他 → 網誌工具 → 匯出網誌

在這個網址按「新增網誌」，建立一個新的 Blogger：

https://draft.blogger.com/home

接著在新 Blogger 後台 → 設定 → 其他 → 網誌工具 → 匯入網誌 → 不要勾選「自動發佈所有匯入的文章和頁面」

2014.2.17 增補

在文章匯入新網誌之前，請務必先閱讀這篇「解決 Blogger 匯入文章時 "繼續閱讀" 出錯的問題」。

新建的網誌 WFU BLOG──BACKUP 已經匯入所有舊文章。由於一天發布文章超過 50 篇就會被驗證碼騷擾，因此舊文章可暫不發布以避免麻煩。

2. 新舊網誌的設定

◎ 原網誌

有兩項重要的設定：

後台 → 設定 → 其他 → 網站資訊提供 → 允許網誌資訊提供 → 建議設定為「完整」，如此才能 RSS 全文備份到新網誌。

如果有其他考量，不希望設為「完整」，而希望訂閱 RSS 的讀者能直接到網站觀看全文，那麼也是有折衷辦法，請見後述。

後台 → 設定 → 其他 → 網站資訊提供 → 張貼資訊提供重新導向網址 → 請不要設定，否則 IFTTT 可能無法正常同步。

◎ 新網誌

由於新網誌只供備份之用，不需要被搜尋引擎索引，避免重複內容，請到後台 → 設定 → 基本 → 隱私權 → 編輯 → 讓搜尋引擎來尋找您的網誌？ → 否

四、IFTTT 操作

新、舊兩個網誌都處理好後，接著可以用 IFTTT 這個線上服務來進行以後新文章的自動同步。關於 IFTTT 的介紹請直接參考「這篇文章」→「二、操作 IFTTT 使用 EMAIL 訂閱 RSS」→「1. IFTTT 介紹」

請先到「IFTTT官網」註冊好帳號，接著我已經做好一個範本，可省下一些流程，請按以下這個大圖示按鈕──

畫面會另開一個視窗，如下圖──

A. 這裡請填入原網誌的 RSS 網址，一般來說只需要將紅線 "wayne-fu" 改成自己的網址名稱即可。

而前面「允許網誌資訊提供」若未設為「完整」的話，那麼這裡必須另外處理，請參考「這篇文章」→「三、Android 裝置擷取 RSS 資料、不含圖片的方法」→「2. RSS 只有摘要的解決方式」→ 利用 "強制 RSS 全文輸出" 的線上網站，來製作全文 RSS，然後這裡填入你得到的全文輸出 RSS 網址。

B. 設定標籤名稱(不改也沒什麼影響)

C. 按下「Activate」按鈕 → 選擇 G+ 帳號 → 按下「允許存取」→ 選擇剛剛新建、要當成備份的網誌名稱，就像我新建的「WFU BLOG──BACKUP」→ 按下「Update」→ 按下「Done」

最後回到母畫面，按下「Use Recipe」即可，以後部落格的文章就能全自動、完整地備份到另一個 Blogger 了。

五、小結

這整個流程需要結合不少雲端應用，及瞭解一些基礎概念。雖然沒那麼輕鬆，不過熟悉 IFTTT 這類的服務後，許多流程可以幫我們自動化完成，對於增進工作效率會有很大的幫助。

另外如果再搭配 RSS 訂閱、或轉 Evernote 等方式備份回自己硬碟，連雲端出狀況的情況都可避免，就可謂萬無一失了。

上一篇「部落格文章如何全自動備份」的操作需用到
"匯出文章" 及 "匯入文章" 的步驟，而 +Pan Kuan 於留言 #1 詢問：「我部分文章的html裡有發現這一行 <a href = "http://www.blogger.com/blogger.g?blogID=123456789" name = "more"></a> 不知道這是什麼東西？放著或刪除會有什麼影響嗎？」

這才回想起以前匯出匯入時，會遇上「繼續閱讀」功能出錯的狀況。以下先描述異狀的狀況，再提供解決的操作方式。

一、異常狀況

1. 如果 Blogger 文章插入了「繼續閱讀」功能，那麼在文章編輯頁面切換到「HTML模式」時，會看到其實「繼續閱讀」功能就是在文章中插入一行程式碼：


而當我們將 Blogger 文章做過匯出、再匯入的動作後，會發現原本應該顯示上面那行程式碼的位置，內容變成了以下 HTML 碼：

<a name='more'></a>
如此一來，便導致「繼續閱讀」的功能失效。

2. 過去曾在「部落格文章＋特殊文字區塊（一）」→「四、Blogger 系統問題」提過，Blogger 在撰寫模式下經常自作聰明幫我們 "自動轉換、增補程式碼"。由於 "<a name='more'></a>" 這樣的 HTML 碼，會被 Blogger 判定不合法，因此曾切換過一輪 "HTML模式" 與 "撰寫模式" 後，程式碼會添加為以下：

<a href='' name='more'></a>

再切換過第二輪，程式碼又會變成類似以下：

<a href="http://www.blogger.com/blogger.g?blogID=123456789" name="more"></a>

那麼這就是文章開頭 +Pan Kuan 所遇到的狀況啦！

二、批次修改「繼續閱讀」語法

瞭解以上狀況後，當匯出文章時，便不能馬上匯入文章，必須先將匯出的 XML 檔編輯一下，批次調整、置換「繼續閱讀」的語法後再匯入，否則將來手動將文章一篇篇加入「繼續閱讀」的功能時，這個流程保證會滑鼠點到手抽筋的。

我們要做的補救動作，便是將錯誤的字串 "<a name='more'></a>" 置換為正確的「繼續閱讀」字串 ""。

1. 使用記事本編輯

如果文章數不多時，例如小於三十篇，那麼也許用記事本之類的小軟體編輯即可。開啟匯出的 XML 檔後，內容大致如以下：

由於所有的 "<"、">" 符號，編碼會被轉換為 "<"、">"，因此當我們按下 Ctrl + H執行取代字串功能，要尋找的目標字串為：

<a name='more'></a>

要置換的字串為：



最後按下「全部取代」→ 另存新檔即可(副檔名需為 .XML，編碼需選擇 UTF-8)。

2. 使用 Word 編輯

如果文章數很多，例如我匯出了將近三百篇時，使用記事本開啟可能會當掉，此時可改用 Word 來編輯。開啟匯出的 XML 檔後，內容大致如以下：

由於 "<"、">" 符號在 Word 下會自動還原，因此當我們按下 Ctrl + H執行取代字串功能，要尋找的目標字串為：

<a name='more'></a>

要置換的字串為：

<--more-->

最後按下「全部取代」→ 另存新檔即可(副檔名需為 .XML)。

處理完以上流程再匯入文章時，「繼續閱讀」功能就可正常了！

(Pic from: iconpng.com)Evernote 在行動裝置(Android、iOS)端的同步能即時處理，只要是連上網路的狀態，剛寫好的記事便能自動上傳到雲端。不過在 PC 上就沒這麼方便了，無法隨時同步常常會發生一些慘劇，例如：

明明寫過一些備忘，但怎麼在行動裝置就是找不到？懷疑 Evernote 某些記事並沒有真的同步。(→ 其實是 PC 端尚未同步)
出了門才想到，前一晚準備的資料都存進了 Evernote，可是關機前忘了同步，但都已經上了交通工具而無法回頭...(→ 後果會多嚴重端視這些資料的重要性)

當 PC 端未同步而造成的困擾超過忍耐的臨界值後，決定一勞永逸解決這件事，以下先對 Evernote 的同步機制進行分析，想直接看解決方案請跳「二、可行的解決方案」

一、Evernote 的同步機制

PC 端的 Evernote 算是有三種方式可同步──

1. 自動同步

如上圖編號 1 的同步選項，PC 版最短的自動同步週期為 15 分鐘，這機制的風險在於，關機前 15 分鐘內所新增的所有資訊，在下次開機之前都無法調用。

2. 關閉前同步

如上圖編號 2 的同步選項，勾選後就可在關閉 Evernote 前同步(例如按 Ctrl + Q)。但問題是，誰會沒事將 Evernote 手動關閉呢？就是要開著 Evernote 來自動同步啊！

3. 按 F9 同步

同樣雞肋的同步功能，這個位置的按鍵不好按，而且除非有隨時按 F9 的習慣才有意義。這很像十多年前怕文件還沒存檔就當機的 Win95/98 系統，沒隨時按 Ctrl + S就會有恐懼感的年代。

Evernote 用到有 F9 強迫症不太好吧！

二、可行的解決方案

大致想到兩種思路來解決同步的問題──

1. 利用別的按鍵取代 F9 同步

如果能在操作流程中，找出一些必要按鍵，當按下這些按鍵時，同時執行 F9 的功能，那就能模擬 "隨時同步" 了。以 WFU 的個人習慣而言，會有兩個時機：

◎ 關閉新記事時

關閉新記事的快速鍵為 Alt + F4或 ESC，當然選擇 ESC比較方便。

◎ 縮小 Evernote 視窗時

WFU 習慣使用自定義按鍵來縮小視窗(例如 Alt + W)，當 Evernote 的處理告一段落後，通常就會按 Alt + W來結束這個階段的事務。

當然你也可找出自己處理流程的必要按鍵，以 WFU 為例，以上兩組按鍵可搭配「自定義按鍵」的軟體來操作，重新定義 ESC及 Alt + W這兩組按鍵，使這兩組按鍵加上 F9按鍵的模擬，就能幾近 "隨時同步" 了。

2. 關機前同步

如果能設計出一套機制，在關機時順便執行 Evernote 的同步功能，達到自動化流程，那麼會比第 1 個方案更安全一些。由於方案 1 的實現比較簡單，以下先對方案 1 進行說明，方案 2 另外再說明。

三、使用 Hotkeyz 更改按鍵功能

免費的「自定義按鍵」軟體很多，有了「二、可行的解決方案」概念後，相信可以使用自己習慣的軟體來實現這個構想(例如 AutoHotkey)。以下將以 WFU 習慣使用、操作較為簡單的 Hotkeyz 來說明，這個軟體的介紹與操作可參考這篇「使用 Hotkeyz 設定連續組合鍵」。

1. 修改 ESC 鍵

執行 Hotkeyz，按下左上角的 New 後，會產生設定框。

如上圖，Description 隨意填入自訂敘述，接著：

A. 按下 Click → Hotkeyz Commands → Remap Keyboard
B. 這裡會自動產生 Parameter 的分頁，如何填寫請見後述。
C. 在這個位置按下 ESC鍵，便會自動產生 "Escape" 字串。

接續步驟 B，切換到 Parameter 分頁後，填入下面的字串：

[F9][Escape]
按 OK 即可，以後按下 ESC 鍵等於自動連續按下 F9 及 ESC 鍵，Evernote 會先執行同步功能，然後關閉新記事的視窗。

2. 設定 ALT + W 鍵

以下將設定按下 ALT + W鍵後，自動執行同步功能、並縮小視窗。一樣按下左上角的 New 來產生設定框。

如上圖，Description 隨意填入自訂敘述，接著：

A. 按下 Click → Hotkeyz Commands → Multiple Commands
B. 這裡會自動產生 Multi 的分頁，如何填寫請見後述。
C. 在這個位置按下 ALT + W即可，也可設定為其他習慣的快速鍵。

按下 Multi 的分頁 → 按下 Open Multi Command Editor 按鈕，可產生上圖畫面：

A. 按下右上角的圖示
B. 按下 Click → Hotkeyz Commands → Remap Keyboard
C. 前往 Parameter 分頁

如上圖，輸入字串 [F9]→ 按 OK 即可。

可看到第一欄已經自動產生，代表會自動執行 F9按鍵來同步，接著依以下順序：

A. 按下右上角的圖示
B. 按下 Click → Windows commands → Desktop Window → Minimize

最後按下圖中央的 OK → 下方的 OK → 母畫面的 OK → 完成整個流程。

以後完成 Evernote 階段作業後，按下 ALT + W 鍵，會自動執行同步功能、並縮小視窗。

四、小結

設定了本文的快速鍵，以後在大部分情況下都不必掛心 PC 端的 Evernote 是否已同步。如果沒有使用過這類「自定義按鍵」軟體的話，或許要花一番手腳來熟悉，不過只要照以上流程走一遍，將來就能一勞永逸。

而依據每個人的習慣，不一定同時需要 ESC及 ALT + W兩組快速鍵都設定，也許只要其中一種就能滿足需求。無論如何學習「自定義按鍵」軟體，對精簡作業流程是很有助益的。

(Pic from: design.oneter.com, refurbishnotebook.blogspot.com)在這篇「Blogger 如何安裝兩個導覽列？」留言 #7 詢問「有沒有辦法將google的搜尋框直接放到浮動的導覽列上?」。當時我回答「按照 "密技！在 Blogger 水平功能選單使用語法產生動態效果" 的方法，導覽列可以放圖片也可以放語法進去。」不過後來自己測試了一下，發現每個範本的頁籤可能都不一樣，因此如果用這個方法將搜尋框放在導覽列，會出現何種效果不是那麼容易預期及調整。

因此另外寫了個簡單的安裝懶人包，使用的是「Google 自訂搜尋」。以下先大致介紹「在導覽列安裝搜尋框」的優點，及「Google 自訂搜尋」新增加的 "語音搜尋" 功能，想直接安裝程式碼請跳至「三、安裝懶人包」。

一、導覽列安裝搜尋框的優點

1. 單導覽列

最顯而易見的優點，當然就是節省側邊欄的空間了。雖然搜尋框不大，但總是佔用一個小工具的欄位及高度，若部落格有廣告的話，多少壓縮了廣告的能見度。

但也不是非得在導覽列放搜尋框不可，畢竟導覽列上面的導航項目，是更能留住客人的。如果導覽列項目不多、且最右邊有足夠空間擺放搜尋框時，再來考慮這件事即可。不然的話，可以考慮下一點「雙導覽列」的作法。

2. 雙導覽列

若是部落格設計了雙導覽列，那麼第二個導覽列通常就有空間來擺放搜尋框了，效果就像分站「三國志11」最上方的導覽列一樣。

要在 Blogger 安裝第二個導覽列，作法請參考這篇「Blogger 如何安裝兩個導覽列？」。

3. 浮動導覽列

如果導覽列放上搜尋框，並參考這篇「讓部落格導覽列選單能浮動置頂」，那麼搜尋框就能隨著導覽列浮動，效果一樣請參考上一點的分站連結「三國志11」。

這麼設計的好處是，提供訪客隨時能搜尋的功能，不必再另外尋找、或捲動頁面，也算是能夠增加訪客對網站的黏著度，適合文章數比較多的網站採用(文章少訪客搜不到東西就沒啥作用了)。

二、Google 自訂搜尋＋語音功能

1. 為何使用 Google 自訂搜尋

Blogger 有三種方式來安裝搜尋框，不過最建議的是使用「Google 自訂搜尋」，原因請參考「取代 Blogger 搜尋小工具__新版 Google 自訂搜尋」。

2. 語音搜尋功能

最近「Google 自訂搜尋」新增了語音功能，在搜尋框裡面會出現麥克風的圖案，就像本站右上方的搜尋框、或參考下圖：

要啟動這個功能，請先依照上一點的教學連結，設定畫面如下：

A. 選擇設定的網站 → B. 設定 → C. 基本資訊 → D. 語音輸入 → 選擇 "開啟" 即可。

這裡設定完畢後，出現在網頁上的搜尋框，便會自動出現 "麥克風" 的圖示。

三、安裝懶人包

1. 找出搜尋引擎 id

依照「取代 Blogger 搜尋小工具__新版 Google 自訂搜尋」的步驟將網站設定好後，如下圖的畫面──

按下「搜尋引擎 ID」→ 如畫面中紅線部分，記下自己的 id 號碼。

2. 找出導覽列的 id

如果使用官方「網頁」小工具當作導覽列的話，可跳過此步驟。

如果用別的小工具當導覽列的話，例如本站的分站三國志11「使用標籤當導覽列」，那麼得在範本中搜尋這個小工具的標題，例如搜尋 "標籤" 這個字串──

如上圖，找到之後，同一行可看到 id 字串為 "Label1"，請記下這個字串。

3. 安裝程式碼

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

請對照以上程式碼行號修改──

G：如果使用「網頁」小工具當導覽列的話，不用變動此參數；如果不是的話，請填入「2. 找出導覽列的 id」的字串，並字串前加上井字符號 "#"。

H：最重要的參數，請置換「1. 找出搜尋引擎 id」自己的 id 字串。

I：可調整搜尋框的寬度。

J：需要微調垂直位置的話，可調整此行參數。

修改完後即可除存，想看效果請參考分站「三國志11」最上方的導覽列，搜尋框會浮動在最右側。導覽列想要有浮動效果的話，請參考「一、導覽列安裝搜尋框的優點」→「3. 浮動導覽列」。