WFU BLOG

為了避免 Google 帳號被入侵、或盜用，官方有提供帳號最近一個月內登入的詳細紀錄，可查詢從任何裝置(行動或PC)的使用記錄，若看到可疑的裝置登入我們的帳號，可立即移除該裝置。

不過最近發現查詢記錄的頁面及流程都不太一樣了，因此稍微做個圖文筆記，方便將來查閱。

一、帳戶安全檢查

首先登入 Google 帳號，進入以下網址：

https://myaccount.google.com/

從「安全設定檢查」→ 按下「開始使用」→ 會再次要求輸入帳號密碼

完成密碼驗證後，會出現上圖畫面，按下「完成」。

接著便會出現 30 天內，所有登入 Google 帳號的裝置。如果這些裝置之中，有不屬於自己的裝置出現，那就表示帳號被入侵了。

按下紅框的三角形，可展開該裝置 30 天內的登入記錄。

如上圖，可檢視 IP 是否有異常的位址，以判斷是否被入侵。

二、防止帳號被入侵的方法、觀念

1. 使用兩階段驗證

為了防止帳號被盜，啟用 Google 帳號兩步驟驗證，可保證帳號不被入侵。可參考「官網說明」，或是這篇「開啟 Google 兩步驟驗證，避免帳號密碼被盜用！」

2. 密碼設定模式及電腦使用習慣

除了兩階段驗證，要保護密碼安全，還得具備良好的密碼設定習慣、及電腦正確的使用觀念。根據官方提供的說明「維護帳戶的安全性」，比較重要的觀念有：

檢查病毒和惡意軟體：電腦需要注意防毒，避免密碼被惡意軟體側錄，導致帳號被盜。
更新作業系統與瀏覽器：避免舊版的瀏覽器、作業系統有漏漏，導致被入侵。
不要在其他網站上使用與「Google 帳戶」相同的密碼：一個密碼被破解，導致所有密碼都被破解。
小心釣魚網站：注意網址細節，避免被魚目混珠的釣魚網站假冒官網，騙走我們的密碼。
公用電腦：不要在不信任的電腦輸入帳號密碼，以免被側錄。

預防勝於治療，防範帳號安全，得先從良好的電腦使用習慣做起。

Google 相關文章：

(Pic from: blogolect.com)最近這個「Blogger 中文社群討論串」有位苦主發生這樣的悲劇，經營許久的部落格，突然間網址消失、進不去。看到網誌不見一定很令人錯愕，長久花費的心血都沒了。

Blogger 網誌被刪除的案例在國外有很多，多半是被判定或檢舉為垃圾、色情網站，不過偶爾也是有系統誤判的情形產生，本文也會提供案例當參考。

有了這些案例當借鏡，萬一遇上時可知道如何因應，除此之外，所有 Blogger 使用者最好都能瞭解事先預防的要點，畢竟誰都不想遇上這種意外。

一、網址被刪除的情形及原因

如果發現網址被刪、無法進入 Blogger 網誌，大致會出現以下畫面：

不用過於慌張，畫面上已經給了一個連結「我在網路上找不到我的網誌，我的網誌在哪裡？」，點進去後一個個來釐清原因，該網址列出了四種可能：

不慎刪除
自訂網域設定
搜尋結果顯示設定
違反政策或服務條款

比較麻煩的是最後一個，需要再釐清可能不小心違反了哪項政策或服務條款，需再查看這篇「Blogger 政策」：

1. 版權問題：請查閱「Blogger 版權提示」、「Blogger 版權政策」的內容，不過因版權問題而被刪除網站內容的話，是有申訴機會的。

2. 垃圾內容：請查閱「為什麼我的網誌遭到停用？」，因這類情形被刪除網誌的話，會收到通知。

3. 成人內容：請查閱「成人內容設定」，因這類情形被刪除網誌的話，會收到通知。

4. 服務條款：請查閱「Google 服務條款」，這一點的內容過於廣泛，不過應該一樣會先收到通知。

二、可能的解決方法及管道

1. 取消刪除

如果是自己不小心誤刪的話，那麼隨時可以救回，先登入帳號、進入 Blogger 後台網址：

https://www.blogger.com/home

可看到類似以下畫面：

按下紅框的「取消刪除」即可救回網誌。

2. 檢查 email 通知

可參考這個案例「網站被無故Blogger刪除，目前已恢復！」，前面「一、網址被刪除的情形及原因」提到的各種違反規定、或系統誤判的情形，都會寄出 email 通知，因此請到自己的信箱找找(最好連垃圾信箱也找找)，應可找到通知信函，按照官方的指示處理或進行改善，應該就能救回網站了。

3. Blogger 官方論壇

以上方法都無效時，只好依照「我的網誌不見了」最下方的指示，前往 Blogger 官方論壇求救：

https://productforums.google.com/forum/#!forum/blogger

只不過，要在國外論壇求救，需要有點英文底子，且發言必須精確、詳細扼要，獲救的機率才會比較大。發問的要點與技巧可參考這篇「Blogger 提問注意事項」。

三、案例分析

本篇開頭提到的「Blogger 中文社群討論串」案例，看起來情況比以上官方提供的各種可能性還複雜，因此作個案分析。

協助案主前往 Blogger 官方論壇求救後，該討論串的網址如下：

https://productforums.google.com/forum/#!topicsearchin/blogger/pennyanita/blogger/XoTA5aPxnFI

從他們的對話分析，除了必須先檢查「一、網址被刪除的情形及原因」及「二、可能的解決方法及管道」的可能性，其他可能的情形為：

是否網誌有共筆的其他管理員，而被其他管理員刪除網誌？
是否網誌使用了其他帳號來當管理員，而不小心用其他帳號了刪除網誌？

在以上兩種狀況之下，若我們的網誌被刪除了，是不會收到官方 email 通知的。

WFU 做了一個實驗，若是網誌被共同管理員刪除，由於我們還是管理員的身份，那麼在後台還是能看到「取消刪除」這顆按鈕。所以這個案例可排除以上可能性。

那麼什麼情況下，網誌被刪除後，既沒有官方 email 通知，也不會有「取消刪除」按鈕呢？我猜測這個案例最接近以下的情形：

如果某 A 帳號密碼外洩、或是被某 B 猜到，當某 A 帳號被某 B入侵後，某 B 可以另外設定自己的帳號為管理員，然後將某 A 管理員的身份移除，最後刪除某 A 的網誌，那麼某 A 後台就不會出現「取消刪除」按鈕，也不會收到網誌刪除的 email 通知了。

簡單說就是「被盜帳號了」。以上流程 WFU 也另外做了第二個實驗，的確會發生這樣的情況，因此該個案很有可能是如此。在這種情況下我們能做的，大概只剩下這個流程了：

為了避免 Google 帳號被盜用，官方提供了帳號最近一個月內登入的詳細紀錄，方法及流程請參考「檢查 Google 帳號是否被盜用﹍查詢最近登入的 IP 紀錄」 → 找找有沒有被異常 IP 登入的紀錄 → 如果有的話，截個圖，「Blogger 後台網址」右下角有個「意見回饋」，把你的狀況跟證據詳細描述，證明你的 Blogger 帳號被入侵、網誌被惡意移除，看看官方會不會受理、幫忙恢復了。

四、未雨綢繆之道

從本文的案例可以歸納出，Blogger 網誌被官方無預警刪除時，無論是何種原因，都有申訴機會、或救回機制；但若是帳號密碼不小心被盜，而導致網誌被刪除，要救回就困難重重了。

那麼，杜絕帳號被盜的危機，算是最重要的一點，以下整理幾點關於避免「網誌被無預警刪除」，我們能做的預防措施，部分引用自「檢查 Google 帳號是否被盜用」：

1. 使用兩階段驗證

啟用 Google 帳號兩步驟驗證，可保證帳號不被入侵。可參考「官網說明」，或是這篇「開啟 Google 兩步驟驗證，避免帳號密碼被盜用！」

2. 密碼設定模式及電腦使用習慣

除了兩階段驗證，要保護密碼安全，還得具備良好的密碼設定習慣、及電腦正確的使用觀念。根據官方提供的說明「維護帳戶的安全性」，比較重要的觀念有：

檢查病毒和惡意軟體：電腦需要注意防毒，避免密碼被惡意軟體側錄，導致帳號被盜。
更新作業系統與瀏覽器：避免舊版的瀏覽器、作業系統有漏漏，導致被入侵。
不要在其他網站上使用與「Google 帳戶」相同的密碼：一個密碼被破解，導致所有密碼都被破解。
小心釣魚網站：注意網址細節，避免被魚目混珠的釣魚網站假冒官網，騙走我們的密碼。
公用電腦：不要在不信任的電腦輸入帳號密碼，以免被側錄。

3. 備份 Blogger 範本及文章

由於本文的案例，案主最後從 IP 也查不到異常現象，除了離奇、也令人恐慌，誰都不願意部落格一夕之間消失。因此最終的預防之道，必須注意 Blogger 範本及網誌所有文章的備份。

備份 Blogger 範本的技巧，請參考這篇「修改 Blogger 範本的觀念 (1)備份範本的訣竅」，建立版本控制，才是有效備份範本之道。

除了備份範本，部落格最重要的資產就是文章內容。備份 Blogger 文章最佳的方法，就是讓整個流程能自動執行，請參考這篇「部落格文章如何全自動備份__IFTTT 應用」。

瞭解備份範本及部落格文章的技巧後，萬一網誌發生任何不測，都可隨時將內容恢復，可無後顧之憂。不過仍建議養成「2. 密碼設定模式及電腦使用習慣」，是保護所有其他數位資料的根本方法。

Blogger 相關文章：

CSS tooltip 系列文前兩篇「安裝懶人包」及「疑難雜症排除」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN 提出了「CSS tooltip 能否顯示圖片」的問題，答案雖然是可以，但很麻煩，且需要考量的因素不少。

+Mark X 在前一篇留言的觀點很正確：「網頁物件的設計應該建立主從關係；而 Tooltip 就是屬於附屬的效果。」一般來說，圖片是可以抓住訪客目光的標的物，絕大多數情況下，應該將其設計為主要內容，而非隱藏在 tooltip 之中。而且行動裝置無法實現滑鼠 hover 效果，所以 CSS tooltip 是個只能在網頁展現的效果。如果真要在提示框之中安插圖片，必須要有很好的理由，證明這圖片不是必要內容、以輔助的作用為主，沒被訪客看到也影響不大。

因此，本篇的主題改為討論，哪些情境適合「tooltip + 圖片」的應用，以下提出一些案例參考，並說明語法如何實現。

一、tooltip + 圖片的應用

1. 家樂福官網：預覽標題內容


家樂福官網：http://www.carrefour.com.tw/

進入官網，滑鼠移到上方導覽列後，可預覽這個項目的內容及預覽圖片。如下圖，這是移到「家樂福生活」後的畫面，紅框為提示訊息中的圖片：

左側的導覽列一樣有預覽訊息，如下圖，這是移到「電腦/3C」後的畫面，紅框為提示訊息中的圖片：

雖然以上效果並非 CSS tooltip，不過這些範例代表一種可能的應用方式，當導覽列的文字項目敘述，無法讓訪客瞭解細節、無法決定是否前往這個項目時，「CSS toolip + 圖片 + 文字敘述」可以做出更完整的說明。

2. AT&T 官網：預覽輪播圖片內容


AT&T 官網：http://www.att.com/

「AT&T」是目前行動電話服務供應商的世界龍頭，其官網首頁有個輪播圖片設計的很好，請見下圖：

一般輪播圖片設計的索引圓圈，訪客像是玩刮刮樂，不曉得點下去會出現什麼，所以也懶得點。而 AT&T 的五個輪播索引小圓圈，當滑鼠移到對應的圓圈時，就會出現該輪播項目的縮圖及說明文字。就像上圖移到第三個小圓圈，便立即出現這個項目的縮圖及說明文字，加快了訪客決定要點選那個輪播項目的時間。

二、CSS 語法說明

看完以上的範例，在設計上「tooltip + 圖片」的應用其實還不錯，只是用 CSS 實現不是最佳解，以下來說明 CSS 的語法。首先必須先瞭解「簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除」→「二、使用 data-title 屬性 + 換行語法」的內容。

1. 修改 tooltip 內容

CSS tooltip 提示框出現的內容，是由 T 行參數 content 的內容決定的。先利用偽類 :before產生 tooltip 區塊，接著設定這個區塊的內容 content：

content: attr(data-title);

從該行內容可看出，tooltip 的內容是抓取該區塊 data-title所存放的內容。如果要改為顯示圖片，那麼必須將以上內容改為：

content: url(圖片網址);

括弧中的圖片網址就是代表填入 http 開頭的網址字串。實際操作一遍就會發現，這麼改的結果，會讓所有套用 tooltip 的區塊一律顯示同一張圖片，覆蓋掉原本每個區塊各自抓取 data-title來顯示的內容。

2. tooltip 含圖片+文字

如果要讓 content 的內容可同時顯示圖片及文字，可參考「content 使用說明」，合併各種參數使用，例如以下的語法可同時顯示字串、圖片、data-title內容：

content: "先顯示圖片" url(圖片網址) "再顯示文字" attr(data-title);

如果每個 tooltip 想要顯示不同的圖片，那麼工程將會非常浩大，每個單獨 tooltip 得設定個別的 class 或 id，這些個別的 class 或 id 得各自設定 CSS、設定 tooltip 要顯示的圖片網址。

由於操作麻煩、實用價值不高，就不特別列出完整語法了，想測試的話，經由以上說明應可自行實作出來。

三、用 Javascript 實現「tooltip + 圖片」

在 CSS3 沒有新的參數語法出現之前，要實現「tooltip + 圖片」最方便的方法還是得藉由 js。以「自定義 Title 提示樣式開啟網頁裡的馬卡龍」→「文字提示安裝方法」為例，請按照該篇步驟，依序進行 CSS、jQuery 的安裝，接著將原本的 js 語法改為以下，可將圖片加入 tooltip：

<script>
$(function() {
$("a,img,button").each(function(e) {
if (this.title) {
var t = this.title;
var src = $(this).attr("data-src");
var x = 30;
var y = -45;
$(this).mouseover(function(e) {
this.title = "";
$("body").append("<div id='tooltip'><img src='" + src + "'/></div>");
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px",
opacity: "0.8"
}).fadeIn("slow", "swing")
}).mouseout(function() {
this.title = t;
$("#tooltip").remove()
}).mousemove(function(e) {
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px"
})
})
}
});
});
</script>

以上程式碼沒有配合本篇的主題進行優化，純粹 DEMO 之用。紅字的部分為修改 mark 原始碼的內容。藍字的參數可調整 tooltip 的 X、Y 軸距離，以及透明度。

<a href="http://www.wfublog.com/" data-src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s100/wfublog-logo-8abeb7.png" title="WFU BLOG">WFU BLOG</a>

最後是要顯示「tooltip + 圖片」的 HTML 碼，例如下面這個展示效果用的按鈕，滑鼠移過去可看到效果。可參考以上的 HTML 碼來修改，紅色字串可改為自訂的圖片網址，其他字串請自行修改：

四、文章列表的應用

使用 js 的威力在於可批次處理，例如「文章列表__依日期排列」，在取得資料的過程就能拿到縮圖網址，如果配合以上的 js 碼，就能輕鬆做出「滑鼠移到文章標題時，tooltip 顯示文章縮圖」這樣的效果。

由於本站屬於教學性質，就算文章標題配上縮圖也不一定效果比較好，所以就沒另外弄範例了。不過如果是「美食、旅遊、攝影」等性質的文章列表，或許「文章列表 + tooltip + 圖片」就是個可以嘗試的構想了，相信預覽圖片的美味食物、壯麗景觀可大大增加訪客點擊的誘因。

有了本文的這些範例，希望能拋磚引玉，讓讀者對於 tooltip 的設計有更多應用與延伸。

CSS tooltip 系列文章：

過去 Blogger 要提交網站地圖到「Google / Bing 網站管理員」時，其實有點小小的麻煩，因為 Blogger 提供的兩種格式 Atom/Rss，無法儲存太多資料，一個 sitemap 網址最多能存放 500 篇文章，超過時只能手動分開提交。

現在 Blogger 提供了一勞永逸的方法，無論部落格有多少文章，就算有數千、甚至上萬篇，都只需要提交一次網站地圖就好，不必再為這件事操心，無論是否自訂網域都適用。

一、Blogger 舊版網站地圖

1. Sitemap 格式

有提交過網站地圖的站長，應該都知道 Blogger 提交的格式長的類似像這樣：

 RSS：http://www.wfublog.com/rss.xml
 ATOM：http://www.wfublog.com/atom.xml?redirect=false&start-index=1&max-results=500

將以上 www.wfublog.com 置換成自己的網址即可看到內容。分別說明一下以上格式──

RSS：根據以上網址格式，只能儲存最新的 25篇文章
ATOM：根據以上的網址格式，會儲存最新的 500篇文章；當文章超過此數目時，必須提交另一個網址，例如將參數改為 start-index=501&max-results=500，代表第 501 ~ 1000 篇的文章，其餘以此類推。

2. 索引更新原理

Sitemap 網址之中，每篇文章的資料之中包含一個標記，註記該篇文章的更新日期、時間。例如 RSS 的標記為 <pubDate>，ATOM 的標記為 <updated>。

只要有文章更新過內容，Sitemap 之中該篇文章就會更新這個標記，記錄最後的更新時間。搜尋引擎蜘蛛定期爬 Sitemap 發現這件事後，就會去重新索引該篇文章，讓搜尋結果保有最新的資料。

3. 無法更新的文章

瞭解以上原理後，我們可以知道：

RSS：根據前面的網址格式，只有最新的 25 篇文章，當文章內容修改過時，搜尋引擎才會知道、並過來更新。每當網站有新的文章，從第 26 篇起，搜尋引擎就比較難發現文章的更新狀態。

ATOM：依上述網址格式，最新的 500 篇文章會持續更新。不過只要勤勞一點，分批將所有文章都提交出去，搜尋引擎就能知道所有文章的更新狀態。

補充說明一下，RSS 的 sitemap 網址後面，加上跟 ATOM 一樣的參數 (?redirect=false&start-index=1&max-results=500)，就可有一樣的效果。

二、Blogger 新版網站地圖

1. 一般網站

根據這篇「XML Sitemap for Blogger」，Blogger 在 2013 中提供了新的網站地圖格式：

http://wayne-fu.blogspot.com/sitemap.xml

在網址後面加上 "sitemap.xml" 就是可以提交的新格式。這個網址格式的特點如下：

包含網站的所有文章更新狀況，無論多少篇都能處理。
提交網站地圖時只需一次即可，每超過 500 篇也不再需要分批提交，是一勞永逸的方法。
實際上 sitemap.xml 一次最多只能存放 1000 篇文章，但超過 1000 篇後，內容會自動化處理，sitemap.xml 自動成為索引檔。

來看一下實例，這是 Google 官方網站的 sitemap 網址：

http://googleblog.blogspot.tw/sitemap.xml

實際上 Google 官網有數千篇文章，但 sitemap 的內容卻不多：

<?xml version='1.0' encoding='UTF-8'?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>http://googleblog.blogspot.com/sitemap.xml?page=1</loc></sitemap><sitemap><loc>http://googleblog.blogspot.com/sitemap.xml?page=2</loc></sitemap><sitemap><loc>http://googleblog.blogspot.com/sitemap.xml?page=3</loc></sitemap><sitemap><loc>http://googleblog.blogspot.com/sitemap.xml?page=4</loc></sitemap><sitemap><loc>http://googleblog.blogspot.com/sitemap.xml?page=5</loc></sitemap></sitemapindex>

原來這個索引網頁記錄了 sitemap 的分頁資訊，如此搜尋引擎就可從這個 sitemap 網址的索引資料，繼續爬第 1 頁到第 5 頁的內容。這個機制很聰明，不必再像 ATOM 一樣，得手動另外提交超過 500 篇的頁面。

2. 自訂網域

這麼棒的 sitemap 格式，其實一開始只適用 blogspot.com 網域的 Blogger，也就是說「自訂網域」的 Blogger 不支援。不過原文提到，最近 2014 年底，這個功能已經悄悄支援所有 Blogger了，例如本站就能提交以下的網址：

http://www.wfublog.com/sitemap.xml

因此，如果你使用 Blogger 自訂網域的話，現在可以開始提交 sitemap.xml 這個格式了。

三、不同網站地圖格式的特點

1. 官方建議

然而提交 sitemap 之前，需要瞭解一下 Google 官方說明「Best practices for XML sitemaps & RSS/Atom feeds」：

1.「sitemap.xml」的內容比較多(全部)；「ATOM/RSS」較少，只列出最近更新的文章

2. 「sitemap.xml」更新頻率比較慢；「ATOM/RSS」更新的速度比較快

因此官方建議提交網站地圖時，兩種都一起提交，才能確保「網站所有文章都被索引」，以及「讓搜尋引擎以最快速度索引」。

2. 最方便的搭配

根據以上的結論，WFU 認為提交網站地圖時，這是較佳的組合：


http://www.wfublog.com/sitemap.xml

http://www.wfublog.com/atom.xml?redirect=false&start-index=1&max-results=500

以上 www.wfublog.com 置換成自己的網址即可。

提交兩組網站地圖的意思是：

提交 sitemap.xml 可確保所有文章都被收錄
提交 ATOM 的 1~500 篇文章，可確保最新的文章能以最快速度被收錄，第 1~500 篇文章有更新時能被搜尋引擎快速知道。
ATOM 從 501 篇之後的文章可不必提交，因為 sitemap.xml 已經有這些資料，只是更新頻率稍微慢一些而已。
可省去以後操作的麻煩，也就是說網站地圖只需提交這麼一次即可。

3. 補充說明

以上官方文章提到一件事 "submitting sitemaps or feeds does not guarantee the indexing of those URLs." → 不保證提交的文章都會被搜尋引擎索引。

這是因為 Google 會另外審核文章，如果是重複、不當、垃圾、版權內容等等，可能就不會被收錄了。

四、提交網站地圖

最後是提交的步驟，如果不熟悉的話，可參考這篇「Blogger 部落格提交網站地圖」，分別向兩大搜尋引擎「Google 網站管理員」以及「Bing 網站管理員」提交即可。如果需要向別的地區提交、來增加文章的能見度，也可參考該篇文章進行。

更多 Blogger 相關主題：

前陣子剛發生「Blogger 網站消失」的事件，現在又有讀者於「Blogger 批次修改標籤的方法」留言 #12 表示 "有什麼方式能救回來誤刪的文章?"。相對之下，雖然「網誌」被誤刪聽起來比較嚴重，但「文章」被誤刪的話，可能比網誌更難救，因為「網誌」被刪有種種管道能夠救回，而「文章」誤刪要救回的話，就得靠些運氣了。

跟網誌誤刪的事件一樣，Blogger 使用者都該拿這類案例當借鏡，除了瞭解救回的技巧、善後的措施，更重要的是養成事先預防的觀念與習慣，那麼就算意外發生也不至於太緊張。

一、Blogger 文章被刪除的原因

Blogger 文章要誤刪說實在不太容易，會發生這類狀況多半是操作不小心、或判斷錯誤。只是意外總是難免，大概歸納一下可能的狀況：

1. 被官方刪除：第一種狀況倒不是誤刪，而是文章內容有問題，例如版權、成人內容等等因素，或是被檢舉，導致官方刪除，詳細狀況可參考「Blogger 網誌被刪除案例分析」→「一、網址被刪除的情形及原因」。被官方刪除的文章可能會收到通知，有上訴的機會。WFU 就曾經「檢舉 Blogger 盜文」，讓對方的文章下架。

2. 自己刪除：除了自己誤刪，也有些時候是自認該篇文章已經不需要而刪除，但過了一段時間發現誤判，結果後悔也來不及了。總之這些狀況，多數是在自己的意志下所做的刪除指令，無法將責任撇開。

3. 竟然被刪除：這樣奇特的案例發生在本文開頭提到的苦主，算是非戰之罪，責任該歸咎在設計不良的 Blogger 頭上。只要你有使用過「批次修改標籤」的功能，且曾拿這功能來刪除文章，就有可能遇上這類鳥事。建議讀者詳讀這篇文章提到的 bug，以免將來成為受害者。

二、救回 Blogger 誤刪的文章

本文開頭提過，「Blogger 文章」誤刪要救回的話，得靠些運氣，這代表不是所有文章都救得回，因此以下的技巧算是盡人事，結果如何得要聽天命。

1. 取得 PostID

根據「Recovering A Deleted Page Or Post」，Blogger 官方宣稱不會提供「復原誤刪文章」的服務，因此我們只能自力救濟。根據該文，以下是取回誤刪文章的密技。

每篇 Blogger 文章都有獨一無二的 PostID 代號，唯有找出 PostID，才有辦法完整取回文章內容。然而，文章被刪除後，整個網路還能存有 PostID 的地方，大概只剩下搜尋引擎的庫存頁面了。

如果英文原文看得懂得話，可參照該篇的原理及內容操作。習慣看中文的話，可參考這篇「如何救回Blogger誤刪文章」的圖文步驟。

另外這篇「不小心誤刪 blog 文之後的救援方法」提供了按照 Blogger 發文月份來 google 誤刪文章的技巧，還滿實用的。

2. Blogger App

這篇「誤刪Google blogger文章」提供的經驗也不錯，因為他使用了 Blogger app，算是有另一個備份的來源，而得以取回被刪除的文章。不過我相信使用 Blogger app 的人不多，因此能從這個方法獲救的機率很低。

3. RSS 閱讀器

前兩個方法可取得誤刪文章的「原始 HTML 內容」，用來恢復文章內容比較方便。如果都失敗時，只好冀望於其他的備份管道了。

如果你有訂閱自己部落格 RSS 的話那麼最好，從自己的 RSS 閱讀器即可取回文章備份的內容，重新再發一篇便是。如果沒訂閱自己部落格的話，也許需要跟自己的讀者求救，看看有沒有讀者或粉絲訂閱了自己的網站 RSS，跟他們索取文章備份了。

三、無法救回的情形

1. 必須提醒的是，不是每篇誤刪文章 Google 搜尋引擎都保存著庫存頁面，因此文章誤刪之後，想要復原的話動作要快，得趁庫存頁面還沒消失之前進行。

2. 而就算搜尋引擎還保存著庫存頁面，Blogger 後台資料庫也不一定還保存著這篇誤刪文章的內容，過了一定的時間之後這篇文章也是會從資料庫中消失，總之一句話 → 手腳要快。

3. Blogger 網誌必須設定為公開，搜尋引擎才可能爬取，進而保有頁面庫存資料。所以如果你的網誌非公開，那麼誤刪文章就無法循此管道救回了。

四、處理善後技巧

1. 救回文章無法發佈

經由前面「二、救回 Blogger 誤刪的文章」→「1. 取得 PostID」→ 在後台文章編輯器，經由修改網址而救回的文章內容，如果想直接按下「發佈」，那麼就會出現以下錯誤訊息：

因為這個方法是藉由修改網址，騙 Blogger 說這篇文章還存在，進而取得資料庫中暫存的內容。等到我們按下「發佈」，Blogger 就會發現他被耍了，根本沒有這篇文章(PostID 已經不存在)，所以就出現錯誤訊息了。

因此使用這個方法取得文章內容後，必須新開一篇文章，重新發佈新文章才行。然而，這又會帶來新的問題，有這些情況需要善後：

新文章的網址將跟原文章網址不同
原文章的所有外部連結、內部連結都將指向不存在的網址
經由搜尋引擎帶來的訪客，訪問原文章網址時一樣指向不存在的網址

2. 修改文章網址

為了解決上述問題，必須想辦法將新文章的網址，修改成跟舊文章一模一樣才行。請參考「Blogger 自訂文章網址的要訣」：

先參考「二、日期和時間」→ 將新文章的發佈日期設定的跟原文章一模一樣，這樣網址結構的年份及月份才會一致
再參考「三、永久連結」→ 使用「自訂網址」，將文章網址的字串設定的跟原文章一模一樣

經過以上處理後，新文章跟舊文章的網址一致，網站就不會出現 404 錯誤，內部連結、外部連結、搜尋引擎都能導向正確的網址了。

3. 文章救不回的善後

萬一做了所有的努力，文章還是沒救回來，那麼就會面臨上述提到的網站 404 錯誤，內部連結、外部連結、搜尋引擎會導向誤刪文章的錯誤網址。最直接的影響就是，訪客看到 404 錯誤訊息，對網站印象扣分，然後拍拍屁股走人。

為了避免訪客的流失，每個網站都有必要規劃自己的 404 頁面，請參考這兩篇「404 錯誤頁面的友善設計__(1) 安裝 Google 自訂搜尋」、「(2) 提供最佳建議網址」。

這件事除了形象因素，能留住訪客的 404 設計機制才是最重要的考量。

五、未雨綢繆之道

雖是老生常談，不過這的確是所有站長都需要重視的一塊，做好網站備份的動作，把 SOP 規範好，任何意外發生都不會驚慌失措。以下都是 WFU 關於備份的例行公事：

1. 範本

備份 Blogger 範本的技巧，請參考這篇「修改 Blogger 範本的觀念 (1)備份範本的訣竅」，建立版本控制，才是有效備份範本之道。

2. Email

這是「FeedBurner」的系列文教學，Feedburner 提供讀者用 email 訂閱文章的功能，別忘了自己也用 email 訂閱一份，除了可測試訂閱功能是否正常，也算是用 email 留一份備份(反正 Gmail 空間根本不用錢似的)。

3. Feedly

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

4. IFTTT

備份 Blogger 文章最佳的方法，就是讓整個流程能自動執行，且可保存文章原始的 HTML 碼，請參考這篇「部落格文章如何全自動備份__IFTTT 應用」。

建構好部落格範本及文章的備份機制後，無論是網誌或文章發生了意外，我們都能從容以對。

更多 Blogger 相關主題：

Dropbox 算是雲端備份工具的龍頭，除了基本的同步功能，現在還能外連檔案、架設網站。他自身的功能已經夠強悍，再搭配各種第三方外掛，應用層面真的非常廣。

本篇要介紹的是 WFU 一直在使用的外掛「Send to dropbox」，主要用途為利用 Email 傳送內容或檔案到 Dropbox，這樣的功能有哪些應用方式或情境呢？請看以下的介紹。

一、Dropbox 及 Send to dropbox 介紹

1. Dropbox 介紹

如果對 Dropbox 不熟悉的話，可參考「Dropbox 操作、同步 26 招」，有非常多實用的技巧。

2. Send to dropbox 安裝


官方網站：https://sendtodropbox.com/
註冊教學：鄭澤鑫博客

官網是英文介面，由於目前繁體中文的 Step by Step 教學多半是舊版畫面，跟官網畫面兜不起來。附上的教學頁面雖是簡體網站，不過架構倒是簡潔大氣。

3. 使用情境

什麼情況下需要用 email 傳檔到 dropbox 呢？以下引述「高登工作室」的部分內容：

別人要給你檔案但是對方又沒有Dropbox帳號
你自己上班的地方不能用Dropbox
在別人的地方突然有檔案要傳到Dropbox的空間，但是又怕對方的電腦不安全不敢在那裡登入Dropbox帳號

只要在郵件中夾送附檔，使用 Send to Dropbox 後，就能將多個檔案一次傳送到 Dropbox，這也是最廣泛、最實用的功能了。而 Send to Dropbox 的優點是，即使是免費版，並沒有限制傳送檔案的次數，怎麼拼命傳都沒關係(不過郵件伺服器本身會限制夾送的檔案大小就是了)。

大部分情況下，這個工具提供了「別人傳送檔案給我們」的捷徑，屬於單一用途。除此之外，若搭配其他工具，則又可以有許多複合式的用途。

二、轉換檔案格式

Send to Dropbox 可以針對傳送的 email 內容，設定儲存為 .txt 或 .html 檔，這算是一個很棒的特點。前面的教學連結，原作者就是為了這件事才找到 Send to dropbox 這個外掛。

行動裝置能開啟的檔案類型不多(沒裝各種 app 的話)，如果能將內容轉成 .txt 或 .html，那麼可方便在行動裝置閱讀。

而 WFU 長期使用 Send to dropbox 的原因是，將訂閱的 RSS 內容、需要稍後閱讀的長篇文章或外文，轉成適合「Kindle DX」能讀取的格式。

Kindle DX 螢幕尺寸大、不反光、適合長時間閱讀，但就是能讀取的檔案格式少。有了 Send to dropbox 後，RSS → Dropbox 這個流程得以方便的實現。

三、搭配 IFTTT

雖然使用「IFTTT」，可直接將 RSS 內容同步到 Dropbox，但如此設定的話，RSS 內容沒有經過處理，直接同步到 Dropbox 後，產生的 txt 檔格式是慘不忍睹的。

因此我們可以利用 IFTTT，設定 RSS 同步到 Gmail，然後 IFTTT 會問 Gmail 要寄到哪裡，此時填上 Send to dropbox 產生的 email 地址即可。經由這個流程會將 RSS 轉出一個 .html 檔，自動存放到 Dropbox，最後這個 .html 就是適合閱讀的檔案了。

除此之外，IFTTT 可以搭配同步的服務太多，如何運用 Send to dropbox 也請讀者發揮想像力。

四、搭配 Evernote

這是我認為很不錯的一個應用，Send to dropbox 搭配 Evernote 後，可以自動儲存網頁的圖文內容到我們的硬碟，達成實體備份的效果。

前陣子發生了「誤刪部落格文章」以及「部落格被刪除」事件，網站內容備份是每個站長都必須看重的事。之前提出的方案為「利用 IFTTT 同步網誌內容」，可以備份文章內容，不過圖片就無法儲存了。

這陣子思索網站如何備份圖片的解決方案，最終找到了 Send to dropbox 搭配 Evernote 的方法，可以完美解決這個問題。

請參考「Evernote 10 個操作技巧」→「09. 自動同步硬碟裡的重要資料夾文件」，這個功能可以監控指定的資料夾，如果裡面出現 .html 檔，Evernote 會自動將這個 .html 檔的圖文內容下載、並存進 Evernote！！

接下來可以利用網站提供的「Email 訂閱 RSS」功能，用 Send to dropbox 產生的 email，來訂閱 RSS，再設定 Evernote 監控 Dropbox 的資料夾，如此每當網站有了新文章，會自動啟動這個流程，新文章的圖文內容也會自動存進 Evernote，達成自動化備份流程。不只這樣，除了備份自己網站的內容，想要收藏其他網站的內容，一樣可利用這套流程，將喜愛的網站內容打包回家。

由於篇幅的關係，本篇著重在概念說明，熟悉這些雲端工具的讀者應該操作上沒問題。而需要流程操作的讀者，下一篇再做比較詳細的說明。

五、補充說明

在 Send to Dropbox 的設定之中，有一點需要補充──

請見上圖，這個畫面可以設定檔案儲存到 Dropbox 時，資料夾的命名格式：

"Attachments" 不能變更，是預設會產生的根資料夾名稱。
"Filename" 就是檔名，這也不能變更，會自動產生。
"Attachments" 與 "Filename" 之間，如果不需要任何子資料夾，則可留空。但不建議這麼做，因為會造成日後檔案分類困難。
左邊 "Available attributes" 有四個項目，可充當子資料夾的名稱。
圖中是 WFU 採用的方式，將 "From Address" 拉過來當子資料夾名稱，這麼做的好處是，如果從 A 郵件地址寄到 send to dropbox，檔案路徑會是這樣：「Dropbox\應用程式\Attachments\A 郵件地址\檔案名稱」。
如果從 B 郵件地址寄到 send to dropbox，上述路徑的 "A 郵件地址" 就會換成 "B 郵件地址"。

經由這樣設定之後，例如操作 Evernote 時，要設定監控的資料夾就很明確，不會將不相干的檔案同步到 Evernote 了。

更多 Evernote 相關文章：

如果有注意 Blogger 官方留言數量這件事的站長，大概會發現，官方預設的提示字串不太合語意，看起來怪怪的。

當文章沒有留言時，首頁提示的字串顯示為「沒有留言：」，多個冒號不知何意，且不管有幾則留言都會出現這個冒號。還有，一般會比較習慣看到 "數字"，而不是看到 "沒有" 這樣的字串。除此之外，如果能夠自訂提示字串就更好了。

最近處理到一個案子提出本文的需求，開頭的示意圖來自「素醬媽蔬食廚房」，圖中紅框的部分為修改後的效果，以下為修改的過程記錄。

一、各處的留言提示字串

1. 首頁、標籤頁面

在首頁、標籤、或索引頁面(名詞解釋請參考「Blogger 七種頁面形態判斷語法詳解」)，沒有留言時的字串效果大致如下：

有留言時的字串效果大致如下：

2. 留言區塊

在文章頁面，沒有留言時的字串效果大致如下圖紅框：

現在可以瞭解為何會有 "冒號" 了，原來是 Blogger 偷懶，在首頁、標籤、索引頁面，直接拿留言區塊的字串去套用，才會出現這個不搭嘎的冒號。

3. Javascript 修改

知道原理後就容易改，在範本之中找到了以下字串，這字串會出現三次，字串最後面的字元都是冒號：

<data:post.commentLabelFull/>:
冒號之前的 Blogger 標記語言，會根據不同數量的留言，產生對應的字串。直覺上使用 js 的 parseInt() 函數來處理，有留言時的字串就能轉換為數字，沒有留言的字串 parseInt() 會拋出 "NaN" (非數字)。

這件事用 js 來處理很簡單，只是有點不太舒服就是了，原因可參考「優化網站效能該注意哪些事? (1)最關鍵的考量因素」，網頁能使用越少的 js 越好。

好消息是，最後還是找到了不用 js 就能處理的方法，請見接下來的步驟。

二、首頁、標籤頁面

1. 在修改範本之前，如果是第一次來訪的讀者，建議先閱讀「備份範本的訣竅」系列文章。

2. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 <data:post.commentLabelFull/>這個字串，會有三個結果，如果這個字串的前後長的類似以下這樣，就是「首頁、標籤頁面」留言提示字串程式碼：

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>

接著將以上字串改為以下自訂格式：

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
留言 (<data:post.numComments/>)
</a>

紅色的字串是 Blogger 的標記語言，代表留言數量
藍色的字串請自由發揮，可改為任意的自訂字串形式

三、留言區塊

接下來修改留言區塊的留言提示字串程式碼，在範本中找到的另外兩個 <data:post.commentLabelFull/> 搜尋結果，前後大致長的類似以下這樣：

<h4>
<data:post.commentLabelFull/>:
</h4>

接著將以上字串改為以下自訂格式：

<h4>
留言 (<data:post.numComments/>)
</h4>

紅色的字串如前所述，代表留言數量
藍色的字串請自由發揮，可改為任意的自訂字串形式

存檔後即可看到效果。

既然能修改為字串，當然也可替換為圖案。上圖為本站使用的效果，如圖中紅框，可使用代表留言的 logo，後面的數字就是留言數量。「二、首頁、標籤頁面」這部分的修改，只要將藍色字串的內容，改為圖片語法 <img src="圖片網址"/>，就能達到這樣的效果了。

Blogger 留言相關文章：

(Pic from: awesomelytechie.com)有讀者詢問「看了好多的SEO教學文章，為何我網站的文章 Google 引擎還是難以搜尋到？」，這樣的情況通常出現在新網站，而使用 Google 網站管理員，就能檢視搜尋引擎的索引狀況。另外一個常見的問題是「如何讓文章搜尋排名比較前面？」，這件事的確不容易，不過若熟悉網站管理員的操作，對於搜尋排名的提升是有一定幫助的。

雖然 Google 網站管理員的功能很強大，然而對於多數只想專心寫文章的站長而言，要跟這個工具交朋友可能不太容易，除了操作方式、介面、圖表看起來複雜，還有一堆網路名詞等待理解，似乎有點門檻存在。

其實 Google 網站管理員只需要挑重要、用得到的部分來熟悉就好，不常用的都不碰也沒關係。為了使人人都能對這麼好的工具上手，本篇公布 WFU 的每月例行公事，跟著我做這些動作，你也可以把網站管理得很好。

一、準備動作

雖然要介紹 Google 網站管理員最常用的功能，不過還是先提供一些基礎資訊及網站必須先進行的動作。

1. 網站登錄


官方網站：https://www.google.com/webmasters/

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

2. 提交網站地圖

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

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

3. 手動提交文章網址

提交網站地圖後，Google 搜尋引擎就會根據每個網站的權重，排定時間派出機器人來爬我們的網站。對於新網站而言，要等到機器人光臨的時間可能比較久，Google 總是得先服務比較大咖的網站啊！

不過等不及的話，我們也是可以手動進行提交，可參考這篇「Google對新成立網站的SEO建議」→「三、使用Googlebot模擬搜索引擎的索引」，這裡提到網站管理員裡面有個 "Google 模擬器" 的項目，能夠手動提交個別文章的網址，讓搜尋引擎比較快收錄，不過每天有一定數量的限制就是了。

二、處理檢索錯誤

WFU 會定期巡視的項目，最重要的一件就是進入官網、登入自己網站後的第一個畫面：

這裡會記錄讀者拜訪我們網站時，他到達的地址門牌號碼(文章網址)，有哪些是錯誤的，好讓我們進行更正。上圖可看出，至少有 17 次訪客找不到他要去的地方(當然，其中也包含了機器人)。

為了獲取進一步的資訊，請按「檢索錯誤」這個按鈕進入。

這個畫面記錄了各式各樣奇怪的錯誤地址，其中我們無法理解的字串格式，大概就是機器人、自動採集內容網站的行蹤。而其他錯誤的資訊，我們就得找出「為何訪客會有這個錯誤資訊」、「他的資訊從何而來」？

以上圖為例，我們進入紅框的這個項目看看是怎麼回事。

點擊「連結來源」，就可知道這個錯誤連結是從那個網址產生的。如果是外部連結，或許你可以聯絡該網站請求更正，不過這樣的動作是做不完的，WFU 有更好的作法，後面會說明。

結果上圖發現，這個錯誤連結竟然是自己造成的，因為這正是 WFU BLOG 的「DEMO 網站」的某篇文章，居然把網址結尾打成 ".htmll" 多了一個 "l"，害訪客找不到主人家在哪，趕緊前往這個網址調查案發現場。

到了 DEMO 網站，對著該篇文章按右鍵檢視網頁原始碼，果然看到有一行含錯誤的網址字串 ".htmll"，趕緊編輯文章把錯誤修正。

然後再回到前一張圖的畫面，按下「標示為已修復」，處理掉這個案子。

三、處理外部連結錯誤

使用 Google 網站管理員最重要的任務便是處理各種內部、外部的錯誤連結，以免客人找不到聯絡地址而跑掉。前面「二、處理檢索錯誤」說明了處理內部連結的步驟，接下來提供處理外部錯誤連結的密技。

再看一次這張圖，裡面其實只有紅框的那一個是錯誤的內部連結，其他都是外部連結、或機器人、或不知名原因所引起的錯誤。處理外部連結是曠日廢時的工作，但上圖那些連到我們網站的錯誤連結怎麼辦呢？

一般訪客看到網站產生錯誤頁面，通常不知道下一步要做什麼，就會轉身離開。而 WFU 開發了這個「404 錯誤頁面的友善設計」工具，安裝之後，如果偵測到網站有錯誤連結，會自動計算出最接近的網址，也就是最有可能的那篇文章，推薦給訪客參考。

就算網址字串很離譜、導致無法產生計算結果，這個錯誤頁面也可提供一些類似網站地圖的連結，以及一個搜尋框讓訪客搜尋，增加訪客留在網站的機會。有了這樣的自動化機制，我們就可省下處理外部錯誤連結的時間了。

四、查詢網站關鍵字

這也是非常重要的一件工作，想要提升搜尋引擎排名、增加搜尋引擎而來的流量，就靠這個項目了。

如上圖，從「搜尋流量」→「搜尋查詢」，可看到讀者都是從哪些關鍵字進入我們網站。那麼，這些關鍵字跟 "提升網站的流量" 這件事有什麼關係呢？

不知道讀者們在下標題的時候，會不會先設想關鍵字要怎麼設、會不會猜測訪客可能使用的搜尋字串呢？WFU 的確會這麼做，但先說結論，就算絞再多腦汁也不全然能命中。相信大家都可以接受這個說法──市場是無法預測的。

與其預測市場，不如進行市場調查；我們永遠不會知道訪客想用的關鍵字是什麼，與其猜測，不如直接觀察訪客的行為。這樣的思路與專家的言論是吻合的，請參考「網站小編別苦惱，找到每日最熱門標籤點閱率也跟著來」→「標籤的真正價值是什麼？」。而上面這張圖，正是網站管理員提供給我們的市調報告。

舉例來說，本站關鍵字第一名為 "網頁字體"，而目前本站最熱門的兩篇文章「網頁中文字型除了微軟正黑體, 還有這些好選擇！」及「網頁中英文字型跨平台設定最佳化」，當初下標題時，壓根沒想過使用 "字體" 這個詞。

現在瞭解市場的變化後，我們將來寫相關文章時，標題使用 "字體" 這個詞也必須是選項之一。而且根據這份關鍵字報告，很多訪客因為分不清正確用詞，根本是用 "字形" 這個錯誤的用詞來搜尋。如果想增加排名、獲得流量，那麼在文章中 "故意寫錯字"，穿插 "字形" 這個詞也是有所幫助。

當然，這只是一種概念，如果你是屬於「有所為、有所不為」的站長，這樣的技巧看過就好。這個主題可以說的東西不少，不過藉由以上簡單的概念，相信站長們已經可以知道，如何運用網站管理員提供的關鍵字報告來獲益。所謂順藤摸瓜，抓到一個關鍵字後，在該篇文章鋪好內部相關文章的連結，或是多寫這個關鍵字的文章，就能帶來更多流量。

五、連至我們網站的連結

我的例行待辦事項其實到此就結束了，網站管理員的例行公事就這麼兩件而已，非常輕鬆吧！接下來算是可有可無的補充事項，若時間夠再安排即可。

「搜尋流量」→「連至您網站的連結」，這個項目列出了所有連到我們網站的連結，這也是搜尋引擎非常看重的部分。

搜尋引擎如何評量網站的優劣、評比？機器沒辦法分辨內容的好壞良窳，只能藉由數據的大小進行排序，例如訪客的停留時間、連結到我們網站的數量等等。Google 認為，連結代表一種投票的行為，連到我們網站的連結越多，表示越多人對我們投票，網站的評比也越高。當然，這只是粗淺的解釋，用來瞭解 Google 的行為即可(自己製造大量假連結被 Google 抓到，下場是很慘的)。

點進上圖的連結後，一層一層點下去，可以看到哪些網站的哪些頁面對我們投票。我們可能會好奇，是什麼樣的文章內容會提到我們的網站？希望會是好事。從網站管理員的這個項目，可以經由這些蜘蛛網架構的連結，認識到其他對我們友好的投票者，至於是否花個時間拜訪、進行交流，就看站長們的時間安排了。

六、一些補充

1. 代管功能

如果真的覺得網站管理員很麻煩，想請電腦比較好的人幫你處理管理網站的事務，又不想帳號密碼給別人，其實 Google 也提供了代管的功能。

點擊右上角的齒輪圖案 →「使用者和網站擁有者」→ 按下「新增使用者」

將「權限」設定為「完整」，輸入郵件地址再按「新增」，就能邀請別人來幫忙管理網站了。

2. 進階文章

本篇以比較淺顯的方式撰寫，來瞭解這個工具基本功能。如果行有餘力，那麼可參考以上文章，相信能獲得更深入的操作技巧。

Google 相關工具：

(Pic from: pocketables.com)Google Drive 去年曾發生過一次外連失效的事件，原因為「外連流量限制」，因此當時請讀者將外連 js 檔自行分流。而昨日(2015-02-06)開始，Google Drive 的所有外連 js 檔又陷入異常狀態，這次是全面性的問題，只要是網站的外掛、小工具 js 檔存放在 Google Drive，那部分的功能就會陷入停擺。

目前連結失效的原因還不清楚，雖國外社群也有人反應這個狀況，但一直未有官方的訊息出現，為了不讓網站停擺，短期我們能做的，就是先將外連檔案搬到安全之處。如果讀者過去曾按照 WFU 指示進行檔案分流的話，那麼你可不必太擔心此事，把 js 檔改放其他免費空間即可。

如果你沒做過分流動作的話，那就比較麻煩了，因為 WFU BLOG 文章裡面的 js 連結都放在 Google Drive，目前都是無法讀取的狀態。唯一的解決方法，就是依照本文的說明，跟 WFU 索取檔案，再自行放到免費空間了。

一、目前的情勢

根據這則「Blogger 社群討論串」，CSS 檔可以外連，但 js 檔全部呈現失連的狀態。原因為何很難說，也許 Google 在進行新功能的測試、也許 Google 故障了、也有可能 Google 不打算讓使用者外連 js 檔→ 我們無法排除這種可能性。

為了維持網站正常運作，WFU 已將檔案移往 Dropbox。但短時間之內並不打算開放 Dropbox 的連結，一來情勢還未明朗，二來不希望 Dropbox 的檔案被拿去公開外連，避免將來連我的 Dropbox 流量也被封鎖。等到 Google Drive 官方有所回應、或這件事有個結果後，會視情況決定是否更改本站的所有 js 連結。

已經有分流的讀者：

請從 Google Drive 下載你的 js 檔，改放其他空間，例如 WFU 使用的 Dropbox。
+Ching Hung（洪靖）推薦的「OpenDrive」。
留言 #1 +FreeTong Leung 發現的方法「Google Drive 的 js 外連文件失效解決方法」

二、索取 js 檔

未曾分流的讀者，WFU 開放兩個管道來索取 js 檔，但只服務加入會員的讀者 ( 按此前往「會員中心」，有 FB 帳號即可註冊)：

1. 聯絡表單

請用下面的聯絡表單與我聯繫，包含以下內容：

註冊姓名
會員編號
詳細告知所有需要的 js 檔名稱

聯絡表單：

2. 會員討論區留言板

前往會員中心，在「會員討論區」留言，這樣我可以確認你是會員的身份。

留言內容請列出所有你需要的 js 檔名稱，下載的網址我會放在會員討論區的公告內容。

三、免費空間能否有保障？

經過前年 2013「Google Code 失效」的事件、去年 2014「Google Drive 外連限制」的事件，直到今年 Google Drive 的 js 外連失效事件，每一次都是很大的折騰。

事不過三，這兩天我也一直在思索這樣的事情有沒有根本的解決方法？轉換到另一個免費空間是治標的方法，公司營運需要燒錢，錢燒完了、服務停止之日，站長又要承擔一次搬移檔案的麻煩。

從前陣子發生的「Blogger 網誌被刪除案例」事件，一直到現在的 Google Drive，我必須說，放在雲端的任何東西，沒有一樣是安全的，不管公司再大都一樣。而且這樣的事情跟是否免費無關，就算付費買主機、買流量、買空間，花了錢一樣可能有資料消失的意外，我們無法控制網路公司的內部運作，也不知道何時網路公司可能被攻擊。

狡兔有三窟，我認為最安全的作法，就是任何雲端的東西，最好在他處有備份，而且自己硬碟也有備份，那麼就不怕任何意外了。

四、買保險的方法

所謂買保險就是做好備份的例行工作，經營部落格大致上有這幾種資料需要買保險：

網站範本
文章
圖片
外連檔案

如果這四項都能找到萬全的備胎，站長們應該都可高枕無憂了。多虧了最近的事件，開始研究完善的備份機制，現在前兩項的備份，可參考以下文章：

其他的項目，之後也會陸續分享我的心得。

Google Drive 相關文章：

Google Drive 上星期發生了「JS 檔外連失效」事件，雖然日前已經修復，但相信所有經歷這件事的站長都不好受，心理也會留下陰影，是否哪天殘破的部落格版面又要重現？

誠如我在上一篇提到的，「放在雲端的任何東西，沒有一樣是絕對安全的」，網站隨時有開天窗的風險總是無法安心。不想讓舊事一再重演，必須幫部落格四項重要資料「範本、文章、圖片、外連」買保險。本篇將說明，如何為網站的 "外連檔案" 找到各種備胎，並在出狀況時由系統自動替換，省去人工手動更換各處連結，算是一個徹底解決的方案。

方法雖好，不過算是程式人的工具，若熟悉 Javascript、Jquery 的站長比較能自行處理。如果對語法不熟悉的站長、看不懂本文在說什麼，可用本文聯絡表單聯繫 WFU 代為處理。

<< 請注意！本篇文章含會員限定內容 >>

一、分散式檔案管理

先說明一下原理，如同伺服器一般，為了確保檔案存取正常，不受任何事故而影響資料庫，那麼各種意外導致的異常，例如天災、斷電、未授權的存取(駭客)等等，必須將檔案同步異地存放。經由分散式的檔案管理，事故發生時可由備份處取得檔案內容、或立即回覆狀態，絲毫不影響伺服器的運作。

經由同樣的構想，如果在 Google Drive(或你的主要雲端空間)發生的異常狀態，導致所有外連檔案失效，而我們能事先將所有檔案，在另一個雲端空間保有備份，經由本文工具的輔助，當偵測到異常狀態時，自動改用備份空間的連結，就能解決「雲端外連空間無法信任」這個問題了。

然而，我們要怎麼讓程式判斷，Google Drive 的 A 檔案，自動對應到另一個空間的同一個 A 檔案呢？程式很短很好寫，但如何對應檔案才是最大的問題。

解決的方法為，我們準備的所有雲端空間，都必須是「支援目錄路徑」的空間。如此雖屬不同空間，但檔名相同時，就能自動判斷了。

二、準備「支援目錄路徑」的雲端空間

說真的，「支援目錄路徑」的雲端空間並不多，且漸漸都開始收費了，也許站長們可趁還沒收費前搶先註冊帳號。不過維持外連檔案、確保網站運作這件事很重要的話，如果將來雲端空間開始收費、且金額不大時，我想這筆開銷是必須的。

以下提供幾個目前 WFU 知道的「支援目錄路徑的雲端空間」，有相關資訊的讀者也歡迎補充：

1. Google Drive：既然已經修復了，就繼續使用。其目錄路徑格式大致長的像這樣──

https://googledrive.com/host/0BxkdlfTTti-aSlU3SDg5RUVtNll/檔案名稱.js
取得 Google Drive 外連路徑的方法，請參考「Google Drive 取得檔案外連網址原理分析」、「Google Drive 外連產生器」。

2. Dropbox：很可惜，2012 以後才註冊的使用者，必須付費才能使用。其目錄路徑格式大致長的像這樣──

https://dl.dropboxusercontent.com/u/39186009/test/檔案名稱.js

3. Hinet：我本身是 Hinet 用戶，所以有免費的 60MB 空間。如果你也是 Hinet 用戶，可以申請來當備用的外連空間，放多少 JS 檔都綽綽有餘。其目錄路徑格式大致長的像這樣──

http://帳號名稱.myweb.hinet.net/檔案名稱.js

想知道還有哪些雲端空間，可在這個 WIKI 頁面「Comparison of file hosting services」，從 "Direct access" 這一欄尋寶，看能否找到「支援目錄路徑的雲端空間」，有點難度就是。

三、安裝工具

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

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

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

B：這一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

F：紅色字串請填入主要的雲端空間資料夾路徑，例如前面提到的 Google Drive 目錄路徑，但不包含檔名字串 (檔案名稱.js)。

G：紅色字串請填入備用的雲端空間資料夾路徑，例如前面提到的 Dropbox 或 Hinet 目錄路徑，但不包含檔名字串 (檔案名稱.js)。

儲存後請看接下來的檔案外連使用方法。

四、基本使用方法

安裝本文工具後，等於是外連檔案交給這個工具託管，那麼呼叫外連檔案的方式也需要修改。

1. 所有外連的檔案，請放在同一個資料夾，也就是程式碼 F、G 行自己設定的那些目錄路徑。同檔案、不同空間的兩個檔案名稱必須相同。

2. 呼叫外連檔案的語法如下：

$.link("檔案名稱");
藍色字串只需要填入檔名即可，不需要填入路徑。以下舉實例說明──

「Blogger 相關文章 V2」原本呼叫外連 js 檔的內容為 Q~V 行：

(function () {
var url = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js",
script = document.createElement("script");
script.src = url;
document.documentElement.firstChild.appendChild(script);
} )();

呼叫的方法為，將以上所有內容改為以下語法：

$.link("related-post-2-140516-min.js")

雖然看起來很簡單，但不熟悉 Javascript、Jquery 的站長，在修改範本散落各處的外連檔案時，很容易就會出錯。且每個程式呼叫外連檔案的方法都不同，這裡無法列出所有狀況。如需要代為處理，請用下面的表單與 WFU 聯繫，酌收費用將依處理時間而定。

聯絡表單：

五、進階使用方法

這部分提供給進階使用者，如果外連 js 執行結束後，需要執行 callback 動作，可加上 callback 函數，使用方法為──

$.link("檔案名稱", callback);

或是你也可以直接將 callback 函數內容當成參數傳送──

$.link("檔案名稱", function(){ // 執行動作寫在這裡 });

六、優點總結

裝了這個工具後，我們的部落格就成了伺服器等級的網站，就像無預警斷電時還有備用 UPS 可支援。簡單總結一下其優點：

1. 不怕流量被限制：當主要空間達到流量上限後，這個工具會自動切換，改讀取次要空間相同檔名的檔案。

2. 管理方便：以往如果換了外連空間，更改範本中所有外連路徑是一件痛苦的事。使用這個工具後，只需要更改資料夾路徑的設定，所有檔案都可無痛轉移陣地。

3. 切換彈性：若哪天主要空間忽然變得龜速，想要改用次要空間，那麼就把 F、G 行的主要、次要資料夾路徑互換，幾秒鐘就完成這件事。

相信經由以上幾點說明，可瞭解這個小工具的威力。花一點時間來修改各處連結，外連空間將不再成為站長的頭痛問題。

Google Drive 相關文章：

歷經「Google Drive 外連檔案無預警失效」三天後，上一篇提出了「幫網站外連檔案買保險」的方法，可確保部落格外連沒有後顧之憂。

經實際操作的結果，當有兩處資料夾，需要各自保存一份同樣的檔案時，所有的動作得重複做兩次，例如檔案的 "新增"、上傳"、"修改"、"刪除"，在 Google Drive 以及 Dropbox 資料夾都要各做一次。

如果能所有動作只做一次，就讓 Google Drive 以及 Dropbox 的檔案狀態保持一致，那麼管理上真的是方便許多，以下就來看看如何實作。

一、同步的原理

1. 共用資料夾

原理也很簡單，Google Drive 與 Dropbox 都有 PC 桌面端的同步軟體，只要把兩邊的同步資料夾設定為同一個，那麼進行的任何動作，就能兩邊隨時同步了。

在實作上，Dropbox 的外連檔案只能放在公開資料夾 "Public" 的路徑之下，因此 Google Drive 必須遷就 Dropbox，將同步資料夾設定到 Dropbox 的 "Public" 路徑。

2. Dropbox 的限制

可惜不是每個使用者都能設定 "公開資料夾"，根據官方的說明文件：「2012 年 10 月 4 日起建立的 Dropbox 帳戶將不再擁有公開資料夾」。

新用戶要使用公開資料夾的話，得付費升級為專業版。

3. 沒有 Dropbox 公開資料夾怎麼辦？

沒有 Dropbox 公開資料夾時，網路上仍能找到取得外連路徑的方法，但是這個方法「不支援目錄路徑」，因此也就無法實現上一篇的「徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險」。

解決的方法不是沒有，得另外用 Dropbox API 來找出所有外連路徑，再配合上一篇的程式處理。由於這件事需要取得使用者的權限，算是客製功能，有需要的讀者請用文末的表單聯繫。

二、下載 Google 雲端硬碟

說明實作流程，假設你已經在電腦端裝好了 Dropbox，接下來需要下載 Google 雲端硬碟、安裝在電腦上，讓雲端的檔案與電腦能即時同步。

安裝的步驟不難，以下兩者可擇一參考：

官方教學：在 Mac 或 PC 上安裝 Google 雲端硬碟→ 再依畫面右邊的操作順序完成
圖文說明：如何在PC 上產生一個資料夾與Google 雲端硬碟同步

三、更改 Google Drive 同步資料夾

如果你已經使用桌面端的 Google 雲端硬碟一段時間，早就設定了同步資料夾，那麼稍微有點麻煩，因為設定完畢後，不會出現「變更資料夾」的相關選項，那麼得依照以下步驟進行。

如上圖，叫出雲端硬碟的設定畫面 → 帳戶 → 解除帳戶連結。唯有如此，才能重新設定同步資料夾。

接著重新登入帳號，按掉所有的「下一步」選項。

來到上圖畫面後，別按「完成」，先進入紅框的「進階設定」。

紅線為預設同步的資料夾名稱，我們得改為 Dropbox 的公開資料夾路徑。先按「變更」→ 接著在硬碟中找到 Dropbox 路徑 → 注意要同步的資料夾，必須在公開資料夾 "Public" 之下 → 例如圖中自行命名的 "GoogleDrive" 資料夾。

設定完資料夾後，可看到上圖紅線部分，資料夾路徑已經變更完成 → 接下來如果只想同步 Google Drive 特定資料夾，可勾選「只將部分資料夾同步到電腦」，然後在下方選擇要同步的資料夾名稱 → 最後按下「開始同步處理」，便大功告成。

四、小結

經由以上流程設定後，Google Drive 與 Dropbox 等於是各自同步電腦中的「同一個資料夾」，我們可將這個資料夾設一個捷徑，丟到電腦桌面上，以後對這個資料夾內各種檔案進行的動作，例如新增、修改 js 檔內容，都會即時同步到 Google Drive 及 Dropbox 的雲端空間，也省去上傳動作的麻煩，讓上一篇「幫 Google Drive 的 JS 檔買保險」可以很輕鬆的實現。

如本文所提，沒有 Dropbox 公開資料夾的讀者，無法套用上一篇的小工具。如果需要另外寫程式來處理備用空間的檔案外連，例如 Dropbox、Copy.com、OpenDrive 等等，來幫 Google Drive 買保險的讀者，可用下面的表單與我聯繫。

聯絡表單：

Google Drive 相關文章：

為了讓網頁效果能跨瀏覽器相容，這在網頁設計來說一直是令人頭疼的事。除了搞定「IE 不同版本」、行動裝置以外，另一個更難解的算是蘋果系統了。

畢竟蘋果裝置沒那麼普及、系統比較封閉。同一個網站，在 Windows 的 Safari、或 Yosemite 的 Safari、或 Mac OS X 舊版本的 Safari，執行效果是有可能不一樣的。為了確保網站能正常顯示，很有必要瞭解 Mac 系統的執行結果。

用 Windows 模擬蘋果系統還滿麻煩的、且限制很多。但若日常作業用不到蘋果系統，只為了測試網頁效果而買 Apple 又所費不貲。以下為記錄使用 VMware 模擬 Yosemite 及 Mac OS X 舊版本的心得與筆記，供相同用途的使用者參考。如果需要常使用 Apple 裝置的話，建議還是買一台蘋果，操作會比 VMware 方便許多。

一、硬體限制

1. 硬體條件

如果 CPU 不夠力、或規格不符、或記憶體不夠大，將無法在 Windows 模擬 Mac OS 系統。

記憶體最好 4G 以上，如有 8G~16G 可跑得比較順暢
至少雙核心的 CPU
CPU 要支援 VT-x、EM64T這兩項規格

使用「CPU-Z」這個軟體就能檢測自己的 CPU 是否符合規格，如下圖：

上方紅框顯示支援 "EM64T"、"VT-x" 這兩項規格
下方紅框的 "核心數" 可看出是雙核心

2. 硬體設定

雖然我的 CPU 符合規格，但執行 VMware 時仍然出現以下的錯誤訊息：

原來 CPU 在 BIOS 中的 "VT-x" 這個功能，預設是關閉的。請按以下步驟開啟：

重開機後進入 BIOS 設定
每個 BIOS 的設定位置可能都不同，請一個個點開，直到找出 "Virtualization Technology" 這個項目
預設值為 "Disable" → 改為 "Enable" 即可

修改完並儲存後，VMware 就不會出現以上的錯誤訊息了。

二、蘋果系統映像檔

這是難度最高的一部分，如果本身沒有蘋果裝置的話，很難取得系統光碟，來製作映像檔。雖然最新版 Yosemite 系統可從 Mac App Store 免費下載，不過你也得先有蘋果裝置才行。

網路上可找到分享出來的映像檔，不過這東西不適合輕易地被取得，因此以下的內容當成個人筆記，就不公開了。如果你是會員的話，可以看到這些內容。

補充一下，對於這些網路的映像檔，其實我會持保留態度，因為無法知道裡面是否藏木馬。所以除了測試蘋果系統的網頁效果，我不會做任何其他的操作、存放任何資料等等，資安考量第一。再提醒一下，如果作業上常常需要使用蘋果系統，還是買個真的 Mac 比較適當。

三、準備相關工具

1. VMware Player

這是 Windows 下免費的模擬器，目前看到模擬 Mac 的教學多半使用付費的版本「VMware Workstation」，不過經實測後，使用 VMware Player 就能正常運作了：


官方網站：https://www.vmware.com/
下載網址：https://my.vmware.com/web/vmware/free#desktop_end_user_computing/vmware_player/7_0
安裝教學：VMware Player 7.0下載與安裝

2. VMware Unlocker

VMware 預設會關閉 Mac OS 的選項，因此必須另外用 VMware Unlocker 這個工具來開啟 Mac OS 的選項，才能安裝系統。


下載網頁：Unlocker 2.0.4
安裝教學：可參考「VMware前置設定篇」→「2. 執行Unlocker for VMware Workstation」

四、Yosemite 完整安裝版

完成前述所有動作後，可參考「二、蘋果系統映像檔」→「1. Yosemite 完整安裝檔」，來安裝這個懶人包，省去安裝系統的時間。

基本上按著該網頁提供的 Youtube 影片進行即可，過程中若某些英文不瞭解、或設定不知如何進行的話，以下是一些心得整理：

用 VMware Player 開啟下載的 .vmx 檔後，需選擇「Edit virtual machine settings」進行設定──

1. Memory：綠色箭頭為建議使用的記憶體，預設為 2MB；藍色箭頭為最大使用量，請根據自己的記憶體大小，盡量調大一些。

2. Processors：請依據自己 CPU 的核心數，調為 2 以上的數字

3. Hard Disk：圖中顯示最大的硬碟使用空間為 40G，按下「Expand」後，可調整此數字。

4. CD/DVD(SCSI)：

Mac 使用的是 SCSI 裝置，因此這個選項必須按下「Advance」，改為 SCSI。根據這篇「如何透過 VMware 安裝 OS X」，"欄位改選為「SCSI 0:5」或是其他不等於「SCSI 0:1、1:0、1:1」的數值"。
影片中 CD/DVD 要放入的 ISO 檔，位於將 VMware Unlocker 解開後的資料夾 tools\darwin.iso→ 進入 Mac 系統後，可安裝 VMware tools，可加強 VMware 操作的便利性。

其他的部分，按照預設值進行就沒什麼問題了。

五、Mac OS X 從頭安裝

前面的 Yosemite 完整安裝版，使用的是 Safari 最新版 8.0，而某些網頁在 safari 舊版的執行效果，跟 8.0 是截然不同的，因此我另外也裝了舊版的 Mac OS X 來測試。

「二、蘋果系統映像檔」→「2. Mac OS 映像檔」可從頭安裝乾淨的 Max OS 系統。這部分網路的教學就比較多了，可直接參考這篇詳細的圖文教學「如何透過 VMware 安裝 OS X」來進行。

另外補充一點，VMware 只能吃 ISO 檔，而網路上能找到的多半為 DMG 檔，要如何處理這個問題，可參考「VMware前置設定」，這篇解釋地非常清楚，怎麼從各種 DMG 檔取出正確的檔案，再轉換為 ISO 檔，讓 VMware Player 讀取。

雖然以上流程會花費比較多的時間，但可選擇繁體中文語系，介面上比較友善，因此也是不錯的選擇。

Windows 相關工具：

雖然 Line 很久以前就釋出可以安裝在部落格網站的分享按鈕，不過之前幫忙朋友安裝時，實地測試各種不同裝置後，發現效果都不太一樣：

1. 網頁版：沒有作用
2. 行動裝置(平板)：字串有網址的話會失效
3. 手機版：執行正常

因此研究了一下問題出在哪，以下先描述大致的情況，想要直接安裝語法請跳至「二、所有網站通用的語法」。

<< 請注意！本篇文章含會員限定內容 >>

一、行動裝置異常狀況

1. 官網語法

根據「官方網站」，Line 分享按鈕的安裝語法如下：

<a href="http://line.naver.jp/R/msg/text/?訊息文字"><img src="圖片網址"/></a>

2. 美化分享內容

根據這篇「Line分享按鈕及連結」，作者將 "訊息文字" 拆解並進行版面美化，讓訪客分享的文字訊息第一行顯示文章標題，接著利用特殊符號 "%0D%0A" 產生自動斷行效果，於第二行再顯示文章網址。這樣分享出去的訊息，就能直接點擊超連結，連回我們的文章網址。利用其語法原理產生的語法大致如下：

<a href="http://line.naver.jp/R/msg/text/?文章標題%0D%0A文章網址"><img src="圖片網址"/></a>

3. 平板異常狀況

將以上語法裝到網站上，經實測結果，手機裝置按下 Line 分享按鈕後，執行效果沒問題，Line 的分享訊息第一行會出現文章標題，接著斷行、第二行產生文章網址。

但在平板裝置，出現的畫面如下：

紅框可看到換行符號 "%0D%0A" 無法被解譯
紅圈可看到網址最後面會自動產生 "=" 這個字元
錯誤的網址導致訪客無法連結到我們文章頁面

為了解決以上問題，Line 的分享按鈕語法必須重新設計。

二、所有網站通用的語法

Blogger 平台的語法稍後說明，以下先提供所有平台都適用的語法，需要用 js 處理：

以上語法請擺在網頁想顯示的位置即可，若需要修改參數請對照程式碼行號：

G：為了與平板裝置相容，去除了換行符號，Line 的分享訊息格式為「標題 + 空格 + 網址」，若想更改格式，可變更「title + " " + url」這部分的內容。

H：綠色字串可改為自訂的按鈕圖片網址

此程式碼的效果大致如下面這個 Line 分享按鈕，可在自己的手機或行動裝置測試執行狀況：

如果用平板測試，將可看到如同下圖的效果，原本會黏在網址後面的 "=" 字串，現在跟網址分離了，訪客點擊超連結時可正常連到我們文章的網頁：

三、Blogger 平台語法

Blogger 平台比起其他網站，在安裝 Line 分享按鈕時，算是有先天的優勢。根據「Blogger 行動版範本修改技巧」，可以利用判斷式：

在手機版網頁，採用「一、行動裝置異常狀況」→「美化分享內容」，使用換行的語法讓版面美觀。
在非手機版網頁(平板)，採用「二、所有網站通用的語法」這部分的語法。

如果對語法熟悉的讀者，根據本文的程式碼、以及上述的說明，可以將判斷式寫出來，不需像本文一樣用到 js 來執行。而為何需要減少 js 的使用，可參考「優化網站效能該注意哪些事?」系列文章，如果 js 語法有替代方案，自然應該以替代方案為主。

如果對語法不熟悉也沒關係，可暫時先用本篇的程式碼，下一篇 WFU 會整理一些常用的、熱門社交分享按鈕語法，也會包含這個 Line 分享按鈕的判斷式，屆時再改用適合 Blogger 版本的語法即可。

更多網站工具：

在網站擺放各式熱門的分享按鈕，可方便讀者主動幫我們宣傳，有助於散播文章到不同的平台。這件事已經有不少第三方服務可替我們代勞，例如「Shareaholic 超完整社群網站分享按鈕」，讓我們不必單獨安裝個別分享按鈕，省下不少麻煩。

本站沒使用這類服務的原因，主要考量為減少 js 的使用，可參考「優化網站效能該注意哪些事?」。除此之外，使用「第三方服務得擔心外部伺服器不穩」，導致分享按鈕開天窗。

因為分享按鈕幾乎都能以超連結的方式放在網頁上，如果改用這樣的方式，就不需用 js 來處理了。而「Blogger 官方分享按鈕」正是採用超連結語法，網頁效能較佳、沒有外部伺服器的顧慮。可惜的是，有不少缺點及侷限性，本篇就來一一解決這些問題，並加入以下常見的社交分享按鈕：

Line
撲浪(Plurk)
微博(weibo)
tumblr
修改 G+ 按鈕

<< 請注意！本篇文章含會員限定內容 >>

一、解決官方分享按鈕的缺陷

1. 找回消失的官方分享按鈕

Blogger 原生的分享按鈕，最為人詬病的問題是──你看不到他......為何會如此呢？就像「Blogger 在文章下方顯示作者簡介」所提到的，如果你是喜歡改範本的站長，Blogger 範本可能認不出原本的 code，導致無法顯示官方分享按鈕。然而如果你很少自訂網頁效果、Blogger 範本很乾淨的話，那麼絕對能顯示官方分享按鈕，不過也許這類的站長也不會點進本篇文章，來看怎麼修改分享按鈕了。

好消息是，這個「Blogger 中文社群討論串」， +Mark X 與 +Reggie Li 提供了恢復官方分享按鈕的方法，經實測驗證是有效的，將步驟簡單整理如下：

A.為了預防不測，請先備份範本

B.在範本中搜尋字串 includable id='shareButtons'，如下圖：

C.找到後，假設位置在上圖的 1424 行，點擊圖中行號位置的紅框的位置，可使程式碼收合

D.將 <b:includable id='shareButtons' var='post'>...</b:includable> 全部用滑鼠標示起來 → 全部刪除掉 → 然後儲存範本

E. Blogger 後台 → 版面配置 → 網誌文章 → 編輯 → 如果有勾選「顯示分享按鈕」的話，應該會出現在指定的位置。

F.如果還是沒出現的話，那麼需要一點修改範本的功力了，請將以下程式碼直接放在你要顯示的位置：

<div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>

例如放在範本中 <div class='post-footer-line post-footer-line-1'> 之後的位置，或是可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」，找到喜歡的位置來擺放。

2. 行動版無法顯示

Blogger 行動版範本預設會將官方分享按鈕隱藏起來，不知道原因何在，即使你使用 "自訂" 的行動版也看不到。為了解決這個問題，需要修改 CSS，請到 Blogger 後台範本 → 自訂 → 進階 → 新增 CSS，填入以下程式碼：

.post-share-buttons {display: inline-block!important;}
儲存後可強制顯示官方分享按鈕。

3. 分享按鈕太少

Blogger 官方預設的分享按鈕不但選擇少，且多半是歐美在用的，以使用中文的族群而言，大概只有 FB 按鈕用得到而已。本文以下將詳細說明如何進行改造及新增常用熱門分享按鈕，不過請先檢視前兩點，確認網站能看到官方分享按鈕工具列。

二、修改 CSS

為了加入其他自訂的分享按鈕，必須製作新的按鈕圖示。以下 CSS 內容包含 WFU 製作的、符合官方按鈕尺寸的圖片，如果想採用自訂圖案，請自行置換圖片網址即可。

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

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

<style>
/* 官方分享按鈕 start */
.post-share-buttons a {margin-right: 5px;}

/* G+ */
.sb-gplus {background: url(http://2.bp.blogspot.com/-gQroO_BHG4c/VPA6ApX8zcI/AAAAAAAALHQ/51p6Y2uJ_Ok/s1600/gplus-btn-bw.png)no-repeat left !important;}
.sb-gplus:hover {background: url(http://3.bp.blogspot.com/-V6XXyiGVGPg/VPA6AjSmWZI/AAAAAAAALG8/zWNtlvkz5pA/s1600/gplus-btn-color.png) no-repeat left !important;}

/* line */
.sb-line {background: url(http://1.bp.blogspot.com/-4_uzvn9GTz8/VPAk4-yFdDI/AAAAAAAALGA/XdtL1Li2BiI/s1600/line-btn-bw.png) no-repeat left !important;}
.sb-line:hover {background: url(http://1.bp.blogspot.com/-T5RZpCR2BeI/VPAncHIqHII/AAAAAAAALGY/rzNFP0IL9fw/s1600/line-btn-color.png) no-repeat left !important;}

/* plurk */
.sb-plurk {background: url(http://2.bp.blogspot.com/-SgBivCHfKDQ/VPAncKa-34I/AAAAAAAALGk/_XgAY2fJWYQ/s1600/plurk-btn-bw.png) no-repeat left !important;}
.sb-plurk:hover {background: url(http://4.bp.blogspot.com/-lcApU7siEiw/VPAncGqaOWI/AAAAAAAALGc/n6s-0ZB3u74/s1600/plurk-btn-color.png) no-repeat left !important;}

/* weibo */
.sb-weibo {background: url(http://2.bp.blogspot.com/-be64qwzpkWk/VPA6DSOGo7I/AAAAAAAALHg/VoULW-AhLKY/s1600/weibo-btn-bw.png) no-repeat left !important;}
.sb-weibo:hover {background: url(http://4.bp.blogspot.com/-USdHTcaswXQ/VPA6DfPpLcI/AAAAAAAALHk/VChEWLFLv08/s1600/weibo-btn-color.png) no-repeat left !important;}

/* twitter */
.sb-twitter {background: url(http://2.bp.blogspot.com/-wXGkxq_w8jk/VPA6CiNpaJI/AAAAAAAALH4/QWxURKFY1eA/s1600/twitter-btn-bw.png) no-repeat left !important;}
a.sb-twitter:hover {background: url(http://4.bp.blogspot.com/-WI8shQAauIE/VPA6C5LMC_I/AAAAAAAALHY/O1cD3pMU-88/s1600/twitter-btn-color.png) no-repeat left !important;}

/* tumblr */
.sb-tumblr {background: url(http://1.bp.blogspot.com/-SBlwf9CaYNo/VPA6Bu_JnbI/AAAAAAAALHM/qNZ6wWv2hi4/s1600/tumblr-btn-bw.png) no-repeat left !important;}
.sb-tumblr:hover {background: url(http://1.bp.blogspot.com/-OALUQn7xo5s/VPA6CeyxeOI/AAAAAAAALHU/pjhhih8jGBM/s1600/tumblr-btn-color.png) no-repeat left !important;}
/* 官方分享按鈕 end */
</style>

官方分享按鈕預設是全部黏在一起的，請見 CSS 碼開頭的紅色字串，這一行會讓分享按鈕間隔 5px。如果想沿用官方預設效果，請將此行刪除。
每個分享按鈕的開頭均用綠色字串標示，如果有不需要的按鈕，請將該區塊的 CSS 碼刪除即可。
官方預設已經有 twitter 按鈕，以上的 /* twitter */區塊使用了自製的、辨識度更高的圖示代替，如果想沿用預設圖示，請刪除這個區塊。

三、修改程式碼

接下來修改官方分享按鈕的程式碼，接續「一、解決官方分享按鈕的缺陷」→「1. 找回消失的官方分享按鈕」的步驟與圖片：

這次需要點擊上圖行號位置的紅框，讓程式碼展開：

仔細觀察這段程式碼，"全部都黏在一起、沒有斷行、沒有間隔"，請注意這個現象。用滑鼠選取上圖紅框區塊的官方分享按鈕原始碼，從 <b:if... 一直到 </b:if> 結束，全部刪除，改貼上以下程式碼：

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

所有按鈕程式碼排列的順序，就是由左到右顯示的順序。
排列的順序依照 WFU 認為在中文族群熱門的程度，例如 "撲浪"(plurk) 比西方盛行的 twitter 熱門，所以排序在 twitter 之前；不過讀者可依自己的喜好重新洗牌，或是新增額外按鈕，或是刪除不想顯示的按鈕。
以上程式碼的排版在範本中的版面比較清楚，但在網頁會造成分享按鈕彼此有間隔。如果想沿用官方分享按鈕原有的效果(沒有間隔)，請手動將每段、每行程式碼的空格刪除，讓所有程式碼 "黏在一起"。
B~C：FB 分享按鈕，為原官方程式碼，未更改。
E~F：G+ 分享按鈕，因為官方原按鈕佔用太多寬度，故改為這個小按鈕，讓樣式一致，程式碼參考「官方 G+ 分享按鈕」的說明。若需要顯示 +1 數量，建議參考「官方 +1 按鈕」來另外安裝這樣的按鈕。
H~M：Line 分享按鈕，這段程式碼在行動版、非行動版有不同的執行效果，可參考「Line 分享按鈕﹍各種行動裝置都相容的語法」有完整的原理說明。
O~T：撲浪(Plurk) 分享按鈕，參考「凍仁的筆記」的程式碼及圖案，依據行動版、非行動版來改寫程式碼，加入了訊息換行的效果。
V~W：新浪微博(weibo) 分享按鈕，只取大陸最熱門的一個，程式碼修改自「一鍵分享 Blogger 內容到 Sina Weibo」。若需要其他大陸的分享按鈕，可依照本文程式碼規則自行新增。
Y~Z：Twitter 分享按鈕，為原官方程式碼，未更改。
AB~AC：Tumblr 分享按鈕，國外熱門的部落格平台，程式碼參考自「tumblr 官網」，若不需要此項可刪除。
AE~AF：Pinterest 分享按鈕，為原官方程式碼，未更改。
AH~AI：Email 分享按鈕，為原官方程式碼，未更改。

以上新增按鈕的部分，分享訊息文字採「標題 + 換行符號 + 網址」的格式，詳細原理可參考「Line 分享按鈕﹍各種行動裝置都相容的語法」。程式碼的效果將類似下面這樣：

可自行測試執行的結果，如果對 CSS 熟悉的話，可自行變更版面效果。本文的操作步驟不少，如安裝上有問題請再提出了。

更多修改官方工具技巧：

上一篇「Blogger 自訂安裝 Google Adsense 的各種位置及方式」，雖然內容很詳盡，只是對不熟悉語法與 Blogger 範本的讀者，可能看得有點吃力。

另外一點是，很多讀者想在文章中放入 Adsense 廣告，但得一篇篇手動加入安裝碼，這對網站有數百篇文章的站長而言，是非常頭大的一件事。還好根據「BLOGGER 繼續閱讀隱藏廣告和物件」的概念，這件事現在可以交給程式自動執行。

本篇的懶人包，能讓對語法及範本不熟的站長也可輕鬆安裝，如果你想讓 Adsense 廣告自動出現在以下四個位置，那麼就可繼續看下去：

文章標題之前
文章標題之後
繼續閱讀的位置
文末的位置

一、準備動作

1. 取得 Adsense 安裝碼

早期的 Adsense 安裝碼是同步執行，現在已經提供 "非同步" 執行的版本，可減少阻礙頁面載入的時間，如果要重新安裝的話，建議採用新的版本。如不清楚如何取得 Adsense 安裝碼，請依以下步驟：

進入「Adsense 官網」→「我的廣告」→ 選擇廣告單元 → 按下「取得程式碼」：

如上圖紅框，可取得「300 x 600 -- WFU BLOG」這個廣告的安裝碼。

選擇「非同步」後，複製所有程式碼。

2. 安裝碼格式

複製下來的程式碼大致長得像這樣：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300 X 600 - WFU BLOG -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-8931283480311870"
data-ad-slot="3230842908"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

藍色的數字分別代表廣告區塊的寬、高像素值
紅色字串為可辨識廣告的代號

請記下以上自己 Adsense 安裝碼的藍色、紅色字串，之後會用到。

二、Head 區塊程式碼

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

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

第一段可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

第二段為 Adsense 的前導 js 碼，只需執行一次就好，就算一個網頁放了三～四個 Adsense，都不需再重複執行這一段，因此建議放在範本中 head 區塊即可。

三、安裝 Adsense

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

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

E~O：文章標題之前
Q~AA：文章標題之後
AC~AM：繼續閱讀的位置
AO~AY：文末的位置
程式碼共有以上四段，請留自己需要使用的部分即可，不需要的部分請刪除。
紅字的參數，請依照「一、準備動作」→「2. 安裝碼格式」，改成自己的 Adsense 安裝碼參數。
藍字的參數，代表 Adsense 廣告會置中，與上、下分別距離 20px，可自行修改相關的 CSS 參數。
B、BB：這兩行代表 Adsense 只在文章頁面出現。如果想在首頁也出現的話，可移除這兩行，但不建議這麼做，因為一個頁面只能出現三~四個廣告單元，而在首頁出現的話，會超過額度，導致你某些位置想顯示的廣告，反而無法顯示。

Adsense 相關文章：

這陣子需要幫家人弄一台可以上網、玩 Line 的文書機，想起了十年前買的筆電小狗機(TravelMate 3000)，當初用了三年後，一過保固期螢幕馬上就異常，時間算得還真準！

小狗機退役期間雖然找到了方法解決異常(可參考「五、舊筆電螢幕異常的處理」)，不過老舊配備連跑 Chrome 20 都慢得無法忍受，因此大部分時間仍是待在倉庫。現在重新打點之後，不但開機速度飛快，就算跑最新版的 Chrome 40 都很順暢！

能讓舊筆電再度回春，這種感覺簡直比買新筆電還興奮，似乎 XP 還能再戰 10 年呢！此次升級的零件有這些：

二手記憶體：1G x 2 / NT. 300
二手 IDE SSD 固態硬碟：32G / NT. 500
USB 無線網卡：NT. 200

花 1K 能得到這樣的效果算是很滿意，以下記錄舊筆電升級的處理心得，讓有相同需求的讀者參考。

一、TravelMate 3000(小狗機) 的硬體限制

當初風靡一時的 TravelMate 3000，入手價格近 35K，但是以現在來看，硬體的擴充性是極差的：

CPU：拆解 NB 後才發現，CPU 焊死在主機板上，所以無從升級...
記憶體：出廠預裝 512MB x 1，最高只能插到 1G x 2...
硬碟：IDE 介面，預裝 4200 轉的硬碟，速度極慢 → 就算能插 SATA 儲存裝置，也只能跑 IDE 的速度
主機板：2008 後就沒更新版韌體，BIOS 不支援 AHCI

從以上限制來看，要跑得順最多只能安裝 XP 系統；而要讓筆電效能提升最有感的，將會是裝 SSD 硬碟。但做了一些功課後，多數人的意見不太支持這樣的想法：

SSD 在 XP 不支援 TRIM
BIOS 不支援 AHCI 無法發揮 SSD 效能
SSD 在 XP 跑會減損壽命

而且找不太到類似的經驗分享，加上害怕 SSD 在 XP 下用沒多久就報銷，一開始決定買高轉速的 2.5 吋硬碟就好(雖然會有過熱的憂慮)。

二、硬體升級記錄

1. 記憶體

在 PTT 很快就找到舊筆電 1G x 2 的買家，不過裝上筆電後，原本 512MB x 2 換成 1G x 2，感覺不出效能有快多少。

2. SSD 硬碟

原本的目標高轉速 IDE 硬碟陰錯陽差沒買到，不過在 PTT 硬體買賣版看到有賣家出售 IDE 介面的 SSD，引起了我的注意，因為這代表著：

的確是有人在很舊的筆電(IDE介面)使用 SSD
而且已經使用了幾年，沒發生問題
我前面的擔憂，例如 TRIM、AHCI、SSD 在 XP 跑會減損壽命這幾點，在有實際使用經驗後，可以暫放一邊。

因此決定把 SSD 改為第一選項，還可去除硬碟過熱的疑慮，且二手 SATA 32G 的成交價為 NT. 300，再加個轉接卡不用 500 就能搞定，如果效果不錯的話，將來再買新的 SSD 就好。

這件事的後續是，因為 IDE SSD 32G的賣家願意以 500 成交(如上圖)，所以就沒有採「SATA SSD + 轉接卡」的方案(反正 SATA 在 IDE 介面也發揮不了速度優勢)，而且跟他請教了不少使用 SSD 的心得，還滿感謝這位賣家的。

3. SATA to IDE 轉接卡(2.5吋)

補充一下，如果是舊筆電 IDE 介面，想裝 SATA SSD，這樣的轉接卡市面上買不到，因為買得到的都塞不進 NB，所以只能在露天購買零件。

搜尋的話會找到兩種，直立式的塞不進 NB，一定要下面這種扁平的，才能塞進筆電：

以上圖片來自這個賣場，資訊供讀者參考：

http://goods.ruten.com.tw/item/show?21103059136281

三、硬體折損

這部分簡單帶過，由於老狗機年事已高，重灌 XP 過程才發現硬體已經諸多損毀：

1. CD-ROM

Acer 原廠配備的 CD 燒錄機，怎麼灌系統都失敗，固定某些檔無法讀取，還以為安裝光碟壞了。後來用外接 USB 光碟機測試，同樣的安裝 CD 一灌就成功，只好承認原廠光碟機正式退役。

2. 無線網卡

好不容易灌完系統，並設定好網路環境，沒想到重開機後就再也進不了 XP。看了下錯誤訊息，google 後是跟無線網路有關，猜測八成是原廠無線網卡的問題，因為走 Cable 線就沒問題，但走無線網路的話，連線總是卡卡的，大概也是網卡年限已到。

因此最後一次重灌後，關閉了無線網卡，決定另買一個 USB 無線網卡，反正體積小、價格又便宜的不像話。

四、SSD 使用心得

1. 一些 XP 下的建議

使用 SSD 最重要的是 4K 對齊，灌 XP 前先用 WIN7 系統格式化 SSD，就能 4K 對齊了(賣家已經先幫我做了這件事)
灌 XP 時不要再選擇格式化
檢測是否對齊不需要下載軟體，可參考這篇「SSD Alignment Tool」的步驟，XP 下有 DOS 指令能直接檢測。
SSD 不要用操作硬碟的常識來對待，盡量地使用他即可，當成消耗品
不必分割磁區，若要備份系統，整個 SSD 複製到外部硬碟即可
日常的資料備份交給 Dropbox、Evernote等工具，可自動備份到雲端。
XP 下不要使用掃瞄硬碟這類的檢測工具，因為大量的讀寫磁區是在縮短 SSD 壽命
關閉休眠功能，因為每次休眠都是大量讀寫 SSD
若確定不會亂下載檔案，就可以不用安裝防毒軟體，減少檔案在背景存取
若不亂逛可能有問題的網站，可以使用 XP 預設的防火牆就好
SSD 只放必要的檔案，保持剩餘空間越大，壽命就越長
記憶體不足時，瀏覽器可能會當掉，可以使用「分頁功能」來增加記憶體。此資訊來自「微軟官方」

2. 備份系統

不使用防毒軟體，就得做好一份乾淨的備份系統。使用 SSD 備份舊筆電 XP 系統，大部分的軟體需要製作開機光碟，或開機後從別的硬碟來操作備份 SSD 系統，不是那麼方便。

我認為最佳的選擇是使用「EASEUS Todo Backup」，不但免費，而且不用光碟開機，在 XP 系統下就能直接將 SSD 備份到 USB 外接硬碟。詳細的操作步驟，請參考這篇「EASEUS Todo Backup Free 7.0備份Windows」。

這個教學的版本是 7，聽說版本 3 與 4 才能免費「備份 + 還原」，可上「阿榮福利味」下載 4.0 的版本。

五、舊筆電螢幕異常的處理

過去買的舊筆電(均為國產)，每一台最先故障的部分，都是螢幕。從 Acer 這台筆電的異常情形來看，過了保固期之後螢幕畫面就會縮小，可視範圍從 12 吋變成約 9 吋的大小。有時忽然間會恢復正常，但一段時間後又變小，總之無法正常使用。

後來自行試著拆解筆電，卻發現是一件非常困難的事，沒有拆解手冊根本辦不到。在此推薦這個網站，幾乎可以找到所有筆電型號的拆解說明書：

Tim's laptop service manuals

拆完筆電後可以了解到，筆電螢幕會最先故障的原因很好理解，螢幕轉軸設計不良時，每次的開合螢幕，都會造成螢幕排線的磨損，久而久之排線內部依據斷裂的程度不同，便會接觸不良，導致螢幕訊號結果不一。

請見上圖，後來將螢幕轉軸的塑膠殼拆掉，雖然難看了點，不過將來螢幕開合時，不會再碰觸到螢幕排線，如此訊號就正常了，一直到今日，螢幕再也沒有異常過。

六、小結

有了這次舊筆電成功的整頓經驗，如果你也只是需要文書、上網的功能，相信舊筆電都還有辦法繼續服役很長一段時間。而且當成桌機的代替品，不但省空間、省螢幕、行動力更好，還有一點是無可取代的──TFT LCD 螢幕。

現在市面上只會有極傷眼 LED 螢幕，想要長時間使用，TFT LCD 螢幕是更好的選擇。因此，說不定在二手市場找找舊筆電，用本篇的概念重新打造一下，是使用上很好的選擇喔！

最後，如果對二手 SSD 的壽命不放心，可以改買全新的「32G/64G SATA SSD + 轉接卡」，花費約 1.5K 之內，不過要學會拆解筆電就是了。而有了目前這個二手 SSD 32G 的使用經驗，之後也可以放心地在 XP 改用全新的小容量 SSD。

其他 3C 產品心得：

過去一直使用的是 Blogger "官方" 行動版，其實這也不啻為懶人的好選擇，不但讀者用手機閱讀時載入速度快、版面簡潔，自己也不用管理第二套範本內容，而依照「行動版擺放 Adsense 的簡易技巧彙整」也能讓 Google 及自己有所收益，算是三贏的局面。

使用 Blogger "自訂" 行動版範本則有更多好處，能選擇版面更大的 Adsense 廣告，放置在更好的位置，創造更多收益。當然，對範本不熟悉、害怕語法的話，這部分就比較麻煩一些。

以下會分享在 Blogger 自訂行動版放置 Adsense 廣告的心得、最佳化的方法，並解決一些異常的狀況。

一、官方與自訂行動版的差別

1. 官方行動版 Adsense 效果

依照「官方行動版擺放 Adsense 使用技巧」，會出現的 Adsense 廣告：

一律只出現兩個 Adsense 廣告
一個固定在網頁的最上方，尺寸為 320 x 50
一個固定在網頁的最下方，尺寸為 300 x 250

2. 自訂行動版使用官方 Adsense 工具

使用自訂行動版範本後，就能擺脫制式廣告位置，可在後台「版面配置」，將 Adsense 拖曳到任何想顯示的位置。

有三種安裝 Adsense 的方式：

版面配置 → 新增小工具 → 選擇官方提供的「Adsense」
版面配置 → 新增小工具 → 選擇「HTML/Javascript」→ 放入 Adsense 安裝碼
直接在範本或文章中插入 Adsense 安裝碼

直接用官方提供的「Adsense」小工具最方便，但仍然有侷促性，例如行動版面最適合擺放在網頁上方的 Adsense 尺寸，官方工具沒有這兩個選項：

320 x 50
320 x 100

3. 自訂行動版使用 Adsense 安裝碼

因此另外兩個直接用 "Adsense 安裝碼" 的選項，算是行動版最有彈性的方案：

可以選擇所有 Adsense 尺寸
可放在任何位置

以下將針對這兩個方案，說明如何進行安裝。

二、在文章中各種位置擺放 Adsense

想在文章中擺放 Adsense 是麻煩的事，尤其是行動版。上一篇「行動版擺放 Adsense 技巧」介紹的是直接放入文章內容，只適合新文章使用，所有的舊文章只能自己慢慢手動增加。

不過現在不用這麼麻煩了，這篇「Blogger 文章各種位置插入 Adsense﹍安裝懶人包」，可讓 Adsense 出現在標題前後、繼續閱讀、文末的位置，所有舊文章能一次套用。

如果想在 Blogger 行動版使用這樣的效果，請按以下步驟：

後台 → 範本 → 行動服務 → 按下齒輪圖示 → 選擇「是，在行動裝置上顯示行動版範本」→「選擇行動版範本」改為「自訂」→ 儲存
接下來按該篇文章的流程安裝程式碼即可

三、用 HTML/Javascript 工具安裝

以「 WFU BLOG 行動版」的頁面效果做舉例，一個放在文章區塊上方，一個放在文章區塊下方。步驟大致如下：

1. 如前面提到的步驟，先將行動版範本改為 "自訂"

2. 還沒建立行動版廣告單元的話，進入「Adsense 官網」→「我的廣告」→ 按下「新建廣告單元」：

3. 如下圖順序 A~C 進行：

A. 填入名稱
B. 選擇行動版廣告，例如 320 x 100 橫幅
C. 按下「保存並獲取代碼」

4. 複製下來的程式碼大致長得像這樣：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 320 x 100 - WFU BLOG -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-8931283480311870"
data-ad-slot="4134786100"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

先別急著全部放入「HTML/Javascript」工具

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

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
如果網站使用了多個 Adsense 安裝碼，以上這一段只需要執行一次即可，其他 Adsense 這一行同樣的程式碼可以刪除，以免重複執行。

6. 到後台「版面配置」→ 新增小工具 → 選擇「HTML/Javascript」→ 填入標題(請記住自己設定的標題字串) → 貼上自己剩餘的 Adsense 安裝碼：

<!-- 320 x 100 - WFU BLOG -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-8931283480311870"
data-ad-slot="4134786100"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

7. 如果還需新增其他行動版廣告，請重複以上 2~6 步驟

8. 完成以上所有流程後，等個幾分鐘，你會在網頁版網站上看到 Adsense 廣告。但，行動版不會出現怎麼辦？請依以下步驟：

在範本中搜尋剛剛設定的「HTML/Javascript」工具的標題字串，可在範本找到這個區塊開頭的程式碼
參照「Blogger 行動版範本修改技巧」→「三、讓小工具出現在行動範本」→「2. 參數使用說明」、「3. 其他參數」這部分的說明
加入參數 mobile='yes' 或是 mobile='only'，就能讓 Adsense 在行動版顯示了。

四、版面配置的異常現象

因為剛剛建立的行動版廣告，尺寸只適合在行動版出現，直覺上我們需要將參數設定為 mobile='only'，讓他只在行動版才展示。但長久使用下來，發現設定 mobile='only' 這個參數後， Blogger 有幾個非常嚴重的大 Bug：

1. 小工具在版面配置消失了

以 WFU BLOG 的「DEMO 分站」的版面配置畫面為例，下圖是 Adsense 小工具尚未修改參數之前的樣子：

接著到範本中，將這個工具設定為只在行動版出現，也就是增加 mobile='only' 這個參數：

結果日後進入版面配置時，我們就再也看不到這個小工具了，而看不見也代表無法對小工具進行編輯：

2. 小工具無法改變位置

同時更嚴重的問題是，如果你試圖拖曳其他小工具、更改在網頁上顯示的位置，當按下「儲存排列方式」時，畫面上方會出現錯誤訊息 "發生錯誤。請重新整理網頁，然後再試一次。"

不過別真的重新整理網頁，因為你試一萬次也是一樣。這個問題很嚴重，日後新增小工具時，預設會出現在頂端的位置，而你將無法拖曳到其他位置。

五、解決行動版版面配置問題

為了解決 mobile='only'這個參數帶來的問題，在 Blogger 修復這個問題之前，我們只能繞彎來處理，請依照以下步驟：

1. 將原本的參數 mobile='only'改為 mobile='yes'，這代表小工具將會在網頁版及行動版同時出現。

2. 為了讓小工具在網頁版不顯示，再看一下這張圖：

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

<style>
<b:if cond='data:blog.isMobile == "false"'>
 #HTML1 {
display:none
}
</b:if>
</style>

id 前面要加上井字符號 "#"。這段程式碼可讓這個小工具在網頁版隱藏起來。

3. 光隱藏起來不夠，Adsense 仍然會執行，因此必須再使用判斷式，讓 Adsense 只在行動版執行。

先在範本中找到這個小工具的區塊，並展開區塊的程式碼，會看到類似下圖：

將紅框部分的程式碼改成以下，就能讓 Adsense 只在行動版執行了：

<b:if cond='data:blog.isMobile'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

這個最佳化的流程不是那麼容易，需要對範本、語法有初步的瞭解。若能仔細多看幾遍，應該是可以成功修改的，當然也請「記得備份」，避免悲劇發生。

Blogger 行動版相關文章：

最近朋友買了一個漂亮的 Blogger 範本，除了配色一定比官方範本好看之外，也會有一些 jQuery 特效。不過非官方範本想要自己修改版面，就不是那麼容易了，同時也會有一些相容性問題，例如本文的主題 "標籤雲"，不巧執行就遇上版面破裂的情形。

Blogger 官方的標籤雲功能其實已經做的不錯，有多種選項可以自訂，就只差在版面沒那麼美觀。如果自己改造一下 CSS，那麼就能做出不錯的效果。以下分享這次調整標籤雲的筆記，想先看效果可點這個網頁：

點此看範例網頁

一、官方標籤小工具

不使用官方標籤小工具的話，網路上有不少標籤雲的外掛。如果不在意網頁多執行額外的 js，那麼可使用炫目的 3D 標籤雲效果，標籤會在一棵類似地球儀的圓球上不斷旋轉。安裝教學可參考這篇「HTML5 標籤雲 - TAGCLOUD」

使用官方工具自然是單調了一些，不過至少不影響網頁效能，適合簡潔的版面使用。安裝步驟為：

後台 → 版面配置 → 新增小工具 → 選擇「標籤」工具

如上圖紅框，選擇「標籤雲」即可。其他的各種選項，請依照自己的需求調整。

官方預設的效果不怎麼樣，可以用 "簡陋" 來形容，大概就像上圖這樣。

經過修改後，上圖是不是整齊、美觀、色彩有層次多了呢？

二、修改 CSS 樣式


<style>
/* 標籤雲 start*/
.label-size a {
background: #000; /* 底色 */
padding: 8px; /* 內櫬距離 */
display: inline-block;
margin: 0 2px 6px 0;
color: #fff; /* 文字顏色 */
text-decoration: none;
transition: background 0.5s; /* 動畫效果及時間 */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
}
.label-size a:hover {
background: #aaa; /* 滑鼠經過的顏色 */
}
.label-size span { /* 標籤頁面的 CSS */
display: inline-block;
background: #aaa; /* 底色 */
color: #fff;
padding: 8px;
}
/* 標籤雲 end*/
</style>

CSS 的修改說明請參照綠字即可。很不錯的是，官方預設 CSS 就已經針對使用頻率較低的標籤，讓其顏色變淡。我們用了深色當底色後，變淡的程度就能很明顯看得出來。

以上的修改包含了簡單的動畫效果，滑鼠經過按鈕時，顏色的變換會有過場的效果。

其中 /* 標籤頁面的 CSS */這一段，代表按下某個標籤、進入該標籤的頁面後，這個標籤會使用不同的 CSS 及顏色來區別。

如果字面說明不瞭解，可前往範例網頁，按下側邊欄標籤雲的其中一個標籤，便可看到效果了：

點此看範例網頁

更多 Blogger 官方工具修改技巧：

前陣子幫朋友安裝放在文章結束處的「系列文」功能，以及放在留言區塊前面、類似 Linkwithin 的「相關文章」工具，跟他解釋「系列文可以從文章相關的標籤，隨機抽選指定的文章數量列出」，結果他反問「系列文挑出來的推薦文章跟 "相關文章" 會重複，可不可以把 "相關文章" 改成 "隨機文章"？」。

果然眾人智慧超越個人智慧，我原本的使用方式無法將效用最大化、來讓更多不同的文章曝光，如果放了 "系列相關文章" 功能，那麼有縮圖的推薦文章區塊，就應該使用隨機文章才是。

因此最近把「相關文章」的模組改一下，就成了「隨機文章」。以下先說明原理、特點，如果想直接安裝，請跳至「二、安裝 jQuery 及 CSS」。

一、隨機文章的原理及特色

1. 原理

古早的 Blogger 隨機文章工具有不少缺點：

一次需要讀取全部的 feed 才能隨機抽樣，部落格文章有數百篇時，執行速度就是悲劇了。
Blogger feed 一次最多只能讀取 500 筆資料，超過 500 篇文章的部落格，早期文章就永遠無法抽樣了。
無法排除特定的文章不顯示

本文的工具在設計上並非讀取網站的 feed，而是讀取單篇文章的 feed，所以速度快、不會受到網站文章數的影響，沒有上述的缺點。

2. 特色

這個工具除了改進以上提到的項目，在設計上還有下面這些特點：

可自訂縮圖長寬比例
只需指定顯示的縮圖數量，縮圖會自動為調整最適寬度
可顯示文章的留言數，這是判斷文章熱門度的一個指標
Chrome 瀏覽器可限制文章標題最多顯示三行，版面比較美觀
可排除特定標籤字串的文章不顯示→ 例如 "站務" 相關的文章沒有必要出現在隨機推薦文章，可設定排除標籤含 "站務" 字串的所有文章

3. 版面樣式

根據「黃金比例」的說明，圖片在視覺上最有美感的比例為 1 : 0.618，因此這個隨機文章的縮圖比例，預設值就是黃金比例。

如果一行設定為擺放四篇文章，四個縮圖的寬度效果請見文章開頭的示意圖。

如果一行設定為擺放三篇文章，三個縮圖的寬度效果請見下圖：

如果一行設定為擺放兩篇文章，兩個縮圖的寬度效果請見下圖：

如果習慣傳統的正方形縮圖，一行可以擺放較多文章，五個縮圖的寬度效果請見這個範例網頁：

點此前往範例網頁

二、安裝 jQuery 及 CSS

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 隨機文章 */
.rndPost_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: left;
margin-top: 10px;
}
.rndPost_allPost { /* 隨機文章區塊 */
display: table-row;
}
.rndPost_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
transition: background .7s;
-webkit-transition: background .7s;
-moz-transition: background .7s;
}
.rndPost_post:hover {
background: #f5f5f5;
text-decoration: none;
}
.rndPost_post:hover .rndPost_picFrame {
border: 1px solid transparent;
}
.rndPost_post:hover .rndPost_pic {
opacity: 0.5;
}
.rndPost_post:hover .rndPost_comm {
opacity: 1;
}
.rndPost_picFrame { /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
position: relative;
transition: border .7s;
-webkit-transition: border .7s;
-moz-transition: border .7s;
}
.rndPost_pic { /* 圖片 */
border-radius: 5px;
display: block;
opacity: 1;
transition: opacity .7s;
-webkit-transition: opacity .7s;
-moz-transition: opacity .7s;
}
.rndPost_comm {
position: absolute;
right: 10px;
bottom: 10px;
color: #222;
text-shadow: 1px 1px 2px #bbb;
font-size: 11px;
opacity: 0;
transition: opacity .7s;
-webkit-transition: opacity .7s;
-moz-transition: opacity .7s;
}
.rndPost_comm img {
width: 12px;
height: auto;
vertical-align: -3px;
}
.rndPost_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .7s;
-webkit-transition: color .7s;
-moz-transition: color .7s;
}
</style>

第一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數，各區塊請見綠色註解的提示。

三、安裝程式碼

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

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

F：一行顯示的文章數量，此為最重要的參數，設定之後系統會自動調整圖片寬度

H：如果不想顯示黃金比例的縮圖，例如要改為正方形的話，請將紅色數字改為 1

I：可自訂顯示的大標題字串

J：藍色字串請改為自訂的「無縮圖替代圖片網址」

K：預設滑鼠經過時，會浮現留言數量。若不需要此功能，請改為 0

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

M：此工具預設會出現在留言區塊之前。如果要擺到到別的位置，請將字串改為 "." + class 名、或是 "#" + id 名稱。

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

想要先試玩一下效果，可在本站文章後面、留言區塊之前找到隨機文章區塊；或是也可前往前面提到的「範例網頁」測試。

更多實用工具：

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

家人使用了很久的 iPhone 4s，電池已經換過一次，但最近又開始出現耗電快速的情形，看來又該換電池了。原本準備讓店家換，但打了幾家電話，每個都說自己電池是原廠的...看倌你知道原廠電池要多少錢嗎？行情價約 NT. 2800。

然而這些收費 NT. 600 ~ 900 的店家，竟然都大言不慚地說自己是原廠電池，只能說劣幣驅逐良幣，難道敢說自己不是原廠的人都會沒生意？台灣大企業無良當道，小的自然是跟風追隨，消費者若想抵制歪風，最好的手段就是別姑息，讓抱著僥倖心態、不誠實的店家賺不到錢。

做了一些功課後，改從露天購買「iPhone 電池 + 工具組」自己來。而為了確保從拍賣買到的電池，品質及壽命是良好的，需要有檢測電池容量、健康狀態的方法，以下為整個過程的筆記。

一、購買 iPhone 電池的策略

1. 原廠副廠的抉擇

如前所述，原廠電池可在神腦換，價格 NT. 2800，PTT 很多討論提到這一點，例如：

https://www.ptt.cc/bbs/iPhone/M.1418907403.A.727.html

副廠電池從 NT. 200 ~ 500 不等，聽說來源都是淘寶的大陸廠，因此最貴的價格其實可能是一樣的東西，不一定代表較好的品質。

假設花了 2800 買原廠，其實最多也只能使用約 2 年。副廠就算一年多就要更換，然而花費同樣多的預算 2800，用於副廠電池可以交替使用十年以上沒問題。

一點小提醒，如果真的用幾百塊買到所謂 "原廠電池"，那代表這可能是原使用者拿去修理，被店家留起來的二手原廠，這樣的東西循環次數已經不知幾百次，還不如買全新的副廠電池來使用。

2. 副廠電池的挑選

然而使用副廠電池需要承擔電路設計不良，可能會過熱、膨脹、爆炸等風險，因此必須挑選具有一定品質的工廠、價格不要太低。

要過濾掉有風險、不良品質的賣家，可以從這幾點著手：

評價夠多
賣出數量夠多 (可取得足夠的評估樣本數)
問與答數量夠多 (可取得足夠的評估樣本數)
問與答有無賣家反應電池不良的狀況
不要挑選多種型號混賣的頁面，你要挑選的那個型號的樣本數，會被稀釋掉

如果以上都 ok 的話，那麼至少這筆交易可以比較令人放心。以下這個賣場連結僅供參考，說不定過一陣子就售罄。由於露天賣家太多了，或許還有其他不錯的選擇，請讀者自行篩選與評估：

http://goods.ruten.com.tw/item/show?21401090851911

3. 檢測電池容量

雖然店家有過去的紀錄可查詢，但寄到自己手上的電池品質又是另一回事，必須實地檢測電池容量才能證明是否為全新品。當然，過去記錄較佳的話，手上電池沒問題的機率是比較高的。

iPhone 如果越獄(JB)的話，可以很輕易取得電池的相關數據。但如果你也不喜歡越獄的話，那麼取得電池容量資訊的方法就麻煩多了，請見後述的筆記內容。

二、iTools

1. 簡體版

iTools 是不越獄取得電池資訊比較簡單的方法，過去也曾使用過。但現在發現他是大陸軟體，由於資安考量，對岸的東西建議少裝為妙。如果膽子夠大的話，可參考這篇的教學「簡單檢查電池健康度 for iTools」來安裝。

2. 繁體版

後來發現 iTools 原來出了繁體版，是由「遊戲橘子」代理：

http://tw.gashplus.com/iTools/Download

不過高興的太早了，使用到一半時會要求你註冊遊戲橘子帳號，而且必須進行「手機號碼認證」，由於不想為了看 iPhone 電池資訊這件事而讓個資外洩，又默默地移除了這個軟體。

如果不在意個資的話，可參考這篇教學「iTools 3.0 全新功能新體驗」來安裝。

三、官方檢測 log 檔方法

不使用 iTools 的話，蘋果官方提供了一個方法，但是很麻煩，且失敗率高。請參考這篇「無JB狀態下也能檢查電池健康度」。

其原理是，在 iPhone 的設定中，打開「診斷與用量」的選項，讓 iPhone 每日傳送 log 紀錄檔。但很不便的是，必須一天後才能檢視記錄檔。

而更麻煩的是，這個記錄檔你往往眼睛看到脫窗，運氣好才可能找到你要的資訊；運氣不好的話，將看不到相關資訊。

很不幸的是，我就屬於運氣差的使用者，過了一天、兩天，天天看就是找不到 log 檔的電池資訊...

後來發現很多使用者也有相同情形，在 PTT 爬文後有人說：

電池資訊不一定每天都會顯示
有人一開始有看到，後來連續五天都看不到
有人說非官方晶片可能無法讀取到電池資訊

總之，最後我放棄了這個方法。

四、iBackupBot

還好除了 iTools 之外，還有這個 iBackupBot 可以輕易地取得電池資訊。請依以下步驟進行即可：

1. 在電腦上安裝 iTunes

http://www.apple.com/tw/itunes/download/

2. 下載 iBackupBot

http://www.icopybot.com/download.htm

3. 執行 iTunes，並且連接自己的 iPhone，確認裝置連接沒問題後，將 iTunes 關閉。

4. 接著執行 iBackupBot，應該就能順利連上 iPhone，如下圖會顯示右半部的 iPhone 裝置資訊：

A: 按下「More Information」

B:出現的這個視窗包含了所有需要的電池健康度資訊

CycleCount:循環次數
DesignCapacity: iPhone 原廠電池容量預設值
FullChargeCapacity:實際電池容量

看到循環次數為 2(代表為全新電池)，以及實際電池容量為 1378 後，這次的副廠電池交易算是可以放心了(跟原廠電池容量 1430 相差不大) 。

5. 另外補充一點，前面很麻煩的「三、官方檢測 log 檔方法」，在 iBackupBot 可以用簡便的方式操作：

點選上圖左下角的 Tools → Crash Report，接著右半邊可看到 "log-aggregated-...." 的紀錄檔，叫出檔案後可執行搜尋的動作，不必在手機上用眼睛找 "com.apple.snapshot.battery.maxCapacity" 這樣的字串。

其他 3C 產品心得：