WFU BLOG

每個部落格都有其特定的主題，訪客在留言板的訊息，也多半是圍繞這些主題；除了廣告留言之外，很少會有 "超展開" 的提問。

而隨著部落格的成長，多少會有讀者開始關注部落格主題之外的事務，例如對格主產生好奇──他是怎麼樣的一個人呢？他的興趣會是什麼？

這就是本文要介紹的服務──「Ask.fm」，一個滿足讀者好奇心的留言框，能夠以公開或匿名的方式，隨心所欲地提出各種天馬行空的問題。

一、Ask.fm 介紹

上圖是留言框效果，其實 Ask.fm 已有部落客專文介紹，那麼就不多做重複的事，請直接參考「Ask.fm 你想問我什麼呢？線上免費建立個人問與答頁面，開放朋友提問」，這篇文章說明了註冊、設定的方式，按著執行即可。

二、安裝在部落格

按照「一、Ask.fm 介紹」註冊完畢後，接著請看下圖──

依照 A～D 的順序，依序按下「設置」→「小工具」→ 選擇「尺寸」及「顏色」→ 想自訂 CSS 可按下「編輯」CSS → 最後複製「代碼」裡面的內容。

如果非 Blogger 平台，請將程式碼貼在範本中想顯示的位置。

如果是 Blogger，可以將程式碼貼在「HTML/Javascript」小工具裡面，或是參考「Blogger範本__文章及留言區塊」系列文，將程式碼貼在想顯示的版面位置即可。

三、操作及範例

回覆粉絲問題時，除了使用文字，還能插入圖片──

如上圖，按下「照相機」圖示便能插入圖片。

想看看大家都問些什麼問題嗎？以下是幾個留言板範例：

如果想測試這個留言板，可在下面提問：

歷史問答記錄請按下面連結：

http://ask.fm/WayneFu

四、感想及小結

這個留言板的優點是：

可以選擇想回答的問題來回覆
沒有回答的問題不會顯示
因此不至於會被留言騷擾

雖然介紹了個留言板小工具，不過不代表 WFU 準備經營粉絲團喔！因為除了管理「社群」、經營「G+ 專頁」、還要寫 Blogger 文章，真的沒有多餘時間了，所以本站是不會在側邊欄擺 ask.fm 留言框的！

當然，以上純屬藉口，放了留言框卻沒粉絲留言才是尷尬的開始。不過，想要經營粉絲團的站長們，倒是可以開始試試看囉，這是個拉近與粉絲距離的不錯管道～

(Pic from: bpm-ingenuity.com)從別的部落格平台搬到 Blogger 的站長，應該有不少會懷念「文章上鎖」的功能，這在其他平台是常見的設計，但不知為何 Blogger 就是不開放？也許是 Google 以搜尋引擎起家，不希望大家都把文章上鎖，那麼機器人就沒文章可爬了吧！

本文要提供的語法及技巧，可讓需要私密文章功能的站長，達到隱藏文章的目的，讓所有訪客都看不到特定文章的內容，只有以站長身份才看得到。

這篇文章的概念與「讓 Blogger 有快速載入的展示(DEMO)頁面」相同，都是從文章網址下手，只要自訂文章網址就能產生私密文章，以下說明如何安裝此功能。

一、安裝程式碼

請見以下的程式碼──

1. 首先到後台 → 範本 → 編輯 HTML → 找到字串 <body ....>這一行，在其後面一行，插入 A～M行。

2. 接著搜尋類似以下的字串──

<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>

小心不要找錯了，上面的第二行有 "date-outer" 字串。
找到這三行後，在其下面一行，插入 O～U行。

3. 不急著存檔，先改幾個參數，請對照程式碼的行號──

H：紅字 "prv-" 字串可改為自訂字串，這代表文章網址以 "prv-" 字串開頭的文章，會自動成為「私密文章」。

G：如果部落格有自己設計「404 錯誤頁面」的話，請將網站的「404 頁面網址」填入此行的雙引號內；如果沒有的話，請保持原狀即可。

B：如果範本中已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串)，那麼可刪除此行。

以上完成後，即可存檔，接下來請看使用方式。

二、簡便的使用方式

過去曾有部落客曾寫出「文章加密」的方式來讓 Blogger 文章上鎖，其缺點是使用方法稍嫌繁複，每篇文章得重複「複製」、「貼上」的過程，還得記住密碼(密碼忘了可就沒人打得開文章)。

本文提供的使用方式很簡單，如同「讓 Blogger 有快速載入的展示(DEMO)頁面」的原理一樣──

借用該篇文章的圖，只要在文章編輯的頁面，於「文章設定」→「連結」→「自訂永久連結」→ 輸入自訂字串開頭的網址。

以本文為例，如果在「一、安裝程式碼」設定的字串為 "prv-"，上圖的文章網址字串 "DEMO-toc-date" 改成 "prv-toc-date"，那麼這篇文章就能成為 "私密文章"，只有站長能看到該篇文章。

三、其他必要動作

1. 建議移除「網誌存檔」小工具

本文的程式碼，無法處理「網誌存檔」這個小工具的文章，這代表網站上有裝「網誌存檔」時，訪客有機會看到私密文章，因此建議移除「網誌存檔」這個小工具。

如果需要依日期排列的文章列表功能，可改安裝「動態檢視 Blogger 文章列表」→「四、個別安裝」，來安裝依日期排列的文章列表。

2. 文章日期不要設太近

本文的程式碼，當偵測到非站長身份，且在 "首頁" 或 "標籤索引" 頁面時，會將私密文章刪除，讓其不顯示。

不過當部落格安裝了「最新文章」這樣的小工具時，在首頁會產生弔詭的情形──某篇私密文章會出現在「最新文章」小工具的列表，但在首頁又看不到這篇文章。

因此為了不讓訪客覺得奇怪，私密文章的日期建議設定地古早一點，讓其不要出現在近期的「最新文章」。

3. 設定「繼續閱讀」及「網站資訊提供」

如果部落格沒開放 RSS 訂閱的話，那麼可以略過此部分的內容；不過如果開放 RSS 訂閱的話，那麼私密文章就有可能被看到。因此必須設定以下兩件事才能避免：

A. 繼續閱讀：

如上圖，私密文章的內容，請放在「繼續閱讀」標示的後面。

B. 網站資訊提供

如上圖，請到後台 → 設定 → 其他 → 允許網誌資訊提供 → 改為「直到繼續閱讀標示為止」

四、測試效果與小結

以上動作都完成後，可以設定幾篇測試用的私密文章，然後登入站長身份(登入Google帳號)、或用訪客身份(登出Google帳號)分別測試效果。

以訪客身份唯一能進入私密文章的管道，是從「最新文章」小工具，不過當訪客點擊私密文章後，系統馬上會將網址導向「404錯誤頁面」，讓訪客誤以為此篇文章已刪除，因此私密文章的內容是不會被看到的。

跟「讓 Blogger 有快速載入的展示(DEMO)頁面」一樣，一開始的設定動作比較麻煩一些，不過以後只要設定文章網址後，就能在 Blogger 自動產生私密文章，這算是比較簡單、有效率的方案了。

2013.6.14 補充

五、快速列出網站私密文章的方法

1. 建議先在 Blogger 安裝「Google 自訂搜尋」，搜尋速度很快。

2. 假設私密文章設定的字串為 "prv-"，那麼利用這個「Google 自訂搜尋」小工具來搜尋字串 "prv-"，就能列出所有的私密文章。不過前提是，這幾篇私密文章要能先被 Google 搜尋引擎收錄。

3. 例如在 +Ken Lo的網站「K.one Dreamhouse」進行搜尋，就可看到以下兩篇私密文章──

4. 感謝 ken 提供測試效果，當然以上兩篇只是用來測試的私密文章。不過為了避免被有心人士知道有私密文章，真的要在 Blogger 藏私密文章的話，最好將預設字串 "prv-" 改成只有自己知道的字串，會比較安全。

(Pic from: web-hosting-critic.net)當部落格開始出現留言機器人、或被盜文後，心裡會很不悅、甚至感到憤怒，不過以正面思考的角度，這也代表部落格的質量提升為新的等級，一方面有值得欣慰之處，一方面也是需要學習 "新技能" 來打擊侵權的時候了。

幾個月前發現本站的文章被抄襲，如前所述，要如何處理類似案件，需要學著制訂新的 SOP 流程。遇到這樣的事，我想第一要務便是「保存侵權證據」；因此，本文要介紹的服務，為保留盜文、盜圖證物的絕佳工具──「http://archive.is/」

一、使用操作

1. 保存網頁

進入 http://archive.is/首頁後，操作方法很簡單，如下圖，按 A～C 的順序──

A：輸入要保存證據的侵權網址，例如圖中的「http://wayne-fu.blogspot.com/」

B：按下「submit url」即可

C：如果需要常常備份網頁的話，也可把紅框 C 的部分拖曳到書籤列，以後只要按這個書籤，就能立即備份網頁內容。

按完備份網頁的按鈕後，大致需要等個幾秒鐘(時間長短視網頁內容多寡而定)，讓 archive.is 儲存整個網頁內容。最後如上圖，紅框的部分會產生一個縮網址(例如圖中的 archive.is/NhcoA)。

記下這個縮網址，日後便可隨時引用儲存的證據。

2. 查詢保存的網頁

如果忘了儲存過哪些網頁，系統也提供了搜尋功能──

如上圖，在 http://archive.is/首頁的下半部──

A：輸入網域，再按下右邊的「search」，即可顯示這個網域曾經儲存過哪些網頁。

B：這部分的紅框說明了其他的搜尋方法，例如使用星號 "*"，就能搜尋更大範圍的儲存資料。

二、archive.is 的優點

1. 雲端

網頁證據資料儲存在雲端，各種裝置、各處的網頁都能隨時存取、引用連結。

2. 不可修改

過去保存網頁證據，需使用截圖、或另存網頁等方式，而圖檔(jpg)、網頁檔(html)都是可修改的，公信力不如 PDF 這類的檔案來得可靠。

而 archive.is 幫我們把證據存放在第三方的空間，可確保證據的完整性、安全性，這讓盜文者沒有任何的反駁空間。

三、archive.is 的疑慮

由於這個服務不夠出名，難免會對其生命週期或公信力有疑慮，不曉得網頁證據能存放多久、能存放哪些網頁內容。

1. FAQ

因此 archive.is 提供了官方的「FAQ 網頁」，以下節錄部分重要的問答：

Q.哪些網頁內容無法儲存？
A. Flash、影音、PDF、RSS、XML

Q.網頁證據能保存多久？
A.永久保存，我們有很多空間，且網頁空間越來越便宜。

Q.這個免費服務有人資助你們嗎？
A.這是私人贊助的，我們沒有財務上的問題。不過萬一我駕鶴歸西了，這個服務可能會停止。

2. 其他提問

有興趣向 archive.is 提出其他疑慮的話，官網提供兩個管道：

四、案例與應用

以下列舉一些個案，以及個人認為不錯的應用。

1. 備份抄襲個案

這個案例發生在本站──

這是我的原文：「Google Code 簡易使用教學」
這是抄襲我的網頁：「http://archive.is/IquTw」

如果想連結到原始抄襲網頁的話，會發現該網站的該篇文章已經消失，原因是該網頁已經被我 "處理" 掉了。

2. 反擊抄襲個案

這個案例發生在幾個月前，由於牽涉到知名網站，且看來雙方已經和解，所以對此事件就不多著墨了，有興趣請自行從這兩個備份的 archive.is 連結去還原事情經過，請讀者當成案例教科書作為警戒，麻煩不要公開討論了：

3. 防止修改論壇發文

如果身為論壇、BBS、或社群的管理員，有時會遇到一種狀況，發文者先發表有爭議、違規的文章，等到被管理員發現時再重新編輯、修改內容，造成管理員來不及採集事證。

因此管理員發現此類狀況時，必須先不動聲色，第一個動作可利用 archive.is 備份原內容，如此將來進行處分時才保有證據。

4. 防止修改社群留言

在各種平台上的發文，有時我們會遇到意見相左者的謾罵、甚至人身攻擊，而事後他們達到出氣的目的後(已經很多人看過該留言)，又可編輯留言內容、刪去不當的部分，造成我們無法提出檢舉，將其停權。

遇到這樣的情形，一樣可利用 archive.is，在第一時間採集人身攻擊的證據，向該平台提出檢舉將其停權。

五、小結

介紹完這個保存盜文、盜圖證據的工具，發現其用途似乎更為廣泛，應該還有沒想到的應用。

而本文提到我 "處理" 了一個抄襲的網頁，不過並不是用 archive.is 來制裁他，在這個事件 archive.is 扮演的角色只是 "備份" 而已。所以整個制裁的過程，會再另外發文詳述了。

如何宣傳部落格一定讓每位站長絞進了腦汁，有時在論壇、或別人家露骨地宣傳，操作方法不當是有可能引起反感及產生反效果的，這篇「七個方法教你在別人的部落格留言，提昇自己的能見度」提供了一些留言的技巧以供參考。

而另一篇文章「文章發佈後的檢查清單－提昇部落格曝光度的五個方法」提到在 Yahoo 知識回答問題，則與本文提出的概念有關──在論壇或 Yahoo 知識幫忙回答問題、分享經驗，再順便留個簽名檔，是個能長期宣傳部落格、又不至於引起反感的管道。

而如何讓「回答問題、分享經驗」這件事更有效率，則需要利用本文介紹的工具──「Yahoo Pipe」。

一、尋找問題、分享經驗不方便之處

如果是主題式的部落格，那麼宣傳部落格時，適合在論壇或 Yahoo 知識尋找與主題相關的問題來回答、分享經驗，以達到宣傳目的。

只不過，四處逛論壇、在 BBS 爬文及搜尋相關主題，來回答或是留言，是一件吃力又沒效率的事，需要長期投入大量時間。

如果能有一個工具，會自動篩選論壇中 "特定主題" 的文章，就像個人小秘書一般，主動通知我們有 case 上門，那就再方便不過了。而 Yahoo Pipe，正是我們夢想中的那位小秘書。

二、使用 Yahoo Pipe 的原理

某些論壇、BBS 看板提供了 RSS 訂閱的功能，但訂閱 RSS 並不具備篩選的功能，我們會接收到該討論區的全部文章。

使用了 Yahoo Pipe 之後，可同時訂閱多個看板、並利用其篩選功能，設定自訂的關鍵字，只接收含 "特定字串" 的文章。

如此我們就再也不需花時間逛這些看板，等著我們的 RSS 閱讀器(例如「Google Reader」)主動送上相關文章即可。

三、Yahoo Pipe 使用方法

為了節省篇幅，Yahoo Pipe 的介紹請參考「電影播放時間自動通知 RSS 訂閱__Yahoo Pipe 應用」→「一、製作原理」→「1. Yahoo Pipe 介紹」；而如何建立模型也先不解釋了，本站已經簡單建立一些樣版，只需要自行修改 RSS 網址、篩選的字串，便能開始使用。請按以下步驟進行──

1. Yahoo 知識

首先登入自己的 Yahoo 帳號，進入下面這個 Yahoo Pipe 樣版網址：

http://pipes.yahoo.com/pipes/pipe.edit?_id=a746fdc804c91c361f148305887ba96f

請按上圖 A～F 順序操作──

A.按下「Save a copy」，這個樣版就會複製到自己的 Yahoo Pipe 帳號。

B.紅框中的幾個網址，都是 Yahoo 知識各個分類的 RSS 訂閱網址。想要增加訂閱網址，就按加號「+」，來增加 RSS 網址；想要減少訂閱網址，就按減號「-」來刪除。

如果不知道 Yahoo 知識的 RSS 怎麼找，請參考「下一篇」→「四、找出論壇 RSS 的方法」。

C.這個紅框的功能為過濾字串，每一欄最右邊可發現 "blogger" 這個字串，這代表標題或內容出現 "blogger" 這個字串的文章才會訂閱。請將每個 "blogger" 字串改為自訂字串即可。

D.按下「Properties」可修改這個 Pipe 的標題名稱。

E.按下「Save」儲存

F.按下「Back to My Pipes」回到自己 Yahoo Pipe 帳號的列表。

回到列表畫面，如上圖紅框，按下 Pipe 的標題。

對著「Get as RSS」按右鍵複製連結網址，可取得 RSS 網址，接著就能用 RSS 閱讀器訂閱。

如果日後要編輯這個 Pipe，可按左上方的「Edit Source」。

2. Mobile01 論壇

「mobile01」是熱門的論壇，在這裡回答問題、參與討論也是很好的宣傳管道。請進入下面這個 mobile01 樣版網址：

http://pipes.yahoo.com/pipes/pipe.edit?_id=7550d7225862e377b0ab6a9c1b63bcbc

其實操作方法一模一樣，請參考「1. Yahoo 知識」就行了。

如果不知道 mobile01 的 RSS 怎麼找，請參考「下一篇」→「四、找出論壇 RSS 的方法」。

3. 註記

前面曾提過 Yahoo Pipe 可同時訂閱多個看板，那為何「Yahoo 知識」與「Mobile01」的訂閱要分開說明呢？

沒錯，其實所有的 RSS 訂閱網址可以集中在一起，而我個人將其分開是為了管理比較清楚，讀者如果想要節省操作步驟，是可以將所有 RSS 集中在一個 Pipe 裡面的。

而將 Yahoo Pipe 產生的 RSS 訂閱到閱讀器後，除非設定的篩選字串在現有的 RSS 內容中已經有相關文章，否則在閱讀器裡是不會馬上有文章的；一般而言得等到訂閱的看板中有人新發表了相關文章，然後再過一段時間才會送到 RSS 閱讀器。

由於篇幅的關係，下一篇將敘述找出各大論壇看板 RSS 的操作、應用案例、及對 Blogger 的好處。

「部落格宣傳的小技巧」系列標題：
一. 用 Yahoo Pipe 訂閱論壇、Yahoo 知識、PTT 特定文章
二. 找出 Yahoo 知識、Mobile01、PTT 的 RSS 網址

➢➢快速選單：１２

接續「上一篇」，本篇的內容為找出各大論壇看板 RSS 的操作、應用案例、及對 Blogger 的好處。

四、找出論壇 RSS 的方法

1. Yahoo 知識

進入 Yahoo 知識的分類頁面後：

http://tw.knowledge.yahoo.com/dir/dir?r=1187557922

選擇想訂閱的分類，例如進入「知識分類> 電腦網路> 網際網路> 部落格」的網址：

http://tw.knowledge.yahoo.com/dir/dir?dir=ask&sid=396542538&r=715235932

於圖中紅框的 RSS 按鈕，按右鍵複製連結網址，即可取得這個分類的 RSS 訂閱網址。

2. Mobile01

進入 mobile01 的討論區頁面後：

http://www.mobile01.com/forum.php

選擇想訂閱的討論區，例如進入「Mobile01 首頁 » 個人電腦 » 網站與網頁技術」的網址：

http://www.mobile01.com/topiclist.php?f=506

於圖中紅框的 RSS 按鈕，按右鍵複製連結網址，即可取得 RSS 訂閱網址。

3. PTT

進入 PTT 網頁版的討論區頁面後：

http://www.ptt.cc/bbs/index.html

選擇想訂閱的看板，例如進入「Blog 版」的網址：

http://www.ptt.cc/bbs/Blog/index.html

於圖中紅框的「ATOM FEED」按鈕，按右鍵複製連結網址，即可取得 RSS 訂閱網址。

五、應用

只要有提供 RSS 的論壇，都能用本文的方法來訂閱特定文章。

以宣傳「Blogger 中文社群」為例，由於主題是 Blogger，因此我利用 Yahoo Pipe 篩選了「Yahoo 知識」、「Mobile01」等相關看板中含 "Blogger" 字串的相關文章，只要這些地方一有新的 Blogger 相關問題或討論，當 RSS 閱讀器通知後，就可以前往回答、並找機會宣傳社群，就像這樣：

六、對 Blogger 的優點

在論壇、Yahoo知識回答了問題，短期流量不會增加多少，但搜尋引擎會不斷引導尋找答案的訪客，前往論壇及 Yahoo 知識的相關文章，因此長期而言，會有持續的流量。以主題式的部落格而言，這是可以嘗試的宣傳管道，也是累積部落格聲譽的一種方式。

另外對 Blogger 來說，如「Yahoo是故意的！來自Yahoo流量下降的可能原因」、「最近Blogger流量減少，和Yahoo的搜尋引擎有關？」這兩篇文章所提，Blogger 要獲得從 Yahoo 搜尋引擎而來的流量不容易，也許這是 Google 與 Yahoo 為敵對陣營的無奈結果。

而在 Yahoo 知識回答問題，相對之下就是 Blogger 難得能掌握到的 Yahoo 流量了，因為 Yahoo 知識在 Yahoo 搜尋引擎的排名是有高優先權的，所以 Blogger 站長們請好好把握吧！

「部落格宣傳的小技巧」系列標題：
一. 用 Yahoo Pipe 訂閱論壇、Yahoo 知識、PTT 特定文章
二. 找出 Yahoo 知識、Mobile01、PTT 的 RSS 網址

➢➢快速選單：１２

(Pic from: felipegodoy.wordpress.com)本文為公告網頁。

公告對象為極少數的讀者，如您支持著作權、有版權觀念，相信本文的內容不會影響到您的權益。

本文另一個作用為方便引用，如將來再發生類似情事時，可直接引用本文連結，免去重複解釋的麻煩。

一、為何公告

本站的小工具，有些會附加版權圖示。而如果看得懂程式碼，要移除版權圖示不是什麼難事。

看過某些部落格裝了本站的小工具，且自行移除了版權圖示。而 WFU 的態度是──只要是我自己發現的，且該部落格與本站沒有往來，那就會當作沒看到。

不過，若移除了版權圖示，還來本站留言(無論是尋求技術支援或其他目的)，讓我不得不知道這件事，那就無法假裝沒看到了。

發生第一次可以當作個案，第兩次可以忍耐一下，現在發生了第三次，只好發個公告來表明本站對這件事的態度了。

二、為何有版權圖示

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

而且，本站提供的工具均為免費使用，並沒有跟使用者收取費用。免費軟體程式設計者，無法得到實質的回饋，如果連版權聲明都無法擁有，程式豈不是在寫心酸的囉？

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

有人反應過，程式碼不是有註明「本程式可任意使用」？沒錯，以「Blogger 最新回應＋留言者頭像＋文章標題」為例，該篇文章附了程式的「原始碼」，基本上本站的所有工具，都符合該原始碼版權聲明的敘述：

「本程式可任意使用，但不包含商業行為；若修改轉載請註明出處。」

各位讀者，程式的確可任意修改，移除版權圖示也是 "任意使用" 的一種方式，「這是使用者的權利」。

不過這不代表我喜歡使用者這麼做。

本站的態度是，會移除版權圖示，就表示您的修改能力很行，那麼就請不要再來本站留言，無論是尋求技術支援或是其他目的，本站將不會提供任何服務，「這也是本站的權利」。

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

如果覺得版權圖示不美觀、影響版面，這是可以理解的，因為每個部落格的配色、配置都不同。不過如果拿這個當作自行移除版權圖示的理由，就不太能接受了。

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

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

五、移除版權圖示的管道

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

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

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

除此之外，如果擅自移除了本站小工具的版權圖示，麻煩儘可能地不要讓我知道貴站的存在、不要來本站留言，否則的話，一律直接打入黑名單。

能夠接受的方式只有事先知會，不接受事後被發現時，再來辯解的各種理由。

六、本站的技術支援

基本上使用本站的小工具，在相關文章留言，就能得到技術支援的服務。有大量的免費工具、hack 可用，又有免費的技術支援，這樣的服務不多吧？

想要得到這樣的服務很簡單，只要您「尊重著作權」、「重視版權觀念」，不要如本文所提，踩到本站的地雷就行了！

除了技術支援，您或許可以提出功能需求，但由於目前時間有限，只能列入參考了。如需個案處理您的功能需求，請移駕參考「贊助 WFU BLOG 的管道」→「五、功能需求建議」。

(Pic from: pocketables.com)感謝 +Ken Lo通知，之前的文章「Google Code 簡易使用教學」方法已經失效，原來官方已於 2013/5/22 宣布中止新使用者的上傳下載服務──「A Change to Google Code Download Service」，如此將來得尋找新的 js 存放空間才行。

官方建議的替代方案為「Google Drive」，以下先解釋一下事件的影響與始末，想直接操作 Google Drive 請跳「三、Google Drive 的操作」。

為了怕新讀者沒看過之前的文章，不清楚為何一定要幫 js 檔找外連空間，以下複製上一篇的部分內容──

部落格使用外掛或是外連 js 檔時，最讓人無法安心的就是外部伺服器不穩定、 js 檔失效(或失連)了。外部伺服器是我們無法控制的，而外連 js 檔若是能改放到自己的網頁空間，那就能放心不少。

很受歡迎的 blogger 文章分頁功能，滿多使用者是安裝「abu-farhan」這個網站的 hack；在「Blogger中文社群討論串」介紹了這個網站，經由 +L.C. Zhang的留言回報，原來最近作者提供的 js 外連失效，我也發現一些友站的分頁功能就此而消失了。

因此，以後部落格若是安裝了需要外連 js 的 hack 或外掛，最保險的方法就是先將原作者的 js 檔下載，存放到自己的 Google Code 空間，再將 js 連結置換為自己的，這樣就萬無一失了。

一、原本放在 Google Code 的 js 是否有影響？

根據「官方發佈消息」，歸納重點如下：

1. 新使用者無法上傳檔案

2. 原使用者仍可繼續使用上傳功能，惟期限至 2014/1/14 為止；從 2014/1/15 開始，全面中止新的上傳檔案。

3. 原本已經上傳的檔案，仍然可以外連，沒有期限限制。

所以說，從 2014/1/15 之後，現有的使用者就必須使用別的空間上傳 js 檔了。

二、為何 Google Code 中止新使用者的服務？

根據官方的說法，Google Code 提供了存放程式碼的空間，然而許多不當使用者拿來存放 "非程式碼" 的檔案，濫用的結果增加了 Google Code 的維護成本，只好中止這個服務。

而在調查這個事件的同時，的確發現有人這麼使用，例如這個網址：

https://code.google.com/p/sharemovie/downloads/list

裡面有種子、文件檔、執行檔...等一堆，就是沒有程式碼。因此官方這個說法非常合理，是可以接受的。

不過若先將官方說法放一邊，由於近期 Google 的「整合」政策，加上大力推動「Google Drive」，個人推測 google code 最終難免成為犧牲者，而目前遭到濫用的情形，則是成為中止服務的的推手。

三、Google Drive 的操作

以下雖以 js 檔為說明範例，不過實際上對於其他類型的檔案上傳、外連也是一體適用。

首先登入 Google 帳號，進入 Google Drive 首頁──

https://drive.google.com/

按「建立」→「資料夾」(如果要直接建立「文件」也行，但如果要管理全部 js 檔的話，使用本文的操作步驟比較方便)

輸入資料夾名稱，例如 "js"。

產生新的資料夾 "js" 後，按其右邊的三角形按鈕(如圖中紅圈) →「共用」→「共用」

按圖中紅框的「變更」，必須將權限設為公開，檔案才能外連。

如圖中所示，設定成跟紅框一樣即可，再按「儲存」。回到前一個畫面後，按「完成」即可。

接著可以開始上傳檔案，進入要上傳的資料夾(如圖，"js" 資料夾變成紅色)，再按紅圈的上傳按鈕。

選取電腦中的檔案上傳後，會出現圖中的訊息，按「上傳並共用」即可。Google Drive 上傳檔案的操作到此告一段落。

四、Google Drive 取得檔案外連的簡易方法及範例

1. 找出檔案連結

過去 Google Drive 的檔案要產生外連路徑不太方便，例如「如何直接下載 Google Drive 的分享檔案」提到的幾種方法。

可能是最近 Google Drive 有改版，檔案路徑的格式已經不太一樣，而且現在系統本身就已經提供外連路徑，不需再使用偏方了。

接續「三、Google Drive 的操作」，當檔案上傳完畢後，如上圖，對著該檔按右鍵 → 選擇「詳細資料」

將檔案資料的視窗捲到最下方，如上圖紅框的部分，就是外連網址。以上圖中的檔案為例，外連網址將是：https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/translate.js

2. 使用範例

「translate.js」這個檔是翻譯網頁內容的 js，會產生幾個國旗按鈕來翻譯網頁(如本站右上方按鈕)。使用很簡單，將上面產生的外連網址，放入以下語法：

<script src="https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/translate.js"></script>
接著在網頁想顯示的地方、或是開一篇文章(部落格要能支援 js)，加入以上語法即可測試這個檔案的外連效果。(想自訂更多參數，請參考「讓 Google 網頁翻譯工具以(國旗)超連結執行」)

五、小結

從以上操作來看，Google Drive 上傳檔案、外連都還滿容易的，空間又大(有 15G 的容量)。

不過，如果「二、為何 Google Code 中止新使用者的服務？」的類似事件再度於 Google Drive 重演的話，Google Drive 是否封鎖某些可能導致侵權的檔案類型、或是會有什麼舉動，例如限速、限制流量等等的，就不得而知了。

因此還是呼籲一下，在 Google Drive 請避免放置有違法疑慮的檔案，讓大家都能持續有免費、快速的空間可使用吧！

(Pic from: freepik.com)Blogger 預設的留言頭像為正方形，有沒有發現「Google+」使用的頭像為圓形？由於 Blogger 預設的頭像尺寸很小，如果想將原本的正方形直接改為圓形，頭像會顯得太小。

所以得先將 Blogger 頭像的長、寬都加大，再改成圓形，版面才比較美觀。本文將詳細說明如何修改頭像圖案的 CSS 語法參數，來達到需要的效果。

一、新舊範本的差異

過去曾在「Blogger 修改留言者的各種身份頭像顯示＋尺寸變更」修改過頭像，不過那一篇文章只適合舊範本使用。現在大部分的讀者都是使用新範本，使用「Google Chrome 開發人員工具」來檢查後，發現新範本的 CSS 改法不太一樣。

因此使用新範本的讀者，請按照本篇的語法來修改。

二、留言頭像的 CSS 程式碼

如果知道 Blogger 範本中的 CSS 區段在哪，那麼可直接將本文的 CSS 程式碼複製過去。

如果不清楚的話，請到 Blogger 後台範本 → 編輯 HTML → 搜尋 </head>字串 → 在其前一行插入以下程式碼──

先別急著存檔，以上這些參數，頭像的效果大致像這樣──

上圖頭像的寬度設定為 50px、有四個圓角(非圓形)、有外框。

如果這不是你要的效果，請閱讀以下說明再決定參數怎麼下。

三、CSS 參數修改

以下的英文字母行號請參照上面的程式碼。

1. 頭像尺寸

H、M、S：這三行決定頭像的寬度， 50px可改為自訂的寬度(Blogger 預設的寬度為 36px)。

2. 留言區縮排

D：系統預設的留言區縮排為 48px，但由於頭像寬度被我們從 36px 改為 50px(拉長了 14px)，因此距離左邊界縮排也得拉大 14px，所以 D 行的數值我們得改為 (48 + 14 =) 62px。

3. 頭像邊框

N：如果不需要邊框的話，這一行可以刪除；如果想要邊框的話，這一行的綠字部分可以這麼修改─

1px：這是邊框的厚度，可自行調整。
solid：這是邊框的形態，solid 代表實心。除了 solid 以外的參數，可參考「CSS 教學 > 邊框」。
#ccc：這是邊框的色碼，請自行調整，可參考「色碼表」。

4. 圓角形狀

O：綠字部分為圓角的程度，數值越大代表圓角的程度越大。

如果要維持正方形，請將此行刪除。

如果要改成圓形，以寬度 50px為例，那麼圓角程度設為一半大小，也就是把本例的 7px 改為 25px，就會變成圓形了。就像下圖這樣──

四、IE 瀏覽器的提醒

必需要提醒的是，由於 IE8 不支援 "圓角語法"，要 IE9 以上才支援，因此本文的效果在 IE8 (含)以下的瀏覽器無效。

可參考「建議避免使用 IE8(含)以下瀏覽器」這篇文章，在網頁明顯處(例如本站右上方或頁尾版權宣告處)，建議訪客使用 Chrome、FireFox 等瀏覽器參觀部落格，可得到最佳閱覽效果。

(Pic from: Google Play)鋰電池正確的充電方式為何，一直以來有很多種說法，例如「前幾次要完全放電」、「可以一直放在充電座上」等，但正確性卻是不得而知。在「數位工作研究會」 +Li-Chi Ku 發表的「討論串」，介紹了一篇國外文章，由於經過實驗證明，相信他的說法比較值得信賴。

以下先摘要最佳充放電方式的原理，想直接安裝有助於鋰電池正確充電、延長壽命的 app，請跳到「三、Battery Widget」或「四、Battery Notification pro」。

一、經實驗證明的充電要點

簡短摘要該討論串的鋰電池充電要點：

1. 充電幅度對電池壽命的影響

A.每次充電幅度 100%：例如從 0% 充到 100%
B.每次充電幅度 25%：例如從 30% 充到 55%
C.每次充電幅度 50%：例如從 20% 充到 70%

以上的電池壽命長短為 C > B > A，每次都充放電 50% 可得到電池壽命的最大值。

想瞭解這個結論如何導出，請參閱「原討論串」的實驗數據。

2. 溫度

鋰電池溫度越低，壽命越長。當充電時間越久，電池溫度越高，對壽命有不好的影響。

二、尋找利於延長鋰電池壽命的 app

根據以上歸納的要點，假設想讓電池壽命最大化，舉例來說，可在每次電力剩 25% 時充電，到了 75% 時停止充電。

如果有這樣的 app，在低電力時自動通知，且充電到指定的百分比時也自動通知，就能幫助我們控制鋰電池的充電週期，讓其壽命最大化了。

在「Google Play」尋找及測試之後，挑選出兩款免費、符合以上操作需求的 app，由於各有其優點，以下將個別介紹。

三、Battery Widget

安裝網址：https://play.google.com/store/apps/details?id=com.elvison.batterywidget

1. 特點

支援中文介面
可自訂指示器顏色、風格
可調整字型、顏色
可設定自訂溫度提醒

2. 其他說明

檔案較大：2.59M
假設提醒的設定為 85% 電力，無論當時是否為充電狀態，系統都會提醒(容易造成多次無謂的提醒)

3. 操作

按下 app 圖示後，出現上圖畫面，完全支援中文，請按下「設定」。

紅框以外的設定由於與本文主題無關，因此請依需求調整。接下來請按「電池資訊通知」來設定電力通知的細節。

一開始並沒有任何通知設定，圖中的「電力下降至15%」與「電力上升至85%」是我設定好的範例。要自訂自己的通知，請按下「新增通知」。

而為何不是如同理論般設定為 25% 及 75%，這是考量到方便性後做的個人折衷抉擇。

請按下「通知資訊類型」

如上圖，這個 app 提供五種情境可送出提醒通知，可依自己的需求設定。

如果依照本文的主題，需要設定的項目為「電力下降至...」與「電量上升至...」兩個選項，上圖以選擇「電力下降至...」為例。

接著在「狀況設定值」設為 "15"，那麼電量下降至 15% 時系統便會自動通知。

而通知的方法有幾種，如上圖，請選擇自己需要的方式：

聲響：可選擇自訂的旋律
震動
閃燈

以上設定完畢後，另外增加設定「電量上升至...」的這個情境，即可完成這個 app 的設定。

4. 補充

使用過後，發現 Battery Widget 有個小缺點，如「2. 其他說明」所提，雖然設定成 85% 通知，但若我們電力充過頭(沒聽到提醒)，例如充到 90%，當電力下降到 85% 時，系統依然會送出提醒。

下面介紹的 Battery Notification pro 在這一點設計的比較好，只有在充電狀態下達到 85% 才會提醒。

四、Battery Notification pro

安裝網址：https://play.google.com/store/apps/details?id=ru.gang018.BatteryNotificationPRO

1. 特點

可自訂提醒時間長短
可設定夜間靜音模式
檔案大小只有 130k

2. 其他說明

英文介面

3. 操作

由於全英文介面，以下說明會仔細一點。不過其預設值設定的不錯，大部分的選項不必特別設定。如上圖，沒有特殊需求的話，保持所有的綠色勾選即可。接下來參考圖中 A～C──

A：這個「Preference」設定 "高電力" 時的通知，按下後請參考下一圖操作。

B：這個「Preference」設定 "低電力" 時的通知，按下後請參考下一圖操作。

C：設定 "夜間靜音模式" 的時間，預設值為 0：00 ～ 8：00，在這段時間充電時不會送出通知。這是很貼心的設計，避免干擾睡眠。

上個步驟中設定 "高電力" 或 "低電力" 的畫面都差不多，本圖以 "高電力" 說明，"低電力" 可依此類推。

A：設定通知的電力百分比

B：選擇通知的音樂旋律

C：選擇語音通知，但不建議使用此選項，因為採英文語音。且設定 C 後，便無法播放 B 的音樂旋律。

D：勾選震動通知

E：若希望系統的通知能持續一分鐘，那麼不需變更此選項；若希望通知超過一分鐘，請按「Repeating time」來設定持續通知的時間；若希望只通知一次(大約持續幾秒鐘)，請勾選「One-time notification」。

4. 補充

綜合比較起來，Battery Notification Pro 的設計比 Battery Widget 實用，且檔案極小，只差在無中文介面。

另外 Battery Notification Pro 有個缺點，不過不是那麼全面性。像我使用的是「Nexus 7＋磁扣皮套」，這導致磁扣皮套扣上時，Battery Notification Pro 常常無法喚醒系統來發出提醒音樂，不過若是沒有使用磁扣皮套的行動裝置，不至於有這個問題。

而 Battery Widget 沒有這個問題，所以雖然我比較喜愛 Battery Notification Pro 的設計，但由於配備的限制不得不使用 Battery Widget。

五、小結

除了使用本篇介紹的 app，還可搭配參考「增加 Andorid手機電池續航力，一定有效的省電心得」、「如何解決讓 Android 效能慢、耗電多、佔空間問題 App？」，減少安裝多餘 app，減少電力的耗費，正確的使用 android 系統，讓行動裝置的鋰電池壽命得到最大的效益。

雖然一度覺得 Google 可能會看在眾多擁護者的份上，最後關頭決定不關閉 Google Reader(以下簡稱 GR)，或改以別的形式繼續存在(例如併入 Google+)；但最近只要打開 GR，都會秀出即將於 7/1 關閉的訊息，代表 Google 心意已決，看來早日比較各個方案，做出移轉的決定才是上策！

由於本站的 RSS 訂閱約有八成使用 Google 來源，包含「Google Reader」及 iGoogle，為了讓讀者往後仍能順利訂閱及接收新文章，本文的測試比較了多款 RSS 閱讀器，供讀者轉換的參考。篩選的條件為免費、無訂閱數量限制、使用 google 帳號就能將所有 GR 訂閱直接移轉新的閱讀器，達到無痛轉換的目的，結果有下列四款：

Feedly
InoReader
Aol Reader
Digg Reader

2013.6.30 補充

另一款 RSS 閱讀器 The Old Reader，因匯入步驟較多，故不在上面的比較名單；不過對於深度 GR 使用者而言，不會在意多幾個步驟，且 The Old Reader 的使用者也不少，因此本文加入「三-1、The Old Reader」的評測內容

一、評測重點

如果 "不是重度的 GR 使用者"，沒有太挑剔與在意過去的 GR 使用經驗，意思就是說沒有被 GR 設計的便利性給綑綁住的話，那麼建議可直接轉換到 Feedly──這是測試了各種 RSS 閱讀器後，認為綜合評比分數最高的替代方案。

其實很多使用者還是對 Feedly 的操作感到不習慣，找不到過去使用 GR 的某些感覺，包括我也是，因此以下測試的基準，主要著重在介面的各種設計，是否提供了友善的閱讀體驗。

二、Feedly

安裝網址：http://cloud.feedly.com/
安裝教學：「Feedly 完全上手教學，延續 Google Reader 閱讀器體驗」

(pic from:devhd.files.wordpress.com)

A. 特點

Today 熱門推薦文章
標示全部已讀的 logo 很大
文章可按空白處收合

B. 優點

目錄可調整順序
導覽列(側邊欄)自動收合
縮圖摘要模式、卡片模式、依日期區分模式
gReader(Android App)最新版本支援 Feedly 帳號匯入 (2013.7.2增補)

C. 缺點

訂閱項目不可調整順序
文章無法放大到符合螢幕寬度
不能調整字體大小
導覽列(側邊欄)不能固定
html 支援度較差(上色文字無法顯示顏色)

三、InoReader

安裝網址：https://www.inoreader.com/

(pic from:inoreader.com)

A. 特點

支援中文介面(只有簡中，如果瀏覽器裝簡繁自動轉換的套件可解決此問題)
自動推送功能(新文章自動傳送到 email、Pocket、Instapaper等等)

B. 優點

目錄可調整順序
訂閱項目可調整順序
導覽列(側邊欄)可固定、可隱藏
文章可放大到符合螢幕寬度
可用快速鍵放大縮小字體

C. 缺點

讀取速度比較慢(服務器位於歐洲，需要掛代理才會快)
沒有縮圖摘要模式或卡片模式
分享到社群的操作比較麻煩
沒有 app(不過有「手機網頁版」)

InoReader 是個人認為目前閱讀體驗設計最友善的選擇，不過其讀取速度略差，GR 深度使用者或許可以考慮。

另一個接近 InoReader 的閱讀器是「The Old Reader」，同樣有簡中介面，不過缺點更多、伺服器不太穩(網頁常常要手動refresh)，個人認為綜合評比比 InoReader 差上一截。

三-1、The Old Reader (2013.6.30增補)

安裝網址：http://theoldreader.com/

(pic from:imgur.com)

A. 特點

支援中文介面(只有簡中，如果瀏覽器裝簡繁自動轉換的套件可解決此問題)
列出久未更新的訂閱來源

B. 優點

目錄可調整順序
訂閱項目可調整順序
gReader(Android App)最新版本支援 The Old Reader 帳號匯入 (2013.7.2增補)；iOS app：Feeddler。

C. 缺點

讀取速度不太穩定(有時網頁需要重新整理)
導覽列(側邊欄)只能固定、不能隱藏
文章無法放大到符合螢幕寬度
不能調整字體大小
無法分享到社群
沒有縮圖摘要模式或卡片模式
無標籤功能
html 支援度較差(上色文字無法顯示顏色)

四、Aol Reader

安裝網址：http://reader.aol.com/
安裝教學：「AOL 推出全新 RSS 閱讀器，帶給你更舒服的瀏覽體驗」

(pic from:clubic.com)

A. 特點

公司比較大間(找不出特點的特點...)

B. 優點

目錄可調整順序
訂閱項目可調整順序
有卡片模式
可調整字體大小(不能用快速鍵、只能在選項裡設定)

C. 缺點

有廣告
導覽列(側邊欄)只能固定、不能隱藏
文章無法放大到符合螢幕寬度
行動裝置 app 未完整推出(過一陣子會有)

五、Digg Reader

安裝網址：http://digg.com/reader

(pic from:nevillehobson.com)

A. 特點

一鍵自動傳送到稍後閱讀(Instapaper、Pocket等)
名聲比較大(很難找到特點的特點...)

B. 優點

目錄可調整順序
訂閱項目可調整順序

C. 缺點

導覽列(側邊欄)只能固定、不能隱藏
文章無法放大到符合螢幕寬度
不能調整字體大小
不能分享到 G+
沒有縮圖摘要模式或卡片模式
無標籤功能
行動裝置 app 未完整推出(過一陣子會有)

六、小結

從以上測試可看出，這四款可無痛轉移的閱讀器，目前大致是 Feedly 與 InoReader 二選一的狀態。而 Aol Reader 與 Digg Reader 感覺特點不多、缺點不少，像是未完成品。不過由於這兩個閱讀器最近一個禮拜才推出，都有大公司當後盾，相信比起其他沒列入評測的閱讀器而言，未來會更有潛力。

也許不久之後，Aol Reader 與 Digg Reader 吸收完讀者初期測試反饋的意見，功能會有大幅度地改進，或許有機會再來更新評測的內容、讓這兩款閱讀器有上訴的機會。

延伸閱讀：幫網頁安裝「一鍵訂閱到 Feedly, InoReader, The Old Reader」的按鈕

(Pic from: joshrimer.com)隨著 Google Reader(以下簡稱 GR) 的關閉，本站各處原本的「一鍵訂閱 GR」按鈕也失去作用。雖然有無限的感傷，不過還是得補上其他 RSS 閱讀器的一鍵訂閱按鈕。在網站提供 RSS 閱讀器一鍵訂閱的按鈕，除了增加讀者的便利性，也是部落格能穩定累積讀者的一大幫助。

在後 GR 時代，最終誰能成為 RSS 閱讀器霸主還很難說。以目前來看，根據「無痛轉換 Google Reader 的四種替代方案比較」，Feedly、InoReader、The Old Reader 這三者的完成度比較高，應該會是使用率較高的選擇。

根據「alternativeto.net」對 GR 替代方案的投票結果(至2013.7.4為止)──

如上圖，前幾名的投票結果符合「無痛轉換 Google Reader 的四種替代方案比較」的評測，而第二名 NewsBlur 由於有訂閱數量的限制(64個)，因此並未列入該篇文章的評測資格。

要如何在部落格安裝「一鍵訂閱 RSS 閱讀器」的按鈕，就像本站左上方的訂閱 logo，本文將針對以上面三者來說明。以下依慣例先說明原理，想直接安裝請跳「二、Feedly 一鍵訂閱按鈕程式碼」。

一、找出各家 RSS 閱讀器一鍵訂閱的連結

1. Feedly

以本站為例，點選訂閱網站(WFU BLOG)後，出現以下畫面──

將上圖網址列的網址複製出來，得到以下字串：

http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwayne-fu.blogspot.com%2Ffeeds%2Fposts%2Fdefault
利用線上「編碼轉換工具」，貼上剛剛複製的網址，再按下「escape解碼」後，可得到以下字串：

http://cloud.feedly.com/#subscription/feed/http://wayne-fu.blogspot.com/feeds/posts/default
這樣就找到 Feedly 一鍵訂閱的超連結了，其結構為字串 "http://cloud.feedly.com/#subscription/feed/" 後面加上含 "http" 開頭的 RSS 訂閱網址。

2. InoReader

InoReader 雖然圖形介面設計上遠輸 Feedly，但在其他方面的設計，真的做得非常仔細。連本文需要的一鍵訂閱，系統本身就已經提供超連結(Feedly 得經幾個步驟才找得出來)，請見下圖──

用戶偏好設置 → 附加功能 → 圖中紅框的網址參數即是。

使用的方法為預設字串 "http://www.inoreader.com/?add_feed=%s" 改為 "http://www.inoreader.com/?add_feed=" 加上含 "http" 開頭的 RSS 訂閱網址即可。

3. The Old Reader

由於 The Old Reader 無法經由前兩個介紹的方法來找到一鍵訂閱的網址，得經由這篇文章「Subscribe to feeds in the Old Reader (without import)」提到的外掛(RSS Subscription Extension)來找。

直接寫結論，The Old Reader 一鍵訂閱的超連結為字串 "http://theoldreader.com/feeds/subscribe?url=" 加上含 "http" 開頭的 RSS 訂閱網址即可。

二、Feedly 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://cloud.feedly.com/#subscription/feed/http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="http://3.bp.blogspot.com/-qRbxc23FS0U/UdZlqQAqzhI/AAAAAAAAHRo/5jyFkLgeK7E/s262/feedly_button.png" title="訂閱 WFU BLOG 到 Feedly"/></a>

紅色字串請改為自己網站的 RSS 訂閱網址
藍色圖片網址可改為自訂的圖案網址
綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─

上圖按鈕圖示的來源為「適用於網頁按鈕的SeonBieber按鈕圖標」，可改為自訂圖案。

三、InoReader 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://www.inoreader.com/?add_feed=http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="http://1.bp.blogspot.com/-c3397-DvD3E/UdU-3hUrxSI/AAAAAAAAHPs/nQdllTe6wtc/h40/inoreader-h43.png" title="訂閱 WFU BLOG 到 InoReader"/></a>

紅色字串請改為自己網站的 RSS 訂閱網址
藍色圖片網址可改為自訂的圖案網址
綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─

四、The Old Reader 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://theoldreader.com/feeds/subscribe?url=http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="http://4.bp.blogspot.com/-0xAXTD4XUmg/UdU-3oojriI/AAAAAAAAHPw/MOmJii-tjaY/h40/old+reader-h78.png" title="訂閱 WFU BLOG 到 The Old Reader"/></a>

紅色字串請改為自己網站的 RSS 訂閱網址
藍色圖片網址可改為自訂的圖案網址
綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─

五、Blogger 擺放位置

如果要像本站一樣，將訂閱按鈕放在文章末尾處的資訊區，到 Blogger 後台打開範本文件：編輯 HTML → 搜尋字串「<div class='post-footer-line post-footer-line-1'>」。應該會有兩個搜尋結果，在第一個搜尋結果的後面找適當的位置放安裝碼；第二個搜尋結果是行動裝置版本的位置，由於不知道效果，請自行測試有無作用。

如果要擺放到其他位置的話，請參考「Blogger 文章及留言區塊的程式碼」、「Blogger 標頭、導覽列、側邊欄、頁尾區塊的程式碼」等文章。

(Pic from: bpm-ingenuity.com)「舊版 Blogger 私密文章」 +Lee Bruce留言表示：「我覺得大家比較想要的是，類似臉書一樣給特定人士觀看，或是文章使用密碼上鎖的功能。（只讓有密碼的人看）」。原本對這個 idea 能否實現沒什麼頭緒，直到想起網址字串也是能玩很多花樣的。

就像 PICASA 的圖檔網址，夾雜一長串的亂碼，只有知道 "完整網址連結" 的使用者才得以打開圖檔。那麼利用「把密碼加入網址」的概念，就能成功地把私密文章分享給知道密碼的人看了。

本篇的私密文章更新版，就是利用以上的 idea 來構思，請參考本文的步驟來安裝。不過由於牽涉到加密演算法，因此無法提供原始碼，這樣的作法跟「Blogger 私密留言」是一樣的。

一、安裝程式碼

如果安裝過「舊版程式碼」，請先完整移除。

接著請見以下程式碼──

1. 首先到後台 → 範本 → 編輯 HTML → 找到字串 <body ....>這一行，在其後面一行，插入 A～O行。

2. 接著搜尋類似以下的字串──

<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>

小心不要找錯了，上面的第二行有 "date-outer" 字串。
找到這三行後，在其下面一行，插入 Q～Y行。

3. 不急著存檔，請先對照程式碼的行號──

B：如果範本中在此行之前已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串)，那麼可刪除此行。
J：如果部落格有自己設計「404 錯誤頁面」的話，請將網站的「404 頁面網址」填入此行的雙引號內；如果沒有的話，請保持原狀即可。

存檔後即完成安裝，但還沒結束，因為尚未設定 K 行的 "私密文章網址開頭字串"。

「舊版」的 "私密文章網址開頭字串" 直接填入程式碼中，保密性較差一些，會檢視網頁原始碼的人可得知字串為何。此更新版會將網址開頭字串加密，就算看了網頁原始碼也沒用。

而要如何加密此字串，請繼續看如何設定。

二、加密私密文章網址開頭字串

安裝完程式碼後，第一次開啟部落格會發現，無論是首頁或是文章頁面，文章最後都會出現一個圖示 "Private Post by WFU BLOG"，如下圖紅框──

請對著圖示按下去，就會出現「Blogger 私密文章──加密小工具」

請按照指示，輸入英文小寫字母與 "-" 符號的組合，來設定私密文章網址開頭字串。請注意一下：

1. 這個字串要記住，此字串為每篇私密文章的網址開頭字串
2. 最好字串結尾是 "-"，避免跟其他非私密文章的網址混淆
3. 如果想重設這個字串，那麼所有設定過的私密文章，網址開頭字串也得重新設定

如上圖，假設我設定了 "prv-" 這個字串，按下「加密」按鈕，會得到一串紅色的加密數字 "007019015067"。

如指示，請將自己的加密數字，打開後台範本後，填入原程式碼 K 行的雙引號之中，儲存後便完成所有的設定，。

之後 "Private Post by WFU BLOG" 這個圖示只會出現在私密文章之中，需要重新設定加密字串、或是將私密文章的網址給別人時，會再用到這個圖示。

三、產生私密文章的方法

接下來示範私密文章如何產生，方法很簡單，開一篇新文章後，在文章編輯的頁面──

如上圖紅色方框，於「文章設定」→「連結」→「自訂永久連結」→ 輸入自訂字串開頭的網址字串。

如果在「二、加密私密文章網址開頭字串」設定的字串為 "prv-"，以上圖的文章為例，文章網址字串 "prv-future-forecast" 符合規則，此篇文章就能自動成為 "私密文章"，只有以站長身份進入部落格，才能看到該篇文章。

想要測試一下的話，本站的這篇私密文章網址為──

http://wayne-fu.blogspot.com/2012/01/prv-future-forecast.html

是不是看不到這篇文章啊？

四、如何把私密文章給別人看

方法也是很簡單，首先進入該篇私密文章，會看到右下角的圖示 "Private Post by WFU BLOG"──

A. 按下紅框的圖示後，會出現下方的「加密小工具」。

B. 小工具會自動產生該篇私密文章的加密網址，如圖中的紅字字串，只要把這個字串給別人，知道這個網址的人就算不是站長身份，也能看到這篇私密文章。

試試看吧，現在你可以看到這篇文章了──

http://wayne-fu.blogspot.tw/2012/01/prv-future-forecast.html?code=088083073095087002086068001018030025074021005027001092006066011024019028013004094018091070022001003

由於篇幅的關係，本篇只敘述使用說明的部分。不過還有一些重點需要知道，請繼續閱讀下一篇──

Blogger 私密文章更新版__注意事項及使用技巧

「Blogger 私密文章」系列標題：
一. 簡易版__站長專用
二. 更新版__能讓他人觀看
三. 注意事項、使用技巧

➢➢快速選單：１２３

(Pic from: bpm-ingenuity.com)「舊版私密文章」的「三、其他必要動作」提到一些注意事項，由於未考慮到某些情境，故現在把注意事項作些更新。

一、注意事項

更新版的私密文章，基本上還是利用偽裝的技巧，只不過技巧更加進化；而文章內容並沒有加密，所以這裡的注意事項，主要是針對防堵其他管道獲取文章內容的可能性。

舊版沒有考慮到的管道為「RSS 強制全文輸出」這個功能，因此針對此點進行一些補充。

1. 移除「網誌存檔」小工具

舊版提過這一點，「網誌存檔」小工具會有一份私密文章的拷貝，所以請移除這個小工具。

2. 文章日期不要設太近

舊版提過這一點，請直接參考舊版的內容。

需要補充的內容為，由於 Google Reader(以下簡稱 GR) 已於 7/1 關閉，對於「Blogger 私密文章」功能而言，反而是一種慶幸。因為 GR 功能太過強大，可以抓取網站的所有文章，連已刪除的文章都還保留在伺服器，因此若是讀者使用了 GR 加上「RSS 強制全文輸出」功能，那麼 "日期久遠" 的私密文章內容還是能被 GR 抓到。

而目前的「GR 各種替代方案」，無法抓到網站太多文章，只要日期久一點的文章(例如 2012 年的文章)，就不會出現在 RSS 閱讀器。

因此，使用本文方法產生的私密文章，如上圖，請看右邊「日期和時間」的部分，發佈日期只要設定在一～兩年前(例如 2012/1/1)，就不用擔心讀者使用「RSS 強制全文輸出」而出現在 RSS 閱讀器了。

3. 設定「繼續閱讀」及「網站資訊提供」

舊版提過這一點，請直接參考舊版的內容。

需要補充的內容為，不能以為讀者可能使用「RSS 強制全文輸出」就不設定 "繼續閱讀" 以及 "網站資訊提供"，因為──

A.「RSS 強制全文輸出」只能抓到近期的文章
B. Blogger 後台的 feed 資料可以讀取全網站的文章

為了防止讀者從 B 的管道獲得私密文章，因此仍請依照舊版的說明，設定「繼續閱讀」及「網站資訊提供」。

二、搜尋私密文章技巧

1. 站內搜尋工具

使用方法請參考舊版文章 → 「五、快速列出網站私密文章的方法」。

例如使用本站右上方的搜尋框，輸入本站私密文章的網址開頭字串 "prv-"，就能搜尋到自己的私密文章。

這個方法的缺點是，如果安裝「Google 自訂搜尋」，若是私密文章還未被 Google 搜尋引擎收錄的話，就會搜尋不到，此時建議使用下一個方法。

2. 私密文章使用特定標籤

如果將所有的私密文章，使用相同的標籤，例如下圖，使用 "我才不相信" 的標籤名稱──

如果部落格使用了「標籤」小工具，可以將 "我才不相信" 這個標籤的超連結存到瀏覽器的書籤，以後點書籤就能一次列出所有的私密文章。

但 "我才不相信" 這個標籤名稱最好不要讓讀者看到，以免引起懷疑，而得知網站有私密文章。以本站為例，可以點下面的標籤連結：

我才不相信

明明就有標籤名稱，可是看不到文章，是不是很奇怪啊？因此如下圖，進入編輯「標籤」小工具的畫面──

A. 勾選「選取的標籤」，就不會顯示所有的標籤。
B. 將私密文章的標籤取消顯示，例如將 "我才不相信" 取消。

完成以上步驟後，就能在部落格輕鬆顯示自己的私密文章了；且隨時可經由標籤查詢私密文章的話，也不必強記私密文章網址的開頭字串了。

三、小結

舊版的程式碼比較簡單，如果私密文章只要自己看，那麼可以安裝舊版的程式碼即可；如果有給特定人看私密文章的需求，那麼就安裝更新版的程式碼。

雖然一開始的設定動作比較多一些，不過以後只要設定文章網址後，就能在 Blogger 自動產生私密文章；且經由系統的「加密小工具」，就能快速產生加密網址，提供給他人觀看私密文章。比起過去 Blogger 要做到「文章加密」的效果，需要每篇文章都重複「複製」、「貼上」、「加密」的過程，還得記住密碼，萬一密碼忘了連自己都無法打開文章。

相較之下，這個小工具操作簡便、又不必記密碼，算是很不錯的解決方案了。

「Blogger 私密文章」系列標題：
一. 簡易版__站長專用
二. 更新版__能讓他人觀看
三. 注意事項、使用技巧

➢➢快速選單：１２３

Blogger 抓取文章縮圖的原理為，選取文章中的第一張圖片。而 +Ida Wu在這個「Blogger 中文社群討論串」詢問："我的blog首頁是套用magazine版面，我能決定每一篇文章的封面照片是哪一張嗎？...除了第一張，不能自選囉？"

雖然只要把想成為縮圖的圖片，放在文章的最前面即可達到目的；不過後來想想，也許有某些情境，想當封面圖(縮圖)的圖片，不一定適合擺在最前面的位置，因為版面或整體感可能變得突兀。

那麼有沒有辦法解決這樣的狀況呢？

一、隱藏圖片

理論上而言，直覺想到的解法是，把想當縮圖的圖片，放到文章最前面，再將其隱藏起來，如此又能被系統抓來當縮圖，而自己又看不到這張圖片，不至於影響到版面配置，算是解決了兩難的狀況。

不過 Blogger 系統會不會抓取隱藏圖片當縮圖是個疑問，測試了一下結果發現可行，那麼以下簡單說明作法。

1. 正常圖片的語法如下──

<img src="圖片網址"/>

2. 要隱藏圖片可用以下語法，加入字串 style="display: none; width: 0px;"即可──

<img style="display: none; width: 0px;" src="圖片網址"/>

3. 操作方法

在 Blogger 的文字編輯器寫完文章後，從「撰寫」模式切換到「HTML」模式，把要當作封面圖案(縮圖)的那張圖片，將圖片語法複製到文章的最前面，然後如同第 2 點，插入隱藏圖片的語法字串即可存檔(注意插入字串的前後要有空格)。

4. 備註

一般情形只需要使用 "display: none;" 的參數即可隱藏圖片，不需再使用 "width: 0px;" 強制把圖片寬度設為 0px。然而經實測後發現有時無法隱藏圖片，推測是本站使用了 lazy load，或許這個外掛會強制將圖片恢復顯示，因此把圖片寬度設為 0px 是買個保險的動作。

2013.7.16 補充

+Mark X留言表示：「我想是不是在CSS裡加個 #id 比較方便操作? 例如 #abc {display: none} 一般使用Blogger編輯器的網友上傳圖片時會有 div 區塊包夾, id="abc" 要放進div比較容易快速.」

如果對 CSS 熟悉的讀者，可採用這樣的方式。設定完 CSS 後，這樣每個圖片要增加的字串只有 id="xxx"，會比 style="display: none; width: 0px;"少打很多字。

二、範例效果

如本文，文章開頭顯示的第一張圖片有 WFU BLOG 字樣，不過我在更前面的位置，擺了下面這張圖(已用語法隱形)──

1. 文章縮圖

右邊側邊欄「熱門」文章的那個區塊，按下「最新」文章後，可看到本文的文章縮圖成了上面這張圖。

2. 文章封面圖

本站的動態檢視範本，使用「Flipcard」模式時，例如進入這個網址：

http://wayne-fu.blogspot.com/view/flipcard

可發現本文的封面圖變換了。

三、小結

因此，使用本文的技巧，動態檢視範本就能自訂想顯示的封面圖片了；順帶一提，若讀者使用 +1 或讚按鈕分享文章時，自動抓取的縮圖，也會是這張隱藏起來的圖片。

過去曾在「讓Blogger能顯示單篇文章瀏覽數」，將 Google Analytics(以下簡稱 GA) 的數據讀取到 Blogger，來顯示單篇文章瀏覽數。當時利用 OOcharts 這個服務，來解決讀取 GA 資料需要通過 Oauth 身份認證的問題，可惜於日前接到通知，從 2013/7/22 開始，OOcharts 改為收費服務(USD 3 / 月)，對於我們這種小站不太可能承受這種非必要支出，因此只能另尋其他解決方案。

一、OOcharts 的缺點

還好一開始就沒有將 OOcharts 視為長遠方案，因為──

1. 如「Blogger 相關文章」開頭所提，部落格應該盡量避免使用外部伺服器的服務，我們不知道該公司何時會停止營運，而造成部落格讀取資料的隱憂，尤其是當我們已經對該服務形成依賴的時候。

2. 透過 OOcharts 再來讀取 GA 資料，等於透過兩步驟才能將數據顯示在部落格，瞭解 js 運作原理的讀者可以體會到，要在網頁顯示文章瀏覽數得等待很久的處理時間。

二、Google Analytics 資料查詢方法及參數說明

使用 OOcharts 半年多以來，其實一邊同時也在尋找長久方案。後來發現 Google 試算表也有提供 GA Oauth 身份認證的 API，如此「Google 試算表」真的是 Blogger 讀取 GA 數據的完美方案，因為對 Blogger 而言，Google 試算表根本不算是外部伺服器(同公司的產品)，如此 Blogger 要顯示 GA 的文章瀏覽數將會非常快速！

這裡先簡單說明一下 GA 的資料查詢方法及參數說明，之後再介紹「將 Google Analytics 數據資料同步到 Google 試算表」的整個流程。

首先進入這個網址──

http://ga-dev-tools.appspot.com/explorer/

如上圖，這是「Google Analytics Query Explorer 2」，可線上讀取所有 GA 數據的官方網站。

先按右上角的「Authorize Access」登入 GA 帳號後就能開始使用。

要填入的參數很多，例如滑鼠點「metrics」這一欄時，右下角會出現紅框的「Read the reference for metrics」字樣，點下去即可看「官方說明」。有興趣也可參考「How to Pull Complex Data Out of Google Analytics」、「Getting started with Google Analytics' data sources」。

對英文會頭暈的話，其實跳過這一段，看後面的 Googel 試算表實例操作會比較容易瞭解。

三、Google 試算表的 GA 參數實例

首先必須感謝網路上的高手，在試算表的「工具」→「指令碼庫」裡面，可以搜尋到很多使用者自行撰寫，可免費套用的 js。

為了方便操作，我已經製作了一個試算表範本。首先請登入 Google 帳號，接著進入以下試算表網址──

https://docs.google.com/spreadsheet/ccc?key=0AikclfTTti-0dGZ2eUJvZnlZNFp4RVo0WWxGbU1pRkE#gid=1

如上圖，按「檔案」→「建立副本」→「輸入新文件名稱」後，這份試算表副本會出現在自己的 Google Drive 文件。不想瞭解參數說明的話，可直接跳到「四、GA 身份認證」。

看過「二、Google Analytics 資料查詢方法及參數說明」之後，這張圖的參數名稱是怎麼來的就比較有個概念，以下簡單說明一些重要的參數設定，數字請參照圖中的行號──

3. ids："ga:" 後面必須填入 8 位數的 GA profile id，下一篇的操作可得到此數據。

4. start-date：可自行填入 GA 數據的起始日期。如果需要網站全部歷史數據的話，建議填入 "2005/1/1"，這大約是 GA 的誕生期間，填入更早的日期似乎會產生錯誤。所以若是部落格成立於 2005 年之前的話，很抱歉還是只能從這個時間點開始統計。

5. end-date：可自行填入 GA 數據的結束日期。如果要自動計算到當天日期的話，請在這一格填入 "=today()"，那麼系統會自動產生今天的日期(例如圖中的 2013/7/24)。

7. metrics："ga:pageviews" 代表我要查詢的是網頁瀏覽數。

8. dimensions："ga:pagePath" 代表我查詢的網頁瀏覽數依照 "網址" 列出。

10. filters：這是過濾器，"ga:pagePath=~^/20" 代表我將第 8 項的網址，篩選出開頭為 "/20" 的網址字串，因為 Blogger 的網址字串去除網域後，會是 "/2013/07/xxxx.html" 這樣的格式，透過篩選器可以去除一些不正常的網址數據，減少浪費 Google 試算表儲存的筆數。

12. start-index：除非不想從第 1 筆數據開始列出，不然通常留空格即可。

13. max-results：總共列出幾筆數據(為了涵蓋所有網頁的數據，這個數值當然是越大越好，免得要常常調整)。

14. sheet-name：匯入 GA 數據後，要儲存在那個試算表的名稱，我的預設值是放在 "工作表1"。

以上沒提到的參數，請參考「二、Google Analytics 資料查詢方法及參數說明」查閱官方說明。

四、GA 身份認證 API

別以為這樣就能查閱 GA 資料了，因為 GA 資料是很有私密性的，沒經過身份認證 Google 不會讓你讀取。

請進入剛剛建立的試算表副本，如上圖，按下「工具」→「指令碼編輯器」。

「資源」→「使用 Google API」

A. 如圖將 Analytics 調成「開啟」的狀態
B. 按下「Google API 控制台」，會另開視窗，請按下一圖操作。

接著按「確定」

另開視窗的畫面，同樣將 Analytics API 調成「ON」的狀態

到了這裡，已將 GA 的身份連結，供 Google 試算表使用。由於篇幅的關係，下一篇繼續說明從 Google 試算表取得 GA 數據的操作步驟。

延伸閱讀：如何將 Google Analytics 數據同步到 Google 試算表__(二)試算表操作

接續「上一篇」，本篇說明 Google 試算表取得 Google Analytics(以下簡稱 GA)數據的操作步驟，及如何從網頁讀取試算表資料的要點。

一、取得 GA 資料

回到試算表畫面，上方的欄位「Google Analytics」是由 js 產生，會花幾秒鐘才出現，一時沒看到請不用心急。

上一篇試算表跟 GA 取得連結後，我們可以開始跟 GA 要求身份授權。請按下「Google Analytics」→「Find Profiles / ids」

按「確定」

如果有多個 Google 帳號的話，請選擇申請 GA 的那一個帳號。

按「接受」

一方面上方的下拉選單，請選擇要取得 GA 數據的網站、身份等等，一方面最重要的是下方紅框的 8 位數，這就是我們 GA 的 profile id。

請先在 ids 那一行，於 "ga:" 的後面填入自己 GA 帳號的 8 位數 id，注意前後都不要有空格。

接著按「Google Analytics」→「Get Data」來取得資料。

順利的話，應該會出現類似上圖的資訊，否則會有 error 的錯誤訊息。

接著請改選擇「工作表1」這個試算表，應該會出現整個網站所有文章的瀏覽數據。只要數據有出現，接下來就沒什麼太大的問題了。

二、讓 GA 數據與 Google 試算表自動同步

之前的操作，必須我們手動執行「Get Data」，才能手動取得 GA 數據。而 Google 試算表的強大功能，就是任何動作都能自動化處理。

按「工具」→「指令碼編輯器」

「資源」→「現有專案的啟動程序」

A. 按下「加入新的觸發器」
B. 接著會自動產生本行紅框的內容，依序選取「getData」→「時間導向」→「小時計時器」→「每隔 4 小時」→按「儲存」即可。

以上動作的意思為，Google 試算表會每隔 4 小時，自動執行「getData」的功能，把 GA 數據更新到試算表。

如果想要得到更即時的數據，例如可以改為每 30 分鐘執行一次。不過不建議這麼做，這會增加 Google 伺服器的負擔，且如果大家都這麼做的話，Google 伺服器可能會受不了這麼多的請求。

實際上過去幾個月，我設定過每 1 小時、或每 2 小時自動更新，都曾偶爾收到 Google 的郵件通知，表示伺服器負荷過重無法執行功能。也許讀者可以先從設定 1 小時開始，萬一收到 Google 的郵件通知伺服器負荷過重，再來調整更長的間隔。

三、利用 js 讀取 Google 試算表資料

要能夠讀取 GA 匯到 Google 試算表的數據，還得先將此試算表發佈到網路上，請進行以下步驟──

回到試算表畫面，按「檔案」→「發佈到網路」

按「開始發佈」

A. 按「RSS」
B. 這個框框裡的網址，可用來讀取試算表資料。而紅色底線的字串，請特別紀錄下來，下一篇的「Blogger 文章瀏覽數__更新版」會用到此參數(此字串為該試算表的代號)。

如果取得 GA 數據並非「Blogger 文章瀏覽數」這個用途，而是想要從試算表的 GA 數據做其他應用，可利用上述的網址字串，並參考「利用 Google 問卷(試算表)當小型資料庫__（二）讀取、儲存資料庫」，可經由 js 來得到 Google 試算表儲存的 GA 資料，呈現在網頁上。

由於本文撰寫目的主要是用於「Blogger 文章瀏覽數」，目前能提供的 js 範例就是該篇文章。若有 GA 數據其他用途的需求，請再留言提出實例，若不複雜的話可再考慮另開一篇文章說明 js 範例。

延伸閱讀：Blogger 單篇文章瀏覽數__更新版

(Pic from: psdgraphics.com,freevectorgraphics.org)舊版「讓Blogger能顯示單篇文章瀏覽數」使用了第三方的服務 OOcharts，由於從 2013/7/22 開始其改為收費服務，曾安裝過舊版的讀者，此功能已經無法再生效。

這次的更新版使用了不同的解決方案，利用 Google 試算表來存取 Google Analytics 的資料，再將文章瀏覽數據從試算表讀到網頁來顯示。這樣的解決方式反而比舊版的存取速度更快(非外部伺服器)、更安全(Google 不會收費)。

效果就像首頁文章右上角、每篇文章右上角、及文末文章資訊區所顯示的文章計數器，而安裝的整個流程請詳讀本文的說明。

一、準備動作

首先必須建立 Google 試算表檔案，請參考「如何將 Google Analytics 數據同步到 Google 試算表」的兩篇系列文，按照以下步驟的流程：

1.「(一) 資料查詢與身份認證」→「三、Google 試算表的 GA 參數實例」→ 這一段的步驟做到建立試算表副本完畢即可，之後的參數說明可暫時略過。

接著完成「四、GA 身份認證 API」的所有動作。

2.「(二)試算表操作」→請完成全部的流程。

二、安裝程式碼

以下的程式碼可放在文章區塊中、任何想顯示文章瀏覽數的位置。不過對於不熟 Blogger 範本內容的讀者，可能會是個難題。如果不清楚想擺什麼位置，建議可參考以下文章──

「Blogger 單篇文章瀏覽數」→「四、擺放位置」
「Blogger 範本__(三)文章及留言區塊的程式碼」

若曾安裝過舊版請將舊版程式碼全部移除；以下請在範本中欲顯示文章瀏覽數的地方，加入程式碼：

以上 N 行與 P 行為了節省空間，將程式碼壓縮了，如果想瞭解原始碼的話，請下載「這個原始檔」。雖然附檔名為 js，但內容包含 HTML 及 Blogger 語法，所以是不能外連的。

先不要存檔，還有重要參數要改，請見以下行號的說明──

J：這是最重要的參數，請參考「如何將 Google Analytics 數據同步到 Google 試算表__(二)試算表操作」→「三、利用 js 讀取 Google 試算表資料」→ B 點紅色底線字串，請將自己的試算表字串置換此行的綠色字串。

以上 J 行為最重要的參數，若無其他需求可直接存檔，可看本站文章右上角及文末資訊區的文章瀏覽數效果，也可按「首頁」或「文章標籤」看效果，讓訪客有參考的依據。

若有其他需求請繼續參考以下行號的修改──

K：藍色圖片網址可改為自訂圖案網址。

L：藍色的數字如改成其他數字，瀏覽數據就會乘以多少。例如改成 1.5 就會乘以 1.5 倍；改成 5 就會乘以 5 倍。至於為何加入這個參數的功能，請參考「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」

B：這一行裡面 style 裡的參數可自行修改 CSS 樣式，例如想要將位置放在最右邊，可加入 float: right;這樣的參數；而 title 裡面要顯示的字串可自行修改。

B & I：這兩行有同樣的綠色字串 "pv1"，如果一篇文章只有一個地方想顯示文章瀏覽數，就不必變更；若有第二個以上的地方想顯示文章瀏覽數，請將這兩個字串改為不同的參數，例如 "pv2"，然後再將全部程式碼複製到要顯示的位置即可。

三、小結

這個更新版的安裝設定步驟，其實也是不下於舊版；不過好處是，若是有安裝過舊版，可以非常明顯感受到顯示速度快很多，這就是不依賴外部伺服器或外掛的優點。

若 Blogger 使用了很多外部伺服器的小工具，值得考慮改用原生功能、或是以 Google 試算表為資料庫的工具，可按本站上方導覽列的 "Google試算表應用" 或本站下面的這個標籤來參考：

電腦-Google 相關-Google 試算表

浮動側邊欄是效果很不錯的一個網頁設計，這個浮動區塊不會隨著畫面捲動而消失。站長可將想特別強調的內容、傳達的訊息、甚至是廣告內容放入這個區塊，而達到強力曝光的效果。

一開始敘述的是原理及過程，想直接安裝程式碼請跳「二、準備動作」。

P.S. 為了避免誤會，右邊的浮動廣告圖案是故意使用的錯誤範例，請見「四、錯誤示範及提醒」的解釋。

一、網路範例

根據「博客側邊欄跟隨滾動效果」，該網頁可看到浮動側邊欄 "熱門文章"、"廣告" 固定的效果。

因為覺得效果不錯，在 Blogger 試用了這個語法，以下為感想：

1. 如果部落格沒有設計底部區塊時，這個效果沒問題；但是有放大片的底部區塊時，例如版權宣告等等，那麼右邊會被這個浮動區塊給遮住。因此如果能設定底部的距離，會是比較好的設計。

2. 該網頁在 IE 下顯示正常，不過我安裝在自己的 Blogger 時，IE 下浮動區塊會跑到最左邊；如此一來，程式碼需要為 IE 小幅優化。

3. 從原始碼看得出原作者是工程師出身，程式碼寫得很有架構與組織，對 WFU 而言，就是很不容易理解的那一種程式...相信這樣的寫法有其優點，但是將複雜的架構用於這個簡單的功能，WFU 實在不知道怎麼下手修改。所以與其痛苦地修改，最後決定重寫還比較快，這也是本文 "改良精簡版" 的內容。

二、準備動作

1. 以 Blogger 的操作為例，首先到後台 → 版面配置，把要當成浮動欄位的區塊，拉到側邊欄的最下面──

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

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

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

三、安裝程式碼

1. 一樣停留在「範本」→「編輯 HTML」的畫面，如果範本裡已經安裝過 jqeury 的話，就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串)；如果沒安裝過 jquery，請搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

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

程式碼 H 行的部分為了節省空間，把程式碼壓縮了，想參考原始碼請下載這個檔「floating-side-column-130806.js」。

3. 先不要存檔，請依以上程式碼行號修改一些參數──

E：紅色字串請改為「二、準備動作」→ 步驟 2 的 id 字串；而綠色字串 "#" 請保留。

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

G：藍色數字代表，當浮動區塊到頁面底部之間的距離，達到這個設定的像素(px)值時，停止浮動的效果，可避免遮住網頁底部的區塊。

改完以上三項即可存檔。

四、錯誤示範及提醒

有沒有覺得本文右邊有個奇怪的的 "bloggerAds" 公益廣告圖案一直停留在螢幕上？這是刻意製造的錯誤示範，你一定有這樣的經驗，某些網站的畫面充滿了浮動的廣告，遮蓋了其他部分的內容，造成閱讀上的困難，就像右邊這個浮動廣告一樣。

因此再次提醒要當作浮動側邊欄的區塊，得依照「二、準備動作」放在側邊欄的最下方，才不會遮住其他側邊欄或被其他側邊欄覆蓋。不過這個公益廣告圖案仍可展現本文的其他浮動效果，在距離底部 500px 左右時會自動消失，避免遮蓋底部的版權宣告區塊。

而最重要的是必須提醒一下，Google Adsense 廣告請不要使用浮動效果，「官方有明文告知」此事，請勿以身試法，萬一遭到停權可就不好了。

這是一篇公告文章，今天發現網站很多工具都失效了，例如「推文系統」、「G+ 留言框」，一查之下才發現事情嚴重了，原來 Google Code 已把我的 js 檔全部刪除(是的，完全沒有通知)。

如果只是 WFU BLOG 某些功能暫時失效，也不會多嚴重；但如果全部的 js 檔失效，那麼所有使用本站 js 外連的讀者，在自己網站使用的功能也會失效，這樣受害的讀者數量真的不知有多少...

一、補救方式

本站的讀者請先不必太過擔心，因為不是所有的程式碼都有外連 js，大部分比較短的程式碼都是沒有外連，只有比較大型的程式才會使用 js 外連。而所有放上網路、雲端的東西，WFU 都會多處備份。還好之前已經研究過如何在 Google Drive 存放 js 檔，目前會逐步將所有的 js 檔上傳至 Google Drive 存放。

讀者如果在自己網站發現某個功能或小工具失效了，請到本站的相關文章，看看是否 WFU 已經貼出紅色的公告，類似像下面這樣──

2013.8.9 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了，本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者，請修改程式碼中的 js 檔連結。為了避免日後有其他意外，也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」，自行備份 js 檔並上傳到自己的 Google Drive 空間。

比較快的方式就是在該篇文章搜尋 "公告" 字串，如果有看到公告，表示程式碼裡面的 js 檔連結已經改成 Google Drive 的連結，請更改一下 js 檔的連結，就能恢復功能了。

如果在該篇文章還沒看到公告的話，表示 WFU 的上傳進度還沒處理到那篇文章，請換個時段再過來看看。基本上會從比較新的文章開始動作，比較舊的文章陸續會更新連結。

而如果有貼過公告的文章，使用了新的 js 檔連結仍有問題，麻煩請留言通知一下，我會趕緊測試的。

二、Google Code 失效原因

Google Code 顯示的字樣為「Scheduled for deletion due to Violation of TOS.」，意思就是我違反了使用條款規定而被刪除。Google 了一下國外類似的案件，大致是 Google Code 放的程式必須都是開源碼，而我的 js 檔難道不是源碼嗎？

雖然我可以寫信給 google 問問是怎麼回事，要求恢復這些 js 檔，不過仔細想想，等待的時間說不定比搬移 js 檔的時間還長。

另外想到一點，寫「私密文章」、「私密留言」這些工具時，為了保護演算法不能被看到，而必須把程式碼混淆，不曉得是否因為這樣而被判定非開源程式碼？因此決定算了，不進行上訴，把時間花在搬移 js 檔比較實在。

最後也提醒讀者，為了避免日後有其他意外，請參考「取代 Google Code 外連 js 檔的選擇__Google Drive」，自行備份 js 檔並上傳到自己的 Google Drive 空間。

上一篇寫了「部落格浮動側邊欄」後，原本的應用是要讓 Google Adsense 廣告能夠在側邊欄浮動、增加讀者的注意力。還好沒釀成大錯，即時發現「Adsense 的官方規定」是不允許這樣做的。

根據閱覽經驗，當讀者觀看部落格的文章時，目光焦點大多集中在本文區塊，這也是當廣告放在本文區塊時，點擊率會遠高於側邊欄廣告的原因。那麼，該怎麼做可以提升側邊欄廣告的點擊率呢？

一、從心理上分析

摒除最有效的方式──浮動式廣告，要能在側邊欄重新抓住讀者的目光很困難，必須等到讀者的注意力分散之際才有機會。而何時讀者會開始分心呢？那便是讀者文章閱讀完畢之後。根據這個結論，如果能讓側邊欄的廣告，出現在文章的結尾附近，相信可以引起讀者的注意，進而提升點擊率。

只是對於技術上而言，每篇文章的長度都不一樣，有可能把側邊欄廣告的位置，剛好擺在文章結尾的右邊嗎？

先說結論，技術上而言這是沒問題的，不過也不一定得這麼麻煩，最簡單的作法是直接將廣告放在文章結尾後面，就不必在側邊欄搞這些有的沒的。不過每個站長總有自己的考量，例如在文末想傳達一些特定訊息，如果在文末的位置放了廣告，想傳達的訊息就可能會被圖片、影音早一步搶走目光了。因此，這是將側邊欄廣告移位到文章結尾右側的真正原因，不搶了文末資訊的風采，又能現身在讀者目光所及之處。

舉個實例，「高登工作室」會在文末先宣傳相關文章及用大字提醒讀者訂閱 RSS，而非先擺放廣告；以本站為例，目前在文末宣傳「Blogger 中文社群」、提供部落格相關資訊是比廣告更重要的事，因此該位置也不適合擺放廣告。

二、原理及 Adsense 的規定

經由操作 javascript，如果能夠讓側邊欄浮動，那麼讓區塊出現在文章結尾處也不算難事了。先讓網頁全部載入後，監控網頁捲動的事件，同時一邊計算文章結尾處的座標，再把側邊欄廣告的座標，移動到文末附近的座標，這個任務就完成了。

唯一要考量的點為，這樣的動作是否還會觸犯 Adsense 的規定？因為我們曾改變過 Adsense 區塊的座標一次。

再察看一下 Adsense 的條文，關於「更改 AdSense 廣告程式碼」：

以下是幾項您應該避免使用的技巧：
隨時隱藏廣告單元 (例如：display:none)
導入 AdSense 廣告程式碼的方式會掩蓋內容
使用任何方法，在同一個網頁上強行顯示超過 3 個 AdSense 廣告單元
使用隱藏關鍵字、IFRAMEs 或任何其他方法來操控廣告的指定目標
透過電子郵件或軟體來散佈廣告
用浮動廣告或滑動廣告單元來吸引不必要的注意

以及關於「AdSense 政策允許的特殊廣告刊登方式」：

以下是一些無法接受的修改範例：
將 Google 廣告放在「浮動方塊」中，讓廣告隨網頁捲動、漂浮在網頁上或展開蓋過網頁。
加入不相關的關鍵字 (隱藏或顯示) 來更改廣告的指定目標。
利用 IFrame 搭配關鍵字更改廣告內容或語言。

"浮動" 或 "滑動" 廣告是持續或連續改變座標，而本文的作法為 "改變一次座標" 這樣的動作，並沒有觸犯到以上任何條款，那麼以下就來看怎麼實作。

三、準備動作

1. 準備動作跟上一篇浮動側邊欄差不多，以 Blogger 的操作為例，首先到後台 → 版面配置，把要出現在文章末端附近的 AdSense 小工具，拉到側邊欄的最下面──

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

2. 接著到「範本」→「編輯 HTML」，搜尋 "adsense"──

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

四、安裝程式碼

1. 一樣停留在「範本」→「編輯 HTML」的畫面，如果範本裡已經安裝過 jqeury 的話，就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串)；如果沒安裝過 jquery，請搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

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

3. 先不要存檔，請依以上程式碼行號修改一些參數──

E：紅色字串請改為「三、準備動作」→ 步驟 2 的 id 字串；而綠色字串 "#" 請保留。

F：藍色數字代表 Adsense 廣告的高度，可自行修改。

G：如果廣告要出現在 Blogger 文章末端的話，那麼這個參數可不必修改；如果想將廣告定位在其他位置的話，可修改綠色字串──

例如定位點區塊的 id 為 "comments"，那麼綠色字串可改為 "#comments"。
例如定位點區塊的 class 為 "comments"，那麼綠色字串可改為 ".comments"。

改完以上三項即可存檔。

五、小結及提醒

1. 想先看效果可觀察右邊這個 Adsense 廣告位置的變化。

2.「浮動側邊欄」與本文的效果請擇一安裝，否則看起來效果會互相干擾！

3. 試用一陣子以來，發現這個文末側邊欄的廣告區塊點擊比率不低，看來是個驗證有效的方法！

在部落格安裝讓粉絲提問的留言框__Ask.fm

Blogger 私密文章的偽裝方案

保存部落格盜文、盜圖證據的工具__archive.is 應用

部落格宣傳的小技巧__(一)用 Yahoo Pipe 訂閱論壇、Yahoo知識、PTT特定文章

部落格宣傳的小技巧__(二)找出 Yahoo 知識、Mobile01、PTT 的 RSS 網址

關於 WFU BLOG 作品的版權圖示與技術支援

取代 Google Code 外連 js 檔的選擇__Google Drive(取得檔案外連路徑的簡易方法)

Blogger 修改留言頭像尺寸及形狀的 CSS 語法

讓 Android 設備鋰電池能正確充電、延長壽命的 App__Battery Widget 及 Battery Notification pro

無痛轉換 Google Reader 的四種替代方案比較

幫網頁安裝「一鍵訂閱到 Feedly, InoReader, The Old Reader」的按鈕

Blogger 私密文章更新版__使用說明

Blogger 私密文章更新版__注意事項及使用技巧

選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)

如何將 Google Analytics 數據同步到 Google 試算表__(一) 資料查詢與身份認證

如何將 Google Analytics 數據同步到 Google 試算表__(二)試算表操作

Blogger「單篇文章瀏覽數」__更新版

部落格浮動側邊欄(浮動廣告)__改良精簡版

本站 js 檔外連暫時失效請等待更新

讓側邊欄(Adsense)廣告出現在吸引目光的位置