WFU BLOG

前陣子讀到 +coke tech這篇「Blogger 使用 Cloudflare CDN 的幾點心得」，他的實驗結果可以讓 Blogger 自訂網域避開大陸的封鎖。

其實這個主題長久以來一直躺在待辦事項，一直沒有動筆的原因是 WFU BLOG 的主題不太需要大陸市場(Blogger 大陸不能用)，但不代表沒有持續關注相關的資訊，因為這是台灣部落格站長都相當關注的一件事。

這次 Coke 的實驗也讓 WFU 燃起動力，拿出過去整理的資料繼續研究這個主題的可能性，順便把這些待辦事項消化掉。接下來會寫一系列相關的文章，首先是研究最不確定的因素，有哪些「外連空間/圖床」可以在大陸正常運作？

一、檢測工具

網路可找到很多「檢測網站是否被大陸封鎖」的線上服務，以前常用的工具「中國的網絡審查」、「Website Test behind the Great Firewall of China」由於等待時間很久，做大量測試不方便，這次找到一些比較快速、以及比較精確的測試服務：

1. greatfirewallofchina.org

http://www.greatfirewallofchina.org/

這是最推薦的檢測工具，速度最快，沒幾秒就能出現結果，而且也滿準確的。

使用時請注意，要輸入 "http"開頭的網址，若輸入 "https"則一律出現錯誤訊息。

上圖為測試本站 "www.wfublog.com"的結果，不過有點意外就是了，原來 WFU BLOG 在大陸是看得到的？是我誤會了嗎，以前用其他工具測試，有出現 "被屏蔽"的字樣呢！

2. viewdns.info

http://www.viewdns.info/chinesefirewall/

這個工具只比第一個工具慢一點點而已，不過可顯示較多的數據。WFU 推測這兩個其實是同一個程式，只不過第一個用 API 的方式從第二個網站只擷取 "成功與否"的資訊，不分析 IP 位址等其他資訊，所以速度才比較快。

上圖為測試「CC0免費圖庫搜尋引擎」"cc0.wfublog.com"的結果，同樣可在大陸顯示。

3. webkaka.com

http://www.webkaka.com/webCheck.aspx

這應該是最精確的測試工具，直接從大陸各省分 45 個伺服器傳回測試結果，每個地區的結果都可能不太一樣，比較能看出平均效果。如果前兩項工具與這個工具檢測結果相斥，建議以這個為準。

上圖一樣是 "cc0.wfublog.com"的測試結果，這下比較能揭開真相，雖然前兩個工具都顯示不被大陸屏蔽，但這個工具能顯示網站在 45 個伺服器的開啟時間，有的快有的慢，而絕大多數網頁的開啟時間是過慢的，分布圖可以看到紅通通的一片！

不過這是因為 Blogger 範本未經過整理、及未針對大陸地區優化。雖然網址沒被封鎖，但圖片跟外連可能很多都被封鎖，導致網頁開啟過慢。這些問題將會在下一篇來談，本篇先談外連空間跟圖床的可能方案。

二、免費空間

網頁會用到的一些外連 js/css 檔，除非有購買虛擬主機，否則一般需要放在免費空間。不過很可惜，比較知名、能夠讓檔案外連的空間，都已經被大陸封鎖了。

這是維基整理的「雲端免費空間列表」，能否外連請看 "Direct access"那一欄：

https://en.wikipedia.org/wiki/Comparison_of_file_hosting_services

以下分別使用 viewdns.info 及 webkaka.com 來測試：

Google Drive:均被封鎖
Dropbox:均被封鎖
Copy.com: viewdns.info 封鎖、webkaka.com 未被封鎖
OpenDrive:均未被封鎖

測了半天終於有一個可以連大陸的免費空間，不過我想 OpenDrive 沒被封鎖，是因為不夠有名、沒出現在上面維基的列表吧！哪天出名了大概也沒得用~~

讀者也可自行測試其他免費空間是否被封鎖，同時 OpenDrive 這個方案建議保持低調，看看能撐多久。需要教學的話，請參考這篇「Google Drive 備用方案 OpenDrive 教學」。

三、免費圖床

1. 有名圖床

據我所知，有名的免費圖床都被大陸封鎖了，例如 PICASA、Flickr。而且就算付費買圖床，例如 Flickr Pro，由於網域被封鎖，花錢還是無法阻止這件事。

由於免費圖床太多，不清楚哪些會是漏網之魚，不過 WFU 用本文測試工具，竟發現知名的 "imgur.com"沒被封鎖，也許讀者還可再自行測測，還有哪些圖床可在大陸存活。

2. 大陸圖床

退而求其次，把圖片放在大陸總不會被封鎖了吧？在網路上找到這篇很棒的參考資料「台灣與大陸各家圖床外連貼圖效果展示」，作者列表整理了大陸可外連的圖床，一共有這兩家：

作者並貼出了這兩個相簿的圖片連結，以下兩個圖片網址，用檢測工具 webkaka.com 都是沒問題的(好像是廢話?)：

http://ww3.sinaimg.cn/mw690/7e48b87bgw1ee7ehaiw4qj21kw0w0jya.jpg
http://b.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=ea9d4bebdfc451daf2f60cee86c6235b/ac6eddc451da81cbc89350785066d0160924310a.jpg

解決了棘手的網路空間及圖床問題後，下一篇要來討論，台灣的部落格平台，是否就能順利突破大陸封鎖，成功拓展大陸市場！

免費空間相關文章：

台灣的免費部落格平台基本上已經全部被大陸封鎖，若想要避開封鎖，似乎只有自行架站一途。當然，沒有固定收益的部落格，很難支撐這樣的花費。

若仔細瞭解大陸封鎖的原理，一一拆解分析之後，是有突破封鎖的可能性。上一篇「不被大陸封鎖的 "免費空間/圖床"測試心得」，已經提供了其中兩項最困難的解決方案，本篇繼續分析其餘待克服項目的可能性。

(圖片出處: pickupimage.com)

一、大陸如何封鎖網站

先從原理說明，一個網站的每個部分(頁首到頁尾)，例如文章區塊、留言區、側邊欄、廣告等等，能否在大陸地區正常顯示，取決以下是否被封鎖：

主機 IP
網站的網域
所有外連檔案的網域(js/css...)
圖床的網域
Iframe 的連結網域

以上 5 點要全部解決，網站才能在大陸生存，接著就來看每一點能否解決的可能性。

1. Wordpress

使用 WP 部落格平台，可以避開以上全部 5 點，不過一年要花好幾千塊，流量高則數萬元跑不掉。大部分部落格無法負擔這樣的開銷，本文先以免費部落格平台來討論。

2. 免費中文部落格

少部分免費部落格平台能自訂網址，例如痞客邦(Pixnet)，可以避開第 2 點(網站的網域)，但第 3 點則不可能解決，因為台灣的部落格不允許修改範本內容。

該部落格平台使用的 js/css 檔，如果無法修改路徑、而這個平台的網域又被封鎖的話，那麼也都無法讀取與執行。因此就算能自訂網域，網址能避開封鎖，但是網頁內容(js/css)一樣無法正常讀取。

唯一有機會解決第 3 點的平台是 Google 旗下產品 "BLOGGER"，因為可以自行修改範本內容，進而修改 js/css。

那麼，以下的內容才是本篇真正的主題，Blogger 要如何避開上述 5 點的封鎖？

二、突破封鎖

基本上 Google 服務的網域幾乎都被封鎖了，因此我們必須逐一檢視本文需要解決的 5 點項目，都不可以有被封鎖的網域存在。

而如何測試否被大陸封鎖，請參考上一篇「不被大陸封鎖的"免費空間/圖床"」→「一、檢測工具」。

1. 網站的網域

由於 Blogspot.com 這個網域被封鎖了，所以要讓大陸能看到網站，買網址是必須的第一要件。

網路上提供很多不需要購買的免費網址，例如 "twbbs.org"，但請聽 WFU 的建議，不要使用免費網址，遲早都會被大陸封鎖。

其實在國外買網址並不貴，平均一年約 NT.300，所有站長絕對都負擔得起，可參考「自訂網域」相關文章。

2. 主機 IP

從國外網友看到一些案例，說 Godaddy 代管的網站會被封鎖。我想實際原因可能很複雜，說不定是他自己的網站剛好有 "敏感字眼"，但也可能是剛好其他 Godaddy 代管的網站被封鎖，而同一區段的 IP 遭到波及全部被封。

那麼好消息是，經由上一篇提到 Coke 的實驗「Blogger 使用 Cloudflare CDN 的幾點心得」，將網站交由 Cloudflare 代管後，似乎改變了 IP，從而不被大陸封鎖。

但這個方法是針對 IP 被封鎖的情形，若你的網站有 "敏感內容"導致整個網域被封鎖，那換 IP 是沒有用的，只能另外買個網域重起爐灶。

3. 外連的網域

這部分將 "js/css"及 "Iframe"外連一起說明，因為作法相同。不過內容太偏技術性，因此簡單帶過。

總之可以開啟網頁原始檔，檢視所有的外連路徑。如果外連屬於 google 服務的網域，想辦法把 js/css 內容直接塞到範本中，雖然會造成範本肥大，但如果真要顧慮大陸市場的話，也只能這麼做。

否則的話，就是要改放在不會被封鎖的網路空間，請參考「不被大陸封鎖的「免費空間/圖床」測試心得」→「二、免費空間」。

不過免費空間將來都會有被大陸封鎖的可能性，所以這件事很難有更好的作法。

WFU 提供一個目前還可行的撇步，有一種不算完全免費的空間，沒有被大陸封鎖。例如你家上網的「電信業者」(為了安全就不明講了)，可能會提供小容量的免費空間可使用，那麼 js/css 就可放在這個空間外連，不會被封鎖。一樣，請低調使用，免得將來沒得用~

四、圖床

雖然上一篇已經提供了免費圖床的測試心得，不過這只能說是一種選項而已，圖床其實是本篇 5 項問題之中最棘手的一個。

免費圖床有些未被大陸封鎖，目前雖然可使用，但萬一將來被盯上，圖床搬移的動作是很痛苦的，因此可參考以下的狀況：

1. 不太需要搬圖床的網站

如果是新成立、或是文章數還不多的網站，搬移圖片網址不會花太多時間、或是還能忍受這樣的時間，或許可考慮使用上一篇「不被大陸封鎖的「免費空間/圖床」測試心得」→「三、免費圖床」→「2. 大陸圖床」，然後將來部落格也必須持續使用大陸圖床。

2. 網站已經有大量圖片

旅遊、美食、攝影等等圖片使用量大的部落格，很難使用上一個方案進行搬遷。要讓網站的圖片在大陸能顯示，最穩妥的方式，目前只能花錢租虛擬主機，大概一年 USD 60 起跳，依網站流量而定。

那麼，這類網站只好評估一下花錢在主機這件事上值不值得。不過，如果有經費租虛擬主機來放圖，那麼建議可以直接搬到 WP 了。

3. 折衷作法

如果非常需要拓展大陸市場，又無法負擔圖床、主機、流量等等龐大的固定支出，那麼或許不必執著於部落格會被大陸封鎖這件事。

既然台灣的網站會被封鎖，那麼成立一個大陸的部落格分站，直接把內容複製過去，就不會被封鎖了！

就像很多部落客在痞客邦有據點、Blogger 也有點、Instagram 也會發文，那麼就再多照顧一個大陸網站就是了。

如果能找到便利的發文工具，可以同時發佈內容到多個部落格，那麼為這件事多花的心力應該是可以接受的，在能夠節省額外花費的前提之下。

六、後續

本篇為各種需求的網站都提供了建議方案，經由這樣的說明，如果對程式碼熟悉的 Blogger 讀者，應該是能夠自行處理不被大陸封鎖的細節。

如果程式碼不熟，要處理這件事的話，可用「諮詢服務」的聯絡表單與我聯繫。

現在瞭解了部落格是有突破大陸封鎖的可能性，不過是否決定前進大陸，還有其他需要考量的地方。由於篇幅的關係，其他層面的問題，下一篇再來討論。

網域相關主題：

舊版本「文章列表極速版﹍依標籤排列」發表後，獲得許多讀者的想法與意見，大多是非常有建設性的，可以讓這個小工具使用上更為友善。

這個更新版將目前收到的構想全部統合，運用的彈性比以前大很多，已經安裝過的讀者，請重新安裝本篇的更新版本。

點此看範例網頁

一、更新內容

1. 處理樹狀標籤

如果部落格使用了「樹狀標籤」，會面臨標籤名稱過長的問題。WFU 建議一定要安裝「讓 Blogger 樹狀標籤只顯示真實標籤名稱」這個小工具，可大大縮減字串的長度。

而本篇的更新版也採用同樣的原理，讓文章列表的 "樹狀標籤"，只會顯示 "真實標籤"的字串。

2. 設定只顯示部分標籤

舊版只能設定排除的標籤，當需要排除的標籤很多時，不少讀者反應希望能夠設定 "只需要顯示的標籤"就好，否則設定排除的標籤是很痛苦的事，因此本篇的更新版特別加入此功能。

3. 不需輸入完整標籤名稱

無論是設定 "排除"或 "包含"的標籤，都不需要輸入完整的標籤名稱，只要輸入 "部分字串"即可。這是一個很方便的設計，尤其是對於樹狀標籤，若要一次 "排除"或 "包含"某個大分類的標籤，例如以下這些樹狀標籤：

Blogger-工具-文章列表
Blogger-Hack-留言
Blogger-筆記

只要設定字串 "Blogger"，就能一次 "排除"或 "包含"所有的標籤。

二、安裝程式碼

新開一篇文章 → 複製以下程式碼：

請先別存檔，以上是主程式的部分，還需要複製 "版面樣式"的部分，如不需要修改參數，請跳至「三、安裝 CSS」。

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

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

E：可設定最近的幾篇文章要顯示為新文章，紅字 15代表最近的 15 文章，會標示為 "新文章"。

F：藍色字串即為標示 "新文章"時所顯示的字樣。若要使用圖片，可填入 img 標籤的圖片語法。

G：若只想顯示部分特定標籤，請填入標籤包含的字串，每個項目之間請用小寫逗號 ","隔開，最後一個項目之後不可有逗號。若不需設定此項，本行請留下 tocLabel.include = []; 這樣的內容即可。

H：若想排除部分特定標籤，請填入標籤包含的字串，每個項目之間請用小寫逗號 ","隔開，最後一個項目之後不可有逗號。如果沒有需要排除的標籤，本行請留下 tocLabel.exclude = []; 這樣的內容即可。

I：文章開合的效果，預設值 "fadeToggle"為「淡入淡出」的效果；若改為 "slideToggle"則有「滑動開合」的效果

J：標籤若不標示有新文章，請改為 "N"。

K：若不展開第一個標籤的文章，請改為 "N"。

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

三、安裝 CSS

接在「二、安裝程式碼」這部分的程式碼後面，貼上以下 CSS 程式碼：

<style>
.tocLabelTitle {  /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Droid Serif, "標楷體", sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}
.tocLabel {  /* 個別標籤區塊 */
margin: 0px 5px 15px;
}
.tocLabelToggle {  /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}
#tocInfo {  /* 資訊區塊 */
text-align: left;
margin-top: 30px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
font-style: italic;
}
.tocLabelNewText {  /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
}
.tocNewText {  /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
}
</style>

請特別注意第四行的紅色字串，如不滿意標籤按鈕的寬度，可自行調整 200 這個數值。

現在可以將文章發佈，接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能)，提供訪客有很好的導覽效果。

如果有 CSS 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：

點此看範例網頁

四、注意事項

根據這篇「官方說明文件」，標籤的名稱不得使用以下字元：

&<>@!+,

如果使用本篇的工具而執行不正常時，請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。

其他文章列表工具：

為圖片 IMG標籤自動添加 ALT 描述內容，是 SEO 的重要工作，可為網站增加不少額外流量。但這件事很瑣碎，需要額外花不少時間。

因此 WFU 製作了「ALT 內容自動產生器」，讓這件事變得非常容易。請見本文的操作說明，並前往這個工具的頁面：

ALT 內容自動產生器

一、四種 ALT 格式

ALT 要能自動產生內容，得先有參照的對象。若要增加被搜尋到的機會，比較適當的參照對象會是 "圖片檔名"、"文章標題"這兩種。

img-alt-generator-options-圖片 ALT 描述自動產生器

而 WFU 的設計是，將這兩個元素排列組合後，產生了四種格式，請參考上圖小工具的四個選項：

只用文章標題
只用圖片檔名
圖片檔名+文章標題
文章標題+圖片檔名

正常來說，能在 ALT 之中塞入越多字串當然越好，代表有更高的機會被搜尋到，那麼「圖片檔名+文章標題」或「文章標題+圖片檔名」會是較佳的選擇。

但也許不少站長並未針對 "圖片檔名"進行優化過，那麼 ALT 塞入圖片檔名字串並不具任何意義，因此設計了四種選項，讓站長們保有各種選擇的空間。

二、操作說明

1. 其他選項

此工具的主要功能為「Blogger 圖片語法轉換器」，因此還可看到 "圖片寬度"、"其他項目"的設定選項，本篇的 "ALT 內容自動產生器"算是其擴充功能。

若需要其他功能，請參考「Blogger 圖片語法轉換器」的使用說明。

若不需要其他功能，可不勾選相關的選項，或選擇 "不改變尺寸"。

2. ALT 相關操作

使用非常簡單，先勾選「一、四種 ALT 格式」的選項之一，可能會需要填入文章標題。
接著在 "貼上 html 碼"的欄位，貼上整篇文章的 html 碼內容即可。
以 Blogger 為例，請在文章編輯器切換到 "HTML"模式，複製全部內容。注意，請勿貼上 "撰寫"模式的內容！
貼上後，右邊欄位 "轉換結果"會立刻出現轉換結果，並全部選取，使用者可直接按 Ctrl-C複製。

img-alt-generator-example-圖片 ALT 描述自動產生器

上圖為文章內容貼上後自動轉換的結果，可注意紅框標示處，自動產生了 ALT 內容，排列方式為 "圖片檔名+文章標題"。

另外由於勾選了 "另開視窗"，會自動為文章中所有的 A標籤，加上 target="_blank"屬性。

三、注意事項

1. 圖片檔名

為了加強 SEO 效果，建議站長將來為圖檔命名時，使用有意義的英文字串。那麼使用這個工具時，勾選自動幫 ALT 加入檔名字串，會有較佳的搜尋效果。

2. ALT 不會覆寫

這個工具設計了防呆機制，若原本某些圖片設定了 ALT 屬性，那麼這個工具在轉換時，不會處理有 ALT 屬性的 IMG標籤，只會處理沒有 ALT 屬性的標籤，以免將原來的設定覆蓋掉。

3. 完整說明

本文只針對工具的操作進行說明，關於 ALT 對於 SEO 的作用，會另外說明。

更多網站相關工具：

相信有注意 SEO 的讀者都曉得，在圖片標籤 IMG加上 ALT 敘述，是做 SEO 的基本功，可增加被搜尋引擎索引的內容，提升被訪客搜尋到的機會。

對於公司、形象網站而言，不太需要常常增加圖片，那麼處理 ALT 這件事不算太麻煩。不過對於部落格站長，常常需要發表新文章，那麼逐一設定每張圖片的 ATL 內容，就是件苦差事了，因此不太可能在這件事上花時間。

為了解決處理 ALT 的難題，WFU 寫了一個「ALT 內容自動產生器」，讓站長們可以快速地完成這項 SEO 作業，同時本文也簡單介紹，為何中文環境的圖片搜尋結果不佳，及如何改善 ALT 索引。

(圖片出處: pixabay.com)

一、圖片搜尋排名依據

首先參考一下圖片 SEO 的相關教學：

簡單歸納一下重點：

搜尋引擎會根據一張圖片附帶的相關資訊進行索引
影響圖片搜尋結果最重要的因素是 ALT 所儲存的內容
有意義的圖檔名稱也是重要的索引內容
圖片附近出現的文字，也是相關的索引內容

根據結論，時間足夠的站長，需要優化的是以上這些項目。如果時間不夠的話，那麼至少做完最重要的一項 → 設定 ALT 內容。

二、實際範例

下圖為使用 "iphone 4s"作為關鍵字，搜尋 Google 圖片產生的結果。其中標示了兩個紅框，我們來分析排名第一與排名中段的差別。

google-search-image-iphone-4s-提升圖片搜尋自動產生ALT內容

範例 1：

這是第一名圖片的網址：http://gadgets.ndtv.com/apple-iphone-4s-768

除了圖片上下都出現了關鍵字 "iphone 4s"，用「Chrome 開發人員工具」檢視圖片的資訊後發現：

ALT 敘述包含關鍵字 "iphone 4s"
圖片檔名也包含關鍵字 "iphone 4s"

因此第一名符合前面提到的所有重點，算是實至名歸。

範例 2：

這是中段班圖片的網址：http://www.newmobilelife.com/2015/02/12/ios-8-1-3-battery-problem/

圖片下方出現了關鍵字 "iphone 4s"，用「Chrome 開發人員工具」檢視圖片的資訊後發現：

ALT 敘述、圖片檔名都沒有包含關鍵字"iphone 4s"。

因此，以上的小小實驗，完全符合本文要說明的要點。

三、中文搜尋結果

不知道讀者是否有跟 WFU 一樣的感覺，用中文來搜尋圖片時，常常要花比較多的時間，因為搜尋結果比較少，最後為了節省時間，轉而使用英文關鍵字來搜尋，反而比較快找到需要的圖片。

可能的因素大概是這樣：

中文輸入較費時，不方便做圖片 SEO
缺乏方便產生 ALT 的工具
圖片檔名支援中文不易，網址有中文可能會被轉碼
中文檔名在 Blogger 後台上傳圖片後會被重新編碼
國外上傳圖片分享的風氣較盛，所以素材較多

因為這些因素的限制，中文環境要做圖片 SEO 的話，C/P 值並不高，投入的時間與回報可能不成比例。

四、折衷作法

然而在中文環境下，ALT 這一項是有設定就加很多分，沒有就很難得分。WFU 認為可行的作法是，製作一個產生器，自動從周遭環境，擷取重要的字串，來充當 ALT 內容。

我的習慣是，設定圖片名稱時，會順手用英文描述一下，來當作檔名，每個英文單字用 "-"符號隔開這樣。除了這是 SEO 的其中一項要點，且製作了產生器後，可用程式自動抓圖片檔名，成為 ALT 內容。

另外文章標題也是搜尋的一項要點，"文章標題"的權重比內文還來得大，那麼，用產生器讀取文章標題，並塞入 ALT 內容，也是很好的一個點子。

最後，混合 "文章標題"與 "圖片檔名"，讓 ALT 能被索引的字串、被搜尋到的機會同時最大化，這就是「ALT 內容自動產生器」的設計發想。

如果覺得這個構想不錯的話，這個工具的使用操作說明，請參考這篇「ALT 產生器使用說明」。

以後部落格(Blogger) 的新文章，在發佈之前只要使用這個「ALT 內容自動產生器」，就能自動幫圖片加上 ALT 內容。

五、舊文章圖片的處理

如果部落格文章數不多，例如只有數十篇，那麼或許勤勞一點，使用這個轉換器，一篇篇複製貼上，還不會花太多時間處理。

但如果舊文章有數百、上千篇，那麼這就是個大工程了！如果讀者有大量 Blogger 舊文章需要批次處理圖片 ALT，可參考「諮詢服務」→「5. 部落格相關業務」→「C. 批次修改文章內容」。

SEO 相關文章：

blogger-https-guide-BLOGGER 終於支援 HTTPS﹍搞懂安全傳輸協定的重要性及影響

雖然 Blogger 近年來一直不被看好，很多人認為隨時可能被 Google 遺棄，然而他們可能不知， Blogger 持續不斷進行各種有形、無形的更新，例如官方發佈的「各種表達式語法」、WFU 發現的「Blogger 文章封面圖語法」。而最震撼的，就是官方昨日發佈的重大消息「Blogger 開始支援 HTTPS 安全傳輸協定」。

相信這是一個非常明確的訊息，以及給 Blogger 使用者的定心丸，因為支援 HTTPS 加密協定必須使用更好的伺服器進行運算，也代表 Google 在這方面的投資與決心。其實 WFU 對 Blogger 的前景看法一直沒變，可參考「Blogger 的未來」。

回到主題，Blogger 開放 HTTPS 功能後，無論目前是否需要、到底有沒有實質的好處，使用者要不要馬上開啟，的確需要評量一下。每個站長的需求不盡相同，這件事很難有標準答案，WFU 試著從各種角度，來思考 HTTPS 安全傳輸協定的功用與影響，提供不同的想法讓讀者做抉擇。

(圖片出處: pixabay.com)

一、HTTPS 的優點

初期官方有很多細節需要再測試、不少問題尚待解決，但畢竟已經跨出了很大一步。根據「官網的中文說明」，HTTPS 主要有這三個優點：

1. 加密：對交換的資料進行加密，防止資料遭到竊取。也就是說，當使用者在瀏覽網站時，任何人都無法「竊聽」其對話、追蹤他們在多個網頁之間轉換的活動，或竊取其資訊。
2. 資料完整性：系統會偵測出資料在傳輸過程中是否遭到有意或無意的修改或破壞。
3. 驗證：驗證您的使用者是否與預期的網站進行通訊。這能預防攔截式攻擊並建立使用者的信任感，進而促進其他商業利益。

在安全性這方面，HTTPS 的優勢跟 HTTP 相比是無庸置疑的。只不過 WFU 的初步想法是：

A. Blogger 都是公開的文字內容，訪客留言也都必須公開(官方無悄悄話功能)，似乎沒什麼資訊好被攔截與竊取，或影響商業利益？

B. Blogger 不能控制後端伺服器，也就是說不像自行架站的平台，需要自己處理前後端的資料傳輸、驗證資料是否被竄改，那麼有無 HTTPS 似乎沒什麼差別？

C. 通常像是銀行、購物平台、需要 "輸入帳號密碼"的會員系統，比較需要對 "交換的資料進行加密，防止遭到竊取"，因此這些網站會是駭客願意花心力下手的目標。就算原本 Blogger 走 HTTP，但說實在駭客也沒什麼東西能下手，他們很忙的，應該不會想花時間從 Blogger 平台偷走什麼？而且 Google 的頂尖工程師們，已經幫我們把後端安全顧得很好了。

D. 我們的網站不是「科技部」、也不是「總統府」，而這些網站也不會想要架在 Blogger 平台。那麼，會有駭客想要花時間來竄改部落格平台的網頁內容嗎？

因此，官方列出的三項優點，並沒有太強烈的誘因讓我想啟用 HTTPS，因為看起來跟走 HTTP 沒什麼差別。

二、切換 HTTPS 步驟

無論如何，網址出現一個綠色鎖頭的圖案還是滿炫的，比較可以得到讀者的信任。如果想要切換為 HTTPS 的話，請參照以下內容：

1. BLOGSPOT.COM

目前官方只先開放 BLOGSPOT.COM 網域這個功能，也就是說，自訂網域 (就像 wfublog.com) 還要再等等。

除了參考官網中文教學「為網誌啟用 HTTPS」，+coke tech 也提供了 step by step 圖文說明：「好消息 GOOGLE BLOGSPOT 開始支援 HTTPS」。

2. 已知問題

由於功能才剛開放，不妨視為試用版，目前還有許多問題待解決，前面 coke 這篇文章、及下方我跟他的留言對話，都提到了不少項目。

主要癥結在於，只要切換為 https 模式，網頁中的所有連結，例如 js/css/jpg/html...，全部都要走 https，否則就會被判訂為 "混合內容"。

這件事要解釋得花不少篇幅，不過官網已經說明得很仔細了，並提供大致的自行修正方法，請參考官網的中文教學：「修正網誌的混合內容」。

3. 自訂網域

如果等不及官方開放自訂網域，也是有方法可以立即使用 HTTPS，因為免費的 CDN 服務「Cloudflare」之前開放了免費 SSL 的服務，所以可以藉由將網站交給 Cloudflare 代管，進而申請使用 HTTPS。

詳細的步驟，可參考 coke 這篇「自訂網址如何設定 CLOUDFLARE FLEXIBLE SSL，讓網站成功運行 HTTPS」。

4. 大陸市場

另外補充一點，若有讀者誤會 "開啟 HTTPS 可以突破大陸封鎖"的話，藉機會說明一下，HTTPS 跟大陸封鎖是沒有關係的，並非資訊加密了之後大陸就無法封鎖。技術上而言，大陸是針對 IP 及網域進行封鎖，例如 BLOGSPOT.COM 的網域被鎖了，用 HTTPS 也是一樣。這件事要突破的話，請參考這篇「部落格網站如何不被大陸封鎖？」。

三、使用 HTTPS 的代價

1. 速度

一方面 HTTPS 需要進行加密運算，因此伺服器處理的時間會稍微多一點點。

不過影響比較大的應該是緩存(cache)，以 HTTP 而言，當瀏覽器經常讀取相同檔案時，可以直接從 cache 抓資料，不必從網路傳輸。

但 HTTPS 為了確保每次傳輸的資料都是安全的，就必須每次都進行加密運算，也就是無法省下網路傳輸的時間，因此速度不能跟 HTTP 一樣快。

提外話，使用者端的瀏覽器，可以自行設定 HTTPS 是否使用緩存、間隔等等，可參考「Will web browsers cache content over https」。

2. Blogger 範本

如前面「二、切換 HTTPS 步驟」→「2. 已知問題」所提，Blogger 範本、小工具等等，有太多地方要檢查，像是 HTTP 必須切換為 HTTPS 的所有連結，這算是非常大的工程。

WFU BLOG 寫了很多小工具，以後也必須一一更新為符合 HTTPS 的版本。只是處理起來需要安排先後順序，有需要的讀者可在相關文章留言，我有更新版時，會一併處理 HTTPS 這一點。

3. 自訂網址使用 CDN

如前所述，目前自訂網址想要使用 HTTPS，可透過 Cloudflare 這個 CDN 服務。不過因為是免費的，就算有什麼狀況真的無法抱怨什麼。

在沒使用 HTTPS 的情況下，自訂網址的 Blogger 由於是 Google 產品，也等於放在 Google 的 CDN，因此全球不管在哪裡，連線速度都很快。交給 Cloudflare 代管的話，得看 Cloudflare 全球伺服器分布的量。目前 Blogger 在 Google CDN 的連線速度還是比 Cloudflare 快很多。

四、深入瞭解 HTTPS

本文到目前為止的內容，似乎 WFU 沒給「BLOGGER 開放 HTTPS」這件事太高的評價，主要是因為一直沒有找到心目中能說服我的巨大誘因。

直到我看到這篇「HTTP 必死：先知 Google 呼籲大家升級 HTTPS，網頁瀏覽更有保障」，總算內心能發出 "對！是應該使用 HTTPS"這樣的聲音。不過先聲明一下，這純粹是個人觀點。

於是順便整理一下前面尚未提到的 HTTPS 優點，這幾點也許可以成為讀者的誘因；而引起 WFU 注意的，則是最後一點：

1. 搜尋排名

根據 Google 去年發佈的「HTTPS as a ranking signal」，HTTPS 將成為搜尋排名的依據之一，這代表使用 HTTPS 的網站，排名順位會比較前面。

以長遠來看，「HTTPS 是趨勢」沒錯，那麼時間拉長後，大家都有 HTTPS 的情況下，這就不再會是優勢。不過目前而言，至少其他免費部落格沒有 HTTPS，那麼 Blogger 就比較吃香，而且申請 SSL 憑證幾乎都是要錢的。

2. 公共場合 WIFI

如「一、HTTPS 的優點」→ 官網說明的第 3 點，HTTPS 可預防攔截式攻擊。因為整個網路從機房，一直到我們的瀏覽器，走 HTTP 的資料都可能被攔截，例如公開場所提供的免費 WIFI，有心人可以動手腳，在進入我們的網頁之前，竄改資料顯示不同的內容。

這也是一個不錯的誘因，只是能造成的傷害也沒多大就是了。

3. 聯絡表單

coke 談到 Blogger 的小工具「聯絡表單」，訪客傳送時可能包含機密個資，這的確是一個需要防範、具可能性的資安裂縫，那麼這一點足以成為開啟 HTTPS 的較大誘因。

4. 資訊監控

回到前面提的「HTTP 必死：先知 Google 呼籲大家升級 HTTPS，網頁瀏覽更有保障」，這篇提到不少技術面的資訊，其實我對網路硬體知識瞭解不多，看完總算瞭解駭客在做的事：

駭客們發現 HTTP 明文傳輸不僅會洩露數據，也會很容易被注入數據 → 消費者可能會轉帳到駭客的戶頭去
HTTP 不僅內容不加密，協議本身的（原語，頭部數據）也是不加密的，於是協議指令本身也可能被修改 → 股價跌了，但我們的瀏覽器可能看不到！
我們筆電的鏡頭、麥克風可能會被劫持 → 導致不雅影像被偷走
最重要的是，從機房一直到我們的電腦，所有資訊都可被監控 → 這就是大陸長城在做的事。

事實上，大陸對資訊的控管程度，是每個傳輸封包都會檢查的，因此走 HTTP 的所有資訊，只要你的網站出現敏感詞，從封包內容就可以立即封殺。那麼，啟用 HTTPS 之後，就無法經由封包這一段，來判別資訊內容了！

我想，所有的網站、網路傳輸內容，都逐步的走向 HTTPS 化，會是反制資訊監控、箝制思想的起點；那麼，Google 的「HTTPS Everywhere」，確實是值得響應的。

資訊安全相關主題：

blogger-recent-comments-v2-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

三年前原始的版本「Blogger 最新回應＋留言者頭像＋文章標題」其實功能已經很完整，不過前幾天的最新消息「BLOGGER 支援 HTTPS」之後，幾乎所有的 Blogger 工具都將無法相容於 HTTPS 模式，瀏覽器多會出現「混合內容錯誤」。

藉這機會來更新算是使用率極高的「最新回應」工具，且整理了舊版本所有讀者的留言意見，一併改善版面配置、使用體驗、讀取速度等等，相信這個 V2 版本會是 Blogger 最佳的 "最新留言"小工具。

以下先介紹更新的功能列表，想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)

一、功能更新及修正

1. 新增功能

blogger-recent-comment-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

首先看一下上圖為新版本的效果圖，新增的功能有：

支援 HTTPS
整合上下頁導航及全部開合按鈕：按鈕區域變大，操作更方便。

2. 修正功能

bad-blogger-recent-comment-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

當使用舊版本時，有些部落格的側邊欄很短，或是使用了三欄式而導致版面很窄，就會出現上圖不佳的版面配置，此圖主要的問題有 "作者暱稱與日期無法同一行顯示"、"文章標題佔掉三行的空間"這兩點。

新版本所有的修正項目如下：

日期可選擇隱藏
標題可選擇隱藏
標題強制只顯示一行(需要看完整文章標題的話，滑鼠移到標題，停留一秒鐘即可)
可選擇隱藏留言總數(有的站長可能不想讓過少的留言總數統計顯示出來)
可選擇隱藏頭像
展開留言、收合留言的點擊切換區域放大，便於操作。
舊版本無論留言摘要多短，就算不需展開留言，也會出現 "展開留言"的切換圖示，而此版本改善了此現象。

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

如果都使用預設值的話，直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號：

A：可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

G：一頁顯示幾則留言

H：留言摘要的字元數

I：頭像圖案的寬度像素 px 值；如果不想顯示頭像的話，改為 0 即可。

J~L：J、K 兩行為 Blogger、OpenID 的圖示網址；比較重要的是 L 行，請改為自訂的 "匿名頭像"圖示網址。提醒一下，為了相容於 HTTPS 模式，網址開頭請勿使用 "http:"字串。

M~O：請依照綠字提示註解，若不想顯示文章標題、日期、或網站總留言數，請分別更改設定為 "N"。

P：若需修改日期格式，請依綠字提示註解。

Q~T：可修改為自訂的圖示字元，可參考「copypastecharacter.com」或「特殊符號字元一覽表」。

U~V：這兩項可改為自訂字串，例如 "no."、"total:"。

AB~EH：如果熟悉 CSS 的話，可修改這裡的參數。

三、使用說明

如果發現這個最新回應小工具無法顯示留言，請先檢查以下項目：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 請檢查是否為「完整」；如果不是完整而是「自訂」的話，請檢查「網誌留言資訊提供」是否設定為「完整」，這裡的設定必須是「完整」，最新回應才能顯示。

3. 請詳讀這篇「Blogger 最新回應的留言為何無法顯示？」，檢查是否為 G+ 留言框的問題。

如果還有其他問題，請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出，會再補充到「四、常見 FAQ」。

四、常見 FAQ

Q1: 為什麼我安裝之後只顯示A、B、C、D、AC呢?

Ans: 如果你複製程式碼的時候，會把前面的行號 A、B、C...等都複製進去，可能你使用了冷門的瀏覽器，請改用本站推薦的 Chrome、Firefox、Opera 等瀏覽器操作，否則有那些行號的話，程式碼會無法執行的。

Q2: 不好意思請教一下，openLogo 和 closeLog 參數，能夠餵外部圖片嗎？因為看 anonymous 和 openID 可以吃外部圖片，所以試著把 opneLogo 也改自己的圖片，但似乎無法生效。向您確認一下是否可以這樣做呢？

Ans: 呵呵，openLogo 和 closeLogo 沒有想過要使用圖片，所以沒有寫這個功能，因為當初認為有很多字元可以代替，可節省網路傳輸，請參考程式碼 Q~T 行的說明，到參考網頁尋找其他字元使用。

Q3: 我是從別的blog搬過來的，我試過這個版本與另一版本(無留言頭像)，都會出現同樣的狀況：出現留言重複&出現"文章已刪除"，但實際上，文章是存在的，並沒有刪除… 是因為我從別的blog匯入的關係嗎?還是我需要做什麼樣的修改?

Ans: 留言顯示 "文章已刪除"的話，代表那篇留言對應的文章網址是不存在的，這表示 feed 裡面的資料是錯誤的。而為何會出錯，可能如你提的 "是因為我從別的 blog 匯入的關係嗎"，也許在匯入的過程系統產生了問題。

我想到的解決方法是，先從出問題的留言，找到對應的出問題的文章，將文章刪了，再重新匯入那幾篇文章試試看。

Q4: 正在試用您的「最新留言」功能，顯示結果，一直在繞圈圈耶，沒有任何畫面出現，請問哪邊出了問題呢?

Ans: 測試過後, 程式碼正常沒有問題. 我注意到你使用的是特製範本, 非 Blogger 官方範本, 所以無法知道會是什麼地方與本文的「最新回應」小工具相衝. 只好請你改用「舊版本1」或「舊版本2」。

更多 Blogger 留言工具：

許多 Blogger 工具都會用到 jQuery 這個 javascript 框架，需要引用一個外部 js 檔連結。對於不熟悉程式碼的使用者，極有可能從網路上 google 找來許多工具、外掛，並在自己網站引用了多次 jQuery 連結，結果導致網頁載入時，重複讀取了多次 jQuery、或使用了多個不同版本的 jQuery，不但拖慢網頁速度，而且不同版本之間也可能會打架。

WFU 寫的不少工具都會用到 jQuery，過去在撰寫使用說明時，都是直接引用這篇「如何使用jQuery版本」。不過因為最近「BLOGGER 支援 HTTPS」，以及考量到「部落格網站如何不被大陸封鎖？」，決定重新整理一下引用 jQuery 時，所有需要注意的細節，也請安裝過 WFU BLOG 工具的讀者，瞭解一下這個主題。

一、jQuery 版本

首先我們需要瞭解，所引用的 jQuery 連結，長得是什麼樣子，才知道怎麼修改。

1. 官網檔案

如果想將 jQuery 放在自己的網頁空間，可以到「官網」下載。以最新的版本為例，官網提供的檔案外連如下：

http://code.jquery.com/jquery-2.1.4.min.js

來認識一下檔名格式 "jquery-2.1.4.min.js"：

包含 "jquery"字串
版本為 "2.1.4"
"min"代表壓縮檔
附檔名為 "js"

瞭解大略的格式後，將來在範本要尋找 jQuery 比較方便。

2. 選擇使用版本

究竟要使用哪一個版本，大致有幾個考量方向：

檔案尺寸：2.0 以後的版本，大幅縮減了檔案體積，減少網路傳輸時間。沒有特別考量的話，請選擇 2.0 以後、壓縮過的版本。可參考這個網頁「jQuery file size」，有各版本檔案大小的一覽表。
是否要支援 IE：如果網站想要照顧 IE8 以下的使用者，那麼只好選擇 1.8.3 之前的版本。
使用的外掛支援性：有的 jQuery 外掛，有可能使用較舊的語法來撰寫，導致無法使用較新的 jQuery 版本。舉例來說，如果網站使用了「圖片輪播外掛﹍camera」這個外掛，就必須使用 1.8.3 以前的版本。

二、如何找出多餘的 jQuery

對 jQuery 有了初步認識後，可以來找出網站所有多餘的 jQuery 外部連結。以 Blogger 為例，除了要搜尋範本的內容，還需要檢查所有的側邊欄或小工具。

1. Blogger 小工具

Blogger 後台 → 版面配置 → 一一編輯各個小工具內容。具體的作法可以搜尋 "jquery"字串，找看看有沒有 "jquery???.js"這樣的外部 js 連結，有找到的話大概類似這樣一行：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
整行刪除即可。

2. Blogger 範本

Blogger 後台 →「範本」→「編輯 HTML」，一樣搜尋有沒有外部的 js 連結。找到多個的話，請刪到剩下一個，並將唯一的一個 jquery 外部連結，放到範本中 </head>之前(或前一行)的位置。

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

三、相容於 HTTPS 模式

如果你的網站「啟用了 HTTPS 模式」，那麼範本中的所有外部連結，都必須逐一檢查，並改為 "https://"開頭的連結，才不會被判訂為「混合內容」。

不過最簡單、安全的作法，是將所有的網址，全部使用 "//"開頭的字串即可，去掉 "http:"或 "https:"字串，例如原本 jQuery 官網提供的 js 連結，可改為以下：

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
這樣的做法有不少好處，除了可以相容於 HTTPS 模式，也可以避免「在 Google Drive 建立 HTML 網頁, 需要注意這三件事」→「一、某些檔案類型無法外連？」→「1. HTML 檔內的 js 外連」這樣的情形。

四、CDN 及大陸市場

雖然 jQuery 檔案可以放在自己的網頁空間，但速度絕對比不上放在「CDN」的檔案。值得慶幸的是，有不少免費的 CDN 提供了 jQuery 檔案讓我們引用，例如 Google、jQuery 官網，所以不想拖慢網頁速度的話，請使用 CDN 的外連檔案。而如何選擇合適的 CDN，請看以下的分析。

1. Google CDN

這個 Google 的官方網頁，提供了各種 js 框架的 CDN 外連網址：

https://developers.google.com/speed/libraries/

可找到 jQuery 的外連網址格式為：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
將紅色字串改為自訂的版本號即可。

基本上 Google 的 CDN 分布最廣，這也代表全球訪客的平均讀取速度會是最快，如果沒有別的考量，使用 Google CDN 就對了。

2. jQuery CDN

jQuery 官方也提供了 CDN：

https://code.jquery.com/jquery/

例如目前最新的版本外連為：

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
請依自己需求改為其他版本的連結。

3. 大陸市場

Google CDN 雖然是最佳選擇，但使用「不被大陸封鎖的免費空間測試心得」→「一、檢測工具」測試之後，發現 Google CDN 的檔案連結會被大陸封鎖。

如果讀者想根據「部落格網站如何不被大陸封鎖？」，來讓 Blogger 能被大陸讀者拜訪的話，那麼只好捨棄 Google CDN，改用 jQuery 官方的 CDN 檔案連結。

五、彙整

本篇所有的章節都還滿重要的，如果還是不清楚如何進行，這裡再匯整複習一下：

先根據「一、jQuery 版本」，瞭解外連 js 檔的格式，並決定自己需要的 jQuery 版本。
接著把網頁所有重複引用的 jQuery 外連 js 檔都刪除，只留下一個。
把 js 檔連結，改為 "//"開頭的字串即可。
根據「四、CDN 及大陸市場」，決定使用 Google CDN 或是 jQuery CDN 的外連。
最後將這行外連 js 檔字串，放在 Blogger 範本中 </head>之前(或前一行)的位置。

更多 jQuery 相關工具：

blogger-recent-post-v2-Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

之前寫的舊版工具「最新文章」已經很久沒有更新，由於前陣子「BLOGGER 支援 HTTPS」之後，很多 Blogger 工具都需要修改才能相容於 HTTPS 模式，因此藉這個機會來改版，除了加強縮圖的呈現方式，也新增不少功能。

以下先介紹更新的功能列表，想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)

一、功能更新及修正

1. 新增功能

blogger-recent-post-custom-thumbnail-Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

首先看一下上圖為新版本的效果圖，新增的功能有：

支援 HTTPS
整合上下頁導航及摘要全部開合按鈕：按鈕區域變大，操作更方便。
新增摘要功能：含摘要預覽、顯示全部摘要切換。
自訂 CSS：可自行調整全部的版面配置。

2. 修正功能

縮圖尺寸：舊版本的縮圖只能固定寬度、無法調整寬高比例，新版本可設定縮圖自動裁切為指定尺寸，整體版面較為美觀。
調整了版面配置：更為友善的使用者體驗。

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

如果都使用預設值的話，直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號：

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

F：可設定從第幾篇最新文章開始顯示

G：一頁顯示幾篇文章

H：設定文章縮圖的寬度 (px)

I：設定文章縮圖的高度 (px)

J：藍色圖片網址，請自行置換為文章無縮圖時的預設顯示圖片。為了相容於 HTTPS 模式，網址開頭請勿使用 "http:"字串。

K：設定是否顯示文章摘要

L~M：分別設定預覽文章摘要、及所有文章摘要的字元數。

N：設定是否顯示網站總文章數

O~R：可修改為自訂的圖示字元，請參考「copypastecharacter.com」或「特殊符號字元一覽表」。但不少字元在行動裝置、或較舊的瀏覽器版本可能無法正常顯示，請用行動裝置自行測試看看。如果想改用圖片顯示的話，請參考「四、常見 FAQ」→ Q1的詳細說明。

S~U：可自訂顯示的字串

AA~EK：如果熟悉 CSS 的話，可修改這裡的參數。

三、使用說明

如果發現這個最新文章小工具無法顯示，請先檢查以下項目：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」；如果是「自訂」的話，請檢查「網誌文章資訊提供」，不可以設定為「無」，最新文章才能顯示摘要內容。

如果還有其他問題，請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出，會再補充到「四、常見 FAQ」。

四、常見 FAQ

Q1: openLogo 和 closeLogo 參數，能夠改用圖片嗎？

Ans: 如果要使用圖片的話，請將字串改為以下格式：

openLogo: "<img src='//2.bp.blogspot.com/-M8w-I9JbTLE/VXPsl-omIAI/AAAAAAAAL3Y/DtpaY-xjFY0/s14/right.png'/>",

藍色字串改為自訂圖片網址即可，closeLogo 的改法以此類推。

而使用圖片時，「上一頁/下一頁」按鈕，無論有無作用，顏色都會一樣，那麼可在 CSS 最後一行插入以下語法：

#rp2_switchPage span {
opacity: 0.5;
}

如此可讓無作用的按鈕，圖案的顏色較淡，以示區別。

更多 Blogger 工具：

雖然幾年前就知道酷比 Scupio 這家廣告聯播代理商，但是官方規定的申請門檻 "單月瀏覽量 30 萬"，對小規模的網站實在是天方夜譚，因此一直不得其門而入。

直到前陣子這則 Blogger 中文論壇貼文「Scupio 酷比廣告申請心得」，原來有使用者分享，現在 "每月網頁瀏覽次最好要有上萬才有機會通過審核"。門檻從「30 萬降到 1 萬」，標準大為降低，相信很多部落格都可以嘗試來申請看看。

以下分享這陣子使用酷比廣告的心得，除了一定要擺放的「Adsense」之外，或許 Scupio 可以成為額外的選項。

一、酷比廣告的優點

酷比廣告有以下這幾點引起 WFU 的注意：

1. 廣告收益

根據這篇「酷比廣告使用經驗」的心得，作者認為廣告收益前幾名的排行為：

Adsense > Yahoo > Scupio

收益前兩大的 Adsense 與 Yahoo 暫且不計，至少在所有其他廣告聯播的第三勢力之中，Scupio 是可以嘗試的選擇。

2. 申請門檻

Adsense 要申請不難，但 Yahoo 要申請的門檻則遠高於 Scupio → 瀏覽量每月 100 萬。在網站成長到相當規模之前，暫時不用考慮 Yahoo。

那麼相對而言，酷比算是能申請得到，收益又不算過低的廣告聯播商了。

3. 浮動廣告

基本上，大部分的廣告聯播，都會禁止「浮動廣告」這樣的形式，因為這算是 "不當增加讓廣告出現在頁面的機率"。以 Adsense 為例，若被抓到浮動廣告是會停權的，因此 WFU 過去寫的工具「部落格浮動浮動廣告」，特別用加粗的紅字跟讀者提醒這一點。

然而，根據「Scupio 官網規定」，這一頁的內容並沒有任何條款提到 "浮動廣告"的罰則，而 WFU 的確也曾在某些網站看過酷比的浮動廣告，因此想增加收益的站長，是可以考慮使用酷比廣告。

4. 非同步程式碼

過去曾嘗試過另一家廣告聯播商 BloggerAds，使用經驗不太好，網頁常常會被 BloggerAds 給塞住，讓 WFU 還得研發出「BloggerAds 卡住網頁載入的完整解決方案」。

而 Scupio 這一點就不錯，安裝碼使用非同步載入，不會讓頁面塞車，因此 Scupio 的優點算是不少。

二、申請及安裝

關於申請及安裝等技術層面的事宜，已經有不少站長提供經驗，在此請直接參考相關連結。摒除 Blogger 官方的快樂流量不計，目前 WFU BLOG 的 GA 流量一個月超過 3 萬，這樣的數據可以申請成功，那麼讀者也可以試試看。

首先請進入官網的申請頁面：

http://ad.scupio.com.tw/admedia/register.aspx

接著參考「SCUPIO 酷比多媒體廣告聯播網，可使用SSL、網站廣告的好選擇！」的步驟，準備身份證、銀行帳戶等資料進行申請及安裝即可。

三、獨特的廣告版面設計

Scupio 提供的廣告尺寸非常多，基本上 Adsense 的基本款尺寸，在 Scupio 都找得到。而 Scupio 有一點，是 WFU 認為設計得比 Adsense 聰明的地方。

1. 300x600

先以直立式的 300x600 來舉例，熟悉 Adsense 的站長應該都知道，當有足夠的 300x600 廣告可顯示時，就會出現 300x600 廣告；若可顯示的廣告不夠時，會改而顯示較小的尺寸，例如在 300x600 的空間顯示 300x250 的廣告。

這樣的設計是正確的，至少不會讓這個廣告欄位開天窗，而要說缺點的話，就是在頁面上，Adsense 仍會佔用 300x600 的空間，而除了顯示 300x250 的廣告之外，下半部沒顯示的空間就會呈現空白，就像下圖這樣：

Scupio 在沒有足夠 300x600 廣告可顯示時，相當聰明的會拿兩個約 300x300 的廣告來填充，讓版面比較不會突兀，例如下面是官方提供的示意圖：

2. 650x250

以此類推，Adsense 我們可能會設置一個 650x300 或是 650x250 這樣的區塊來顯示廣告，根據同樣的邏輯，Adsense 在大尺寸廣告不夠時，會直接顯示小尺寸廣告，例如 300x250，並不會想辦法將區塊填滿。

而 Scupio 在 650x250 這樣的尺寸，就會填入兩個 300x250 廣告，例如下面是官方提供的示意圖：

3. 優點分析

這樣的設計的確有其優點，分析如下：

一個頁面能擺放的廣告單元數是有限的，假設是三個。
很多站長會將兩個 336x280 尺寸的 Adsense 廣告並排放置，這樣就佔用了兩個廣告單元。
如果使用 Scupio 一個 650x250 尺寸，只花費一個廣告單元，就能同時展示兩個廣告。
這代表頁面其他地方可多擺一個廣告單元。
同理，使用 Scupio 300x600 尺寸時，也有機會多展示一個廣告。

四、個人使用心得分享

好了，以上是檯面上的 Scupio 優點分享，另外有些個人心得，只提供給加入會員的讀者參考：

更多部落格廣告相關主題：

nexus7-cover-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

Nexus 7 是 CP 值相當高的平板裝置，且為 Google 旗下產品，Android 系統的支援度很高，只要出新版本，沒多久就會通知我們更新了，可享受最新的技術、介面效果。而一般的行動裝置則否，當 Android 推出新版本時，不一定能升級，且得看該硬體廠商能否即時更新韌體來支援。

不過系統升級也不是沒有副作用，較舊的行動裝置不一定能跟上軟體的更新，例如我的初代 Nexus 7 升到 5.x 版後，速度從越變越慢、到最後動不動就整個當掉，一天到晚需要重開機，一度已經準備放棄，另尋新的平板裝置。

還好後來發現解決方法，N7 至今仍然持續運作地很順暢，以下記錄我的解決過程及心得分享。

(圖片出處: asus.com)

一、為何會耗電、速度變慢、當機

其實我使用 N7 的需求並不會過多，主要是這麼安排：

上網、查資料、即時通
翻譯功能
處理待辦事項(Evernote)
用「RSS 閱讀器」看訂閱的資訊
一堆無用的 Google 內建預設 App 都被我停用
有可能耗電的 APP 都不會裝(如 FB、遊戲)，改用瀏覽器開啟網頁

只做這些事，看起來消耗的記憶體不會太多。但很可惜，Android 系統升級到 5.x 以上後，在記憶體無法跟著升級的情況下，就是會面臨以下這些問題：

新版的 Chrome 太吃記憶體，系統無法負荷(可改用「Opera行動版」)
某些舊版 App，在 Android 新版本會有相容性問題。
舊版 App 的指令碼，可能在 Android 新版本之下跟其他 App 相衝突；或是 Android 系統無法處理舊指令碼，導致仍在背景執行 → 引發持續性耗電
舊 App 開發者不見得有空持續維護、更新版本 → 導致我們只能不斷尋找日期較新的 App 替代品，需要一直花時間重新適應新軟體

只要我們不斷升級，就可能一直重複以上 2~4 的循環。更麻煩的是有可能找不到 App 替代品，例如「讓 Android 設備鋰電池能正確充電、增加循環次數的 App」，我在 5.x 以上的 Android 系統一直沒有合適的選擇，

一個可行的解決方法，是確定平板的核心用途後，選定必要的 App。如果已經升級到 5.x 以上，我們需要降版本、且找出最穩定的 Android 版本，將來這台裝置就不要再升級了。

二、Android 降版本的操作流程

本篇刷機使用的流程不用 Root，可以比較安心，Nexus 4, 5, 7, 10 適用。

以下步驟整理自這篇「Mobile01 討論串」，並補充自己測試後比較流暢的操作：

1. 確認硬體版本

第一個動作最重要，得 100% 確定裝置的硬體版本，否則燒錯映像檔就會變成磚了。

通用的方法為，從行動裝置的「設定」→「關於」，可找到 Model 型號，然後 Google 一下這個型號的硬體版本為何。

如果是 Nexus 7 的話，可參考這個討論串「How to distinguish Nexus 7 (2012) and Nexus 7 (2013)」：

2013 版的產品圖片如下──

nexus7-2013-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

2012 版的產品圖片如下──

nexus7-2012-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

從裝置的背面可看出差別，"NEXUS"字樣一個是橫的、一個是直立的。確認是 2012 或 2013 版後，還需確認自己的裝置是 Wifi 版或是 3G 版。

2. 下載官方映象檔

這是官方 Nexus 所有版本的映象檔網址：

Factory Images for Nexus Devices

以下是一些提示與心得：

如果你是 "2013 3G"版，那麼必須尋找「"razorg" for Nexus 7 [2013] (Mobile)」這裡的映像檔。
由於我的是 "2012 Wifi"版，那麼我要使用的是「"nakasi" for Nexus 7 (Wi-Fi)」這裡的映像檔。
多數人推薦使用 4.4.4 這個版本，沒有特別需求的話，可直接用這個版本
由於我使用的 App 在大部分版本仍會相衝，最後我選擇的是 4.2.2 版
官方提供的 4.3版，實測後無法燒錄→ 如果一定要用這個版本，可先燒 4.2.2 版，之後在經由系統自動更新，可升級到 4.3 版

3. 處理相關工具及檔案

例如下載的映像檔為 4.2.2 版，檔名為 "nakasi-jdq39-factory-c317339e.tgz"，解壓縮後會產生下面這些檔案：

nexus7-image-422-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

接著下載這個燒錄工具：

platform-tools.zip

解壓縮後，將所有檔案與所有映像檔全部放在同一個資料夾，例如下圖：

nexus7-image-tool-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

請見圖中紅框，這個資料夾位於 C:\Nexus7，放在這個位置之後比較好操作。

4. 開啟 USB 偵錯模式

首先要開啟「開發人員選項」，方法為打開 Nexus 裝置 → 設定 → 關於 → 對著「版本號碼」連續點擊 7 次，就能使這個隱藏選項出現。

回到「關於」的畫面，可進入「開發人員選項」選項，勾選「USB 偵錯」即可。

需要圖文對照的話，可參考這篇「Android系統內隱藏的開發人員選項」

5. 連接 Nexus 裝置

確認「USB 偵錯」開啟後，就能連接裝置。如果不能連接上 Nexus 的話，可參考「原文」→ 第 5~6 點。由於 WFU 沒遇上這個問題，因此這部分略過。

連上裝置後，Nexus 7 會顯示「已連接 USB 偵錯工具」。

nexus7-connect-usb-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

參照上圖，在電腦端開啟「命令提示字元」→ 輸入 cd\Nexus7按 Enter，可進入 C 槽我們先前設定的 "Nexus7"這個資料夾。
然後輸入 adb devices→ 上圖可看到目前是 offline 離線狀態
接著 Nexus 裝置會出現「允許 USB 偵錯嗎」的視窗 → 按「確定」

nexus7-connected-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

回到「命令提示字元」視窗 → 再次輸入 adb devices
有出現 "devices attached"字樣就代表連線成功

6. 燒錄映像檔

同樣在「命令提示字元」視窗：

先輸入 adb reboot bootloader
再輸入 flash-all.bat

便會開始燒錄映像檔，大約花個兩三分鐘。注意一下 Nexus 裝置，螢幕上最後出現類似以下字樣就完成了：

finished. total time: xxx
Press any key to exit...

三、後續處理動作

刷機完、降回 4.x 版本後，還有不少動作很重要，否則 Nexus 很快又會被系統自動更新版本、或是同步一堆 Google 相關服務的資料(如果你不想同步的話)。

因此系統更新完、處理好語言、地區、帳號等設定，一進入主畫面，便要進行以下動作：

為了不讓系統自動升級，需要用最快的速度 → 設定 → 應用程式 → 往右滑，找到「全部」 → google 服務架構 → 不要勾選「顯示通知」
Google 會自動同步很多內建的 App 資料，不需要的部分盡量取消同步，這樣也比較省電，才不會在背景一直進行同步。
如果 Google 相簿有很多圖片，但只想留在雲端，不想同步到這台裝置，以免佔記憶體的話，請立即取消 Google 相簿的同步。
如果常用 Chrome 上網的話，千萬不要讓 Chrome 自動更新，只要使用系統預設的舊版本 Chrome 即可。
除了 Chrome，也記得到 Google Play 裡面，取消所有不想自動更新的 App

做完以上動作後，算是可以鬆一口氣，再來進行其他 App 的安裝，就可比較安心使用 Nexus，同時也可感受到，以前順暢的速度又回來了。

3C 產品相關文章：

blogger-header-design-Blogger 標頭版面配置實作﹍圖片+標題+廣告

這個「Blogger中文論壇貼文」詢問 Blogger 標頭區塊的版面如何製作，主要是因為原 PO 比較欣賞「Logo + 標題」這樣的版面設計。

這是很合理的，部落格若要長久經營、帶給訪客深刻印象，設計一個簡明的 Logo 圖案會很有效果，能讓訪客看到 Logo 就連想到我們的網站，就像知名商標例如蘋果、Nike 一樣。

不過關於 Logo 圖案要如何設計這件事，只能請讀者發揮想像力了。本篇要說明的，是如何將 Logo 擺設在網站的標頭，順便舉例 Adsense 廣告如何放在這個區塊。

(圖片出處: picjumbo.com)

一、以橫幅圖像呈現

「Logo + 網站標題」的呈現，需要調整範本中的 HTML/CSS，對於不熟悉語法的站長來說，會是一件苦差事。那麼先介紹一個最簡單的方法，就是將整個標頭區塊做成一張圖，包含 Logo、網站標題、副標題等等。

wfublog-header-Blogger 標頭版面配置實作﹍圖片+標題+廣告

假設做好上面這樣的一張橫幅圖像，接著按以下步驟：

後台 → 版面配置 → Header → 編輯 → 從電腦上傳(選擇檔案) →「位置」選取 "不需要使用標題和說明"→ 儲存即可。

重新載入網站後，就可看到標頭區塊出現我們製作的橫幅圖像。

這個方法因為簡單，也會有些缺點，例如對 SEO 稍微不太好。網站標題、副標題等資訊，原本應該以文字呈現，讓搜尋引擎索引。現在改以圖片呈現的話，就失去了這部分的索引資料。

二、修改標頭(header)小工具

正規的作法是，修改標頭(header)小工具的內容，插入 HTML/CSS，這樣對 SEO 比較好。

不過這篇文章的對象設定在入門使用者，而修改標頭小工具的流程，恐怕會把範本改得亂七八糟，而且內容也不一定好理解，所以最後放棄這個作法。不過 WFU 相信稍微懂 HTML/CSS 的讀者，是有能力可以自行將網站 LOGO 安插到標頭小工具之中，那麼就省略這部分的內容了。

三、自製標頭區塊

本篇改採比較好操作的方法，請按以下流程：

1. 調整原標頭小工具

blogger-header1-Blogger 標頭版面配置實作﹍圖片+標題+廣告

如上圖，在範本中搜尋字串 "header1"，找到後，如上圖 759 行：

將 maxwidgets 參數改為 '2'
將 showaddelement 參數改為 'yes'

2. 自製標頭小工具

儲存後，進入「版面配置」的畫面，請新增一個「HTML/Javascript」小工具，填入標題，及以下程式碼後儲存：

<div id="header-left">
<a href="http://www.wfublog.com/">
<img src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s200/wfublog-logo-8abeb7.png">
<div class="title">
<h1>WFU BLOG</h1>
<div class="description">Blogger 調校資料庫</div>
</div>
</a>
</div>
<style>
#Header1 {
display: none;
}

#header-left {
float: left;
width: 350px;
}

#header-left a {
text-decoration: none;
}

#header-left img {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
margin: 10px;
}

#header-left .title {
display: inline-block;
vertical-align: top;
}

#header-left h1 {
margin-top: 20px;
text-shadow: 2px 2px 2px #ddd;
font-size: 40px;
color: #5e7380;
}

#header-left .description {
color: #798f9d;
text-shadow: 2px 2px 2px #ddd;
font-size: 24px;
}
</style>

綠色字串請改為自己的首頁網址
紅色字串請改為自己的 logo 圖片網址
藍色字串請改為自己的網站標題、副標題

3. 移動小工具

blogger-header-Blogger 標頭版面配置實作﹍圖片+標題+廣告

如上圖，將這個小工具，用滑鼠拖曳到圖中的位置，也就是原本的標頭工具下方、Header 區域範圍之內，然後按頁面右上角的「儲存排列位置」即可。

重新載入網站後，就可看到標頭區塊出現我們製作的橫幅圖像。不過每個人的範本 CSS 設定不太相同，有可能需要再細調一下 CSS 距離相關的參數。

四、標頭區塊放置廣告

有的站長可能會覺得標頭右邊空空曠曠，擺個 Adsense 填補空隙還可增加收益，那麼可接續「三、自製標頭區塊」→「2. 自製標頭小工具」，將填入的程式碼改為以下：

將以上紅字部分改為自己的 Adsense 安裝碼
如果網站寬度不夠，塞不下 728px 寬的 Adsense 廣告時，可改用比較小的廣告尺寸。
如果要增加網站的寬度，可到後台 → 範本 → 自訂 → 調整寬度，這裡可以設定

儲存後接續其餘步驟即可，效果可參考「Blogger工具效果展示」的標頭區塊。

更多 CSS 相關技巧：

wfublog-fb-fan-page-幫網站嵌入 Facebook 粉絲專頁(Page Plugin)﹍簡易安裝法及各種應用方式

這個外掛以前稱為 Like Box(粉絲團讚視窗)，更早叫 Fan Box(粉絲框)，現在的名稱 Page Plugin 倒是比較直覺一些，就是 FB 粉絲專頁的外掛工具，可以將粉絲專頁嵌入網站的指定位置，是效果很好的行銷宣傳工具。

這個「Blogger論壇討論串」，原 PO 表示重新安裝 "FB 粉絲頁"很多次，還是無法正常顯示。對於不熟悉語法的使用者而言，FB 許多外掛工具今年的改版，的確少了很多彈性，也增加了安裝的出錯率。(以往外掛都提供了多種安裝方式，現在只剩下一種)

以下先簡單介紹官方安裝方式，而為了讓嵌入 FB 粉絲專頁外掛更為方便，WFU 另外提供了簡易安裝法，只要一個步驟就能安裝成功，保證不會失敗。想節省時間可直接跳到「二、簡易安裝法」，最後並提供各種粉絲專頁的應用作法。

一、官方作法

首先這是 FB 官網粉絲專頁外掛的安裝網址：

https://developers.facebook.com/docs/plugins/page-plugin

1. 調整參數

fb-page-plugin-1-幫網站嵌入 Facebook 粉絲專頁(Page Plugin)﹍簡易安裝法及各種應用方式

參考上圖，需要修改的參數說明如下：

Facebook Page URL：填入粉絲團網址
Width：設定小工具寬度像素值 (最少 180, 最多 500)
Height：設定小工具高度像素值 (最少 70)
Adapt to plugin container width：是否自動調整寬度
Show Friend's Faces：是否顯示朋友頭像
Use Small Header：是否使用較小的標頭區塊
Hide Cover Photo：是否使用封面圖
Show Page Posts：是否顯示粉絲頁貼文

設定完成後，按「Get Code」即可取得程式碼。

2. 安裝程式碼

畫面會顯示兩段程式碼，第 1 段請貼在範本中 body的下一行，第 2 段貼在外掛要顯示的位置即可：

看起來並沒有很困難，不過對不熟悉程式碼的讀者，大概就是第 1 段的處理會出問題。
如果是這樣的話也可乾脆將兩段程式碼，全部貼到你要顯示的位置。
但這麼做也是有風險，因為有的站長會在網站多個地方都放粉絲頁外掛，那麼第 1 段程式就會在多個地方重複執行，是有可能出錯的。
那麼最安全的懶人法，還是請參照「二、簡易安裝法」的步驟進行。

二、簡易安裝法

請將以下程式碼，貼到任何想顯示的位置：

<iframe allowtransparency="true" frame scrolling="no" src="//www.facebook.com/v2.5/plugins/page.php?href=https://www.facebook.com/WFU.BLOG&amp;width=300&amp;show_facepile=true&amp;small_header=false&amp;hide_cover=false&amp;show_posts=true&amp;locale=zh_TW" style="border:none; overflow:hidden;width: 100%; height: 500px;"></iframe>

參數的修改，請參照有顏色的字串，最重要的用紅色標示、其次為藍色：

粉絲團網址：href 網址參數請改為自己的粉絲團網址
小工具寬度：Width 參數請改為自訂寬度 (最少 180, 最多 500)
小工具高度：Height 參數請改為自訂高度 (最少 70)
是否顯示朋友頭像：show_facepile 參數 true 代表要顯示，若不要顯示則改為 false。
是否使用較小的標頭區塊：small_header 參數 true 代表要顯示小尺寸標頭，若要顯示大標頭則改為 false。
是否使用封面圖：hide_cover 參數 true 代表隱藏封面圖，若不隱藏則改為 false。
是否顯示粉絲頁貼文：show_posts 參數 true 代表要顯示，若不要顯示則改為 false。
語系：zh_TW 代表繁中語系

儲存後即可看到效果，非常簡單。

三、各種應用法

以下簡單舉例幾種尺寸的應用方式：

1. 側邊欄頂端

放在側邊欄最上方，宣傳效果好、可吸引注意的位置，設定方式舉例如下：

寬: 300
高: 150
使用小標頭區塊
隱藏文章

2. 側邊欄底部

放在可顯示較長的區塊時，例如 "側邊欄底部"、"頁尾"、"文章結束處"等處，可適當加大這個外掛的寬、高，並顯示貼文。設定方式舉例如下：

寬: 300 ~ 500
高: 500 ~
使用大標頭區塊
顯示貼文

3. 加強版讚按鈕

也可把這個粉絲專頁外掛當成 "加大版"的讚按鈕使用，放在任何適合按讚的地方。由於可顯示粉絲專頁的封面圖，看起來比陽春的讚按鈕美觀許多，相信更能夠吸引讀者幫專頁按讚。設定方式舉例如下：

寬: 180 ~ 300
高: 70
不顯示朋友頭像
使用小標頭區塊
不顯示貼文
依自己需求，選擇是否顯示封面圖

更多 Facebook 相關工具：

fb-block-website-account-post-為何分享文章會被 FB 封鎖或出現安全驗證？解決「無法分享+留言框失效+確認按鈕」等異常現象

分享文章到 Facebook 是效果最好的社群媒體行銷管道，但是如果稍不注意，操作的過於頻繁，那麼可是會發生不少問題。

這個「Blogger 論壇討論串」提出了在 Facebook 分享文章時，出現的一些異常現象。除此之外，WFU 也整理了更多 FB 分享時可能會遇到的案例，以下採問答的方式呈現，若有更多狀況，會持續補充在本文。

(圖片出處: pixabay.com)

Q1：為何在 FB 分享時要輸入驗證碼？

FB-safe-verify-為何分享文章會被 FB 封鎖或出現安全驗證？解決「無法分享+留言框失效+確認按鈕」等異常現象

上圖為 +Steve Hsueh 提供的畫面，原 PO 一開始很納悶為何出現驗證碼，造成留言的不便。不過後來他歸納出，可能是：

短時間內
使用同一 FB 帳號
在多處新聞網頁、或其他粉絲團留言時，貼入了自己的文章網址
可能被檢舉為垃圾留言，也可能被系統直接判定。

這個推斷是合理的，以 Google+ 社群為例，由於 WFU 身為「Blogger 中文社群」管理員，幾乎每天都會看到社群出現被系統判定的垃圾貼文，但使用者並不會知情。G+ 使用者一定可以看到自己的貼文，不會發現任何異狀，但卻不知道其他人都看不到這些被封鎖的文章。

為了讓宣傳效果最大化，站長們可能會在短時間內，於多個 G+ 社群大量貼文進行曝光，自然容易被檢舉、或被系統直接封鎖。同樣的，FB 也會建立一套防堵機制，而驗證碼是其中之一，避免有人寫程式讓機器人大量貼文或留言。

因此，雖然站長們會對此覺得不便，但看到驗證碼時，至少能知道 "FB 已經開始注意我了"。

Q2：為何點分享的連結時，出現 "發生錯誤"的訊息？

error-為何分享文章會被 FB 封鎖或出現安全驗證？解決「無法分享+留言框失效+確認按鈕」等異常現象

一樣感謝 Steve 提供此畫面，這個狀況發生在我們的留言貼出後，當其他人看到了該留言，點擊留言裡的文章連結，卻被系統提醒，該連結可能有問題。若訪客看到這個畫面，自然對於前往我們的文章網址存有疑慮。

這個現象與 Q1 是一體的兩面：

Q1 是系統察覺到使用者開始大量貼連結時，給留言者提出的一個警訊。
Q2 是系統察覺到某些連結開始被大量張貼時，給訪客提出的一個警訊。

任何機制都可能不完美、需要不斷學習與修正，不過我們可以站在 FB 的角度思考一下，為何要建立這個機制。想像一下利用 FB 進行詐騙、獲取不當利益的成員，為了讓最多人上鉤，當然是將資訊大量的撒出去。

FB 自然不能成為犯罪的溫床、散播不實或有害資訊的搖籃，這對聲譽、廣告主、收益都會有影響，因此必須對有疑慮的連結進行管控，而這個提醒訊息會是其中的一個環節，避免訪客前往釣魚連結、或是色情網站。

當然我們知道自己的網站堂堂正正，分享到 FB 的文章連結不該受到 Q2 這樣的待遇，但在 FB 有辦法建立起更完善的機制之前，我們只能自己小心，避免做出跟詐騙集團、色情網站一樣的行銷模式，而被系統誤判。

Q3：為何我的文章無法在 FB 分享

正常來講，只要你按照這篇「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來設定，將文章網址貼在 FB 後，就可出現縮圖、標題等資訊。

這是我處理過的案例，將文章連結貼在 FB 時，卻無法自動出現縮圖、標題，只留下網址字串而已，且準備按下 "發佈"時，可能出現下圖的訊息：

fb-block-website-url-為何分享文章會被 FB 封鎖或出現安全驗證？解決「無法分享+留言框失效+確認按鈕」等異常現象

FB 評判使用者是否濫用這個平台的資源，依程度分為許多不同的等級。Q1 出現驗證碼的情形，可以說是最輕微的症狀，被 FB 列入觀察名單。

而 Q3 算是比較嚴重，上圖是其中的一種層級，該篇文章網址已經被 FB 封鎖，不得再進行分享。其實還會有其他層級的訊息，不是只有上圖而已。大致來說，依照濫用的情形，網站被 FB 封鎖的狀況大致有這些：

單篇文章網址被封鎖
網站某個目錄的文章網址全被封鎖 → 例如 http://www.wfublog.com/2015/11/之下的所有文章
整個網站被封鎖 → 例如 http://blogger.wfublog.com/之下所有文章
整個網域被封鎖 → 例如 ???.wfublog.com之下所有網站

被封鎖後，無論是否為 FB 誤判，網站在短時間內都無法進行任何分享，這對有問題的網站也算是一種打擊。

但如果是我們的網站被誤判，只好跟 FB 進行申訴，而會恢復的時間很難講，從幾個禮拜到一兩個月都有可能。

其實我們也可以不申訴，過一段時間後 FB 也會自動解除封鎖，那麼之後就要更注意分享頻率的控制，以免被 FB 認為我們在濫用資源了。

Q4：我的 FB 留言框怎麼消失了？

有時站長會覺得奇怪，明明網站什麼事都沒做，可是「FB 留言框」突然間無法顯示了？如果出現這個狀況，可以排除人為因素、程式碼出錯、及安裝問題的話，那麼可能就是該篇文章的 FB 留言框被禁止使用了。

這個現象跟前面一樣，可以說 Q3 與 Q4 是一體的兩面：

Q3 是系統判定使用者濫用資源，給使用者的懲罰。
Q4 是系統判定某些網站濫用資源，給訪客的保護措施。

既然該篇文章或該網站被 FB 列入黑名單，那麼就不能讓該文章或該網站的資訊繼續被傳播出去，因此 FB 留言框就不會出現了。

解決方法如 Q3，只能進行申訴，或是等待 FB 解除黑名單了。

Q5：我文章的 FB 分享按鈕不能使用了？

這個狀況是 Q4 的延伸，同樣是 FB 禁止該文章或該網站進行傳播的手段之一。

Q6：為何按讚會出現 "確認"按鈕？

按讚後出現 "確認"按鈕，算是很多人都有遇到的現象，無論在自己或是他人的網站。雖然網路上流傳一些解決的方法，例如設定 Meta 資訊等等，有的人表示有效，但也有人表示沒有作用。這代表一件事：「Meta 標記與出現 "確認"按鈕這件事並非正相關，會覺得有效的話，可能只是湊巧」。

這篇「Facebook Curbs "Like-Jacking" with a Confirm Dialog after User Clicks an External Like Button」算是可信度比較高的說法，因為是由「FB 開發人員論壇」管理員發佈，幾乎可以算是官方說詞，簡單用我的理解來表達(翻譯)：

由於偵測到機械式的按讚行為，當我們發覺某些按讚規律符合我們設定的模式時，便會出現 "確認"按鈕。
很不幸的，我們無法手動幫使用者解除這個現象，目前要恢復正常只能由系統判斷並自動執行。
這個機制其實影響不大，且使用者多半會繼續按下 "確認"按鈕。
訪客給予的負面回饋越多，例如取消按讚、檢舉文章，也會增加 "確認"按鈕出現的機率。

所以答案出來了，其實這個現象跟本文的主題一致，都是「FB 防堵濫用」的機制之一，雖然使用者從 Q1 ~ Q6 遇到的狀況都不同，但事情發生的背後都是同一個原因。

而 Q6 跟之前 Q1 ~ Q5 比較不一樣的地方在於，Q6 是不能申訴的，因為會出現 "確認"按鈕是由程式自動判定，而何時會解除這個狀態也得由程式自行判定。因此 "確認"按鈕這件事，我們只能放寬心看待，目前除了等待之外沒什麼動作可做，就算原因不是由我們所造成的。

Q7：FB 帳號被停用、封鎖怎麼辦？

如果文章在 FB 貼得太過火，連 Q1 ~ Q6 這些機制都奈何不了使用者，這下換 FB 火大，只好將 FB 帳號給封鎖了。

當然，FB 帳號被停用的原因有很多，得詳細閱讀使用條款，不全然是分享貼文濫用的問題。那麼帳號被封鎖後要如何處理，這篇「Facebook 帳號被停用 / 帳號被封鎖處理辦法」說明得很詳細，可以參考一下。

而有時帳號被暫時封鎖後，會要求辨識朋友的臉孔，其實這個機制我覺得還滿無言的，例如很多國、高中同學，中年發福後的照片，說實在還滿難辨認的呢！那麼可參考一下這篇「Facebook 帳號被封鎖（辨識朋友）」(這篇還有更多令人莞爾的狀況)，想辦法挽救我們的 FB 帳號。

Q8：那麼我要怎麼在 FB 貼文比較安全？

正常使用下，一般使用者絕對不必擔心這個問題，因此 Q8 應該這麼問：「我要怎麼在 FB "大量"貼文比較安全？」

看完本篇這麼多案例，你絕對不會想遇上這些情形，那麼以下是幾個比較安全的貼文技巧，雖然麻煩一些，但可以比較安心：

使用「粉絲頁」帳號貼文，在 "發佈"按鈕有「排程」的選項，可將貼文的時間錯開，比較不會短期間密集發文，而被 FB 盯上。
使用 Hootsuite、Buffer 等第三方 App，排定不同時間發文，將間隔錯開。
想在多個 FB 社團留言、貼文，只好多養幾個 FB 帳號分開貼文，免得帳號被封鎖了。

更多 Facebook 相關技巧：

google-adsense-index-page-Blogger 將 Adsense 廣告放在標籤索引頁面實作

有的知名部落格會對標籤頁面的 Adsense 廣告，進行版面配置的最佳化，例如「重灌狂人」的標籤頁面是這麼安排的：

1. 文章區塊上方放置 Adsense 700 x 150

2. 隔三篇文章之後放置 Adsense 700 x 150

3. 再隔三篇文章之後放置 Scupio(酷比) 700 x 250

當然不是說這樣一定是收益最大化的配置，因為每個網站的格局、特性都不同，需要進行 A/B 交叉測試，才能找出最佳的結果。

Blogger 要在標籤索引(index)頁面自由擺放廣告，不是一件簡單的事，雖然我們過去已經學會使用「Blogger 七種頁面形態判斷語法」，但這還不足以處理所有的狀況。

本篇將以實例說明如何修改範本，讓 Adsense 廣告可以擺放在各種自訂位置，來方便執行 A/B 交叉測試。

(圖片出處: pexels.com)

一、Blogger 預設效果

1. 官方提供的效果

在不修改範本的情況下，其實也能在標籤索引頁面安插 Adsense：

blogger-adsense-below-post-Blogger 將 Adsense 廣告放在標籤索引頁面實作

參照上圖步驟：

A. 後台 → 收益 → Adsense
B. 在網誌上顯示廣告 → 勾選「是」
C. 下拉選單選擇「在我的文章下方顯示廣告」

儲存後，即可在標籤、索引等頁面，看到 Adsense 廣告出現在每篇文章的下方。而顯示的數量，會符合 Adsense 的規範，大致上一個網頁可出現三個 Adsense 廣告，因此最多可能會連續三篇文章的下方出現廣告(如果整個頁面其他地方都沒擺廣告的話)。

2. 官方效果的缺點

這個作法的缺點顯而易見：

無法選擇自訂的廣告尺寸
無法選擇廣告出現的位置
無法將兩個廣告並排顯示
無法放在自訂位置

對於喜歡安排自己版面的站長而言，相信不會想要選擇這個方案，除了效果不一定好，可能也會覺得版面難看。

二、自訂索引頁面廣告位置

以下的步驟，可將廣告擺放在標籤索引(index)頁面的任意位置：

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

2. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 進行搜尋，想辦法找到以下這一段程式碼：

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

3. 找到後，在這段程式碼的前一行，插入以下程式碼：

這段程式碼只會讓廣告在標籤、索引頁面出現，首頁不會出現。若要讓首頁也出現，請移除藍色字串。
綠色字串是廣告區塊的 CSS 參數，請根據自己的版面自行調整。
紅字數字 1 代表會在第一篇文章之後出現廣告，請自行調整這個數字。
紅色字串 "這裡擺放廣告安裝碼"請改為自己的廣告安裝碼。如要擺放兩個廣告並列，可塞入兩組廣告安裝碼。

4. 修改完之後，先別存檔，從你插入的程式碼位置，在往上個 3~4 行左右，會看到這一行程式碼：

<b:loop values='data:posts' var='post'>
新增紅色字串如下：

<b:loop index='idx' values='data:posts' var='post'>
存檔後即可在標籤索引頁面看到效果，也可在 WFU BLOG 點擊任意標籤，觀看廣告出現的位置及效果。

三、索引頁面更多其他擺放位置

上述的程式碼，可將廣告放在標籤索引頁面的文章區塊，並指定安插在某篇文章，例如第 2 篇、第 5 篇等位置。如果想放在其他位置的話──

1. 文章區塊上、下方

最簡單的操作方法，從後台 → 版面配置 → 新增「HTML/Javascript」小工具，放入安裝碼 → 將小工具的位置，用滑鼠拖曳到「網誌文章」的上方或下方即可。

2. 文章自訂位置

如想放在文章區塊的特定位置，例如標題之前、繼續閱讀之後等等，過去寫了不少相關文章，可以逐一參考：

更多 Adsense 相關文章：

google-account-login-ip-record-如何找出 Google 帳號異常登入的 IP 記錄

這個「Blogger論壇討論串」表示，Google 帳號有不明的登入記錄，詢問如何查詢 IP 記錄。原來之前寫的「檢查 Google 帳號是否被盜用﹍查詢最近登入的 IP 紀錄」，當初 Google 提供了最近 1 個月登入的 IP 記錄，但現在測試才發現，Google 已經不提供 IP 資訊了。

由於 Google 的功能、介面常常改版，現在該如何查出異常登入的 IP，請參考本文的技巧。

一、Google 改版效果

請參照原本「Google 帳號查詢最近登入的 IP 紀錄」的步驟，目前改版後查詢的畫面如下圖：

google-account-login-ip-record-1-如何找出 Google 帳號異常登入的 IP 記錄

如紅色底線日期所示，目前 Google 仍然提供 1 個月內，所有裝置的登入記錄。
但是點擊右側的「三角圖示」展開資訊後，只能看到最多兩筆登入記錄。
而且不顯示 IP 資訊，只看得到大略的地理位置。

對於大部分的使用者而言，也許這樣的資訊就足以瞭解，是否有人入侵、盜用我們的帳號。而不顯示詳細的 IP 資料，也算是讓畫面比較簡潔的設計方式。

二、從 Gmail 查詢 IP

這篇詢問的網友由於個人因素，有必要查出 IP 記錄，用來驗證到底是誰登入了他的帳號。那麼這樣的話，有個變通的方法，來查詢最近登入 IP 記錄。

根據 Google 官網的這篇「最近帳戶活動」，Gmail 會記錄透過瀏覽器、行動裝置、第三方程式等工具存取郵件時，最近的 10 筆 IP 登入資料，操作方式如下圖：

gmail-login-ip-record-1-如何找出 Google 帳號異常登入的 IP 記錄

進入「Gmail 網頁版」→ 畫面捲到最下方 → 點擊右下角的「詳細資料」按鈕

gmail-login-ip-record-2-如何找出 Google 帳號異常登入的 IP 記錄

如上圖，立即顯示最近 10 筆存取 Gmail 的 IP。

不過裡面夾雜了許多第三方程式的存取記錄，因此真的有被入侵帳號的話，也可能很快就被洗到 10 筆之後，而抓不到兇手了。

而更麻煩的是，盜用帳號者若沒有存取 Gmail 的話，那麼可能也是無法查到 IP 資訊。

三、找出可疑裝置登入 IP

1. 法院命令

看起來要找出可疑裝置的登入 IP 記錄，如果 Gmail 也不可行的話，似乎幾近無解了，因為官網的文件「最近帳戶活動」→「如何解讀這些資料」，這裡面提到：

一般而言，除了 [最近帳戶活動] 部分顯示的資訊之外，我們無法提供使用者更進一步的資訊，因為 Google 的政策規定，只有在我們收到有效的第三方法院命令，或是必須配合其他相關的法律程序時，才能提供其他詳細資訊。

Google 只有在進入司法程序、審理案件時，才會配合提供 IP 資料。除此之外，我們是要不到資料的。

2. 查詢安全性事件

WFU 最後找到的這個方法，雖然資料不多，但相較之下，很有可能是更精準的資訊，能夠抓出是那個 IP 入侵了我們的帳號。

首先進入 Google 官網這個「裝置活動與通知」網址：

https://myaccount.google.com/security#activity

google-account-login-ip-record-2-如何找出 Google 帳號異常登入的 IP 記錄

如果最近 1 個月有新的裝置登入我們的 Google 帳號，那麼這裡應該如上圖，會出現 "近期安全性事件"的區塊，請點擊「查看事件」按鈕。

google-account-login-ip-record-3-如何找出 Google 帳號異常登入的 IP 記錄

如上圖，點擊紅框「您已從新的 Windows 登入」後，會展開詳細內容。

對於這個可疑的裝置，Google 會提供登入時的資訊，例如時間、地點、瀏覽器，更重要的是這裡我們終於看到了 IP 資訊，如此更有可能猜出入侵者的身份。

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

最後做個小小提醒，雖然這些內容前一篇已經提過，不過因為太重要了，所以再照抄一次：

1. 使用兩階段驗證

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

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

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

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

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

更多 Google 相關主題：

win8-ctrl-space-讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入

自從 Windows 8 的輸入法切換被罵翻天後，原本還冀望微軟會聽進廣大中文市場的聲音，結果 Windows 10 的輸入法一樣難用，讓人大失所望。

由於現在新出的筆電/平板，只要是 Windows 系統，一律搭載 Win8 以上的版本，每當需要輸入時不免綁手綁腳。如果輸入法能像舊版本一樣，使用 Ctrl + Space (空白鍵) 就可中英切換，那麼這些新配備用起來就順暢多了。

(圖片出處: pixabay.com)

一、調整按鍵的原理

1. 輸入法不方便之處

Win8 以後的輸入法，其不方便之處、及微軟不願改進的罪狀可說是罄竹難書，經歷過的使用者應該都知道，也許不用再特別條列出來，有興趣的讀者可參考這兩篇的描述：

2. 如何調整切換按鍵

Windows 系統有兩種方式可以切換中英輸入：

Win + Space：所有中英輸入法循環切換
Ctrl + Shift：同語系的輸入法循環切換

看讀者習慣使用哪一種切換法，只要使用能「重新定義組合按鍵」的軟體，例如把 Ctrl + Space這樣的組合鍵，定義為執行 Win + Space這樣的組合鍵，就能進行「中英輸入法循環切換」。

熟悉 "AutoHotKey"這套軟體的讀者，相信應該如何進行。這套軟體功能很強，還可自己寫程式語法執行，不過這套軟體的門檻比較高一些。

本篇介紹的方法使用「Hotkeyz」這個軟體，功能一樣很強大，不過任何使用者都可輕易上手。

3. 新注音的不便之處

我使用的主要輸入法為「酷音輸入法」，而 Windows 系統預設的新注音，由於無法移除，只好這兩個輸入法並存，來進行中英切換。

但當這兩個輸入法同時存在時，很兩光的是，彼此切換時，無論是使用 Win + Space或是 Ctrl + Shift，永遠會先出現英文模式，然後自己需要再想辦法切換到中文，也就是要兩道手續才能切換為中文。

本篇的心得分享，也會一併解決這個問題。

二、用 Hotkeyz 調整切換按鍵

無論你目前使用 Win + Space或 Ctrl + Shift來切換中英，這個章節會說明如何用 Hotkeyz 來更改組合鍵。

過去曾寫了很多篇關於 Hotkeyz 的應用說明，因此這個軟體的介紹、下載、修改按鍵教學請參考這篇「使用 Hotkeyz 設定連續組合鍵」，以下直接說明執行步驟。

1. Win8/Win10 啟動後執行

其實這個軟體當初發佈的公司已經倒了，並沒有出 Win8/Win10 的版本，不過程式還是可以正常運作。

為了讓修改後的組合鍵能開機啟動後就執行，在 Win8/Win10 系統，請將 HotKeyz.exe 的捷徑丟到系統的「啟動」資料夾，可參考這篇「Windows 8-設定開機要立即執行的程式」。

同時這個捷徑可按右鍵 → 內容 → 捷徑 → 執行 → 選擇「最小化」，這樣開機時便會自動執行、且自動縮小到工具列了。

2. 修改組合鍵

以下為操作步驟，這裡將舉例如何按下 Ctrl + Space時，等於執行 Windows 系統的 Win + Space組合鍵：

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

win8-ctrl-space-1-讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入

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

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

win8-ctrl-space-2-讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入

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

[WinD][SPACE][WinU]
按 OK 即可，以後按下這個我們自訂的快速鍵 Ctrl + Space時，就會自動執行 Win + Space，進行中英切換。

三、移除新注音

為了讓中英輸入法能順暢切換，有必要解決「一、調整按鍵的原理」→「3. 新注音的不便之處」這個問題，以下為操作步驟：

1. 新增英文輸入

在 Win8 控制台 → 時鐘、語言和區域 → 語言，按下「新增語言」
選擇「English 英文」→ 選擇「English (United States) 英文 (美國)」
現在有了兩種語言，可將「中文(台灣)」往下移，讓英文「English (United States)」成為預設語言。

以上的流程若需要圖片輔助，請參考這篇「Windows 8 輕鬆搞定輸入法問題」。

2. 移除新注音

接著將「中文(台灣)」刪除，新注音輸入法就消失了。

不過這個作法是因為我要使用新注音以外的輸入法，如果你要使用新注音的話，就不必這麼做。

3. 安裝新酷音

新注音移除之後，雖然「中文(台灣)」這個語言消失了，但是只要另外再安裝「新酷音輸入法」，或是你習慣的中文輸入法，那麼「中文(台灣)」又會再度出現了。

接著我再將「新酷音輸入法」設成 → 預設為中文輸入

那麼以後只要按 Ctrl + Space，就能跟以前的 Windows 一樣，按一次切換為中文輸入(中文(台灣)語系)，再按一次就切換為英文輸入(English語系)了。

更多 Win8 相關文章：

blogger-template-design-tool-修改 Blogger 各處 CSS(文章標題+內文+其他)，以字型大小顏色舉例

這個「Blogger論壇貼文」表示，使用 Blogger 後台「範本設計工具」來將文章標題的字體改大，結果首頁文章標題的尺寸如預期大小，但文章頁面的尺寸變小。

這個情況有點奇特，本篇試著瞭解為何會如此，順便說明 Blogger 其他區塊的字型要如何調整 CSS，做個系統性的整理。

一、官方修改工具及修改原則

1. 範本設計工具

使用官方修改工具來調整 CSS，大致的步驟如下：

後台 → 範本 → 自訂 → 進階

blogger-template-design-tool-1-修改 Blogger 各處 CSS(文章標題+內文+其他)，以字型大小顏色舉例

如上圖，點擊「文章標題」後，右側會出現所有可以調整的項目，例如字型、粗體、斜體、尺寸、顏色等，下方會即時顯示修改效果。

網頁的其他區塊也是同樣的操作方法，不過每個人的範本內容都不一樣，需要注意以下幾點：

每個範本可以修改的區塊可能都不一樣
每個區塊能修改的 CSS 細項也可能不一樣
如果不小心動到範本中、跟這個工具相關的程式碼，這裡修改的效果，可能無法呈現在網頁上。
承上，最嚴重時這個「範本設計工具」可能無法運作，或是非官方範本的程式碼，也可能讓「範本設計工具」無法執行。
自己設定或非官方範本的 CSS 內容，有可能覆蓋掉這個工具的效果。

如果順利的話(不去亂動範本內容)，使用「範本設計工具」就能完成多數的 CSS 修改。但如果運氣差、或是「範本設計工具」無法滿足各種客製修改需求，只好直接使用 CSS 語法、或直接改範本了。

2. 修改原則

瞭解以上敘述後，如果你不太熟悉 HTML/CSS，但又想自行調整 Blogger 各處版面，大致可歸納出以下原則：

最保險的是，說服自己遷就現有範本的版面效果，除非改壞後，有自行修復的能力。
真的想自訂版面，建議盡量別動到範本內容，只使用「範本設計工具」來做有限度的修改。
覺得自己有冒險家精神，想嘗試網路找到的教學、自己修改範本內容，務必先閱讀「備份範本的訣竅」系列文章。
讀完之後，做好版本控制以及完善的註釋，出了事才能自行交叉比對、找出原因，或是還原回正常狀態。

二、修改字型大小顏色

1. CSS

簡單整理幾項修改字型時，可能會用到的 CSS：

字型(font-family)：請參考「中英文字型跨平台設定最佳化」、「網頁中文字型除了微軟正黑體, 還有這些好選擇」。
粗細(font-weight)：「font-weight 屬性用法介紹」
斜體(font-style)：「font-style 屬性」
尺寸(font-size)：「透過 font-size 屬性設定文字大小」
顏色(color)：「color 文字顏色設計」、「CSS 色碼對照表﹍快速挑選好看的顏色」
陰影(text-shadow)：「text-shadow 文字陰影」

以 WFU BLOG 為例，以下是一組修改文章標題可能會用到的範例：

font-family: "文泉驛正黑","WenQuanYi Zen Hei","儷黑 Pro","LiHei Pro",Meiryo,"微軟正黑體","Microsoft JhengHei",sans-serif;
font-size: 16px;
color: #666;
text-shadow: 1px 1px 2px #bbb;

2. 即時效果工具

調整 CSS 時，每次修改一次參數 → 範本存檔 → 重整頁面看效果 → 再微調參數 → 存檔... 這個流程會耗費大量時間，非常沒有效率。

想自行修改版面的讀者，務必學會使用「Chrome 開發人員工具」，這樣改任何參數，例如字型的尺寸時，就不用為了從 24px 一路調到 16px 這樣的過程，來回不斷存檔、重整頁面，直接利用「開發人員工具」，調整的任何數值，可即時在畫面上看到效果，然後將所有最終參數在範本中修改即可。

三、修改各區塊字型

在範本中添加 CSS，最簡單的流程為：

後台 → 範本 → 自訂 → 進階 → 新增 CSS

以下以 WFU BLOG 舉例，列出各主要區塊如何用新增 CSS 的方式修改字型，若有未提到的部分、或使用非官方範本，請利用「Chrome 開發人員工具」找出區塊的位置。

1. 網站標題

.Header h1, .Header h1 a {
font-family: Calibri;
font-size: 40px;
color: #5e7380;
text-shadow: 2px 2px 2px #ddd;
}

2. 導覽列

.tabs-inner .widget li a {
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
}

3. 文章標題

h3.post-title, h3.post-title a {
font-family: "全字庫正楷體", TW-Kai, "Yu Gothic", "Ms PGothic", SimHei, DFKai-SB, sans-serif;
font-size: 24px;
color: #666;
text-shadow: 1px 1px 2px #bbb;
}

4. 文章內容

.post-body {
font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", Meiryo, "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 18px;
color: #333;
line-height: 1.5;
letter-spacing: 1.4px;
}

5. 日期

h2.date-header {
font-family: Arial, Meiryo, sans-serif;
font-size: 14px;
}
.date-header span {
color: #444;
}

6. 側邊欄(小工具)標題

div.widget h2 {
font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 14px;
color: #333;
}

7. 整個網站

body {
font-family: "Trebuchet MS", Trebuchet, SimSun, sans-serif;
font-size: 16px;
color: #333;
}

四、標題最佳化

以上的範例，對於 Blogger 文章標題、或網站標題等等而言，不是最好 CSS 的設定方式。若考慮到 SEO 效果，建議讀者參考這三篇系列文，會是最好的設定方式：

ptt-overload-PTT 過載連不上？各種軟體快速登入技巧整理(SSH加密連線)

以前登入 PTT 時，若是在晚間熱門時段，當人數逼近 15 萬就可能連線超載而連不上。但最近一反常態，連冷門時段、或線上人數不過 4 萬而已，竟也會出現「系統過載」的訊息，讓人不免懷疑是否 PTT 的連線遭到攻擊。

於是蒐集了一下事件發生的原理及解法，本篇整理了各種工具(PCman + PttChrome + Mo PTT + JPTT)能順利連上 PTT 的技巧，讓塞車時段也能獲得優先連線的權利，有效減少不斷重新登入的次數。

一、成功連線的原理

1. PTT 連接埠

根據這篇「PTT 討論串」，PTT 一共有這些連接埠：

23
443
3000~3010

一般 telnet 連接預設使用 23，而 Mo PTT、JPTT 預設使用 443。不過每個連接埠都只能承受一定的連接量，當超過數量、或遭到異常攻擊時，就無法連上 PTT，此時可手動嘗試其他的連接埠，例如：

telnet://ptt.cc:3005

如果出現「過載」訊息時，使用這招有可能重新順利連上 PTT。

不過在熱門時段，更改連接埠用處不大，因為所有連接埠都是滿載的狀態！

2. SSH 連線

看了這篇「用更安全的方式連上PTT」才瞭解，原來 PTT 的連線由於沒有加密，所以一旦連線封包被有心人攔截，帳號密碼就被看得一清二楚。

除了加密連線會比較安全之外，根據這個「PTT 討論串」，大家的使用心得都是，使用 SSH 連線後，就不太會發生連不上 PTT 的狀況。

這是很合理的，「加密連線」能夠取得優先連線的權利。

那麼以下就來看看，各種熱門的 PTT 連線軟體如何調整，來快速登入 PTT。

二、PCman

1. 更改連接埠

連線 → 開啟站台列表 → 選擇你的 PTT 站台 → 設定

pcman-port-PTT 過載連不上？各種軟體快速登入技巧整理(SSH加密連線)

如上圖，在紅框連接埠的位置，更改你的埠號即可。

2. SSH 連線

操作方法來自「用更安全的方式連上PTT」，我的使用心得及操作步驟如下：

下載「PCman SSH 加密版本」
解壓縮 zip 檔後，將 PCMan.exe 這個檔案，覆蓋原來 PCman 資料夾中的同名檔案。

pcman-ssh-login-PTT 過載連不上？各種軟體快速登入技巧整理(SSH加密連線)

執行後，如上圖紅框，連線網址輸入 telnets://ptt.cc
接著第 1 項輸入 bbs
第 2 項直接按 Enter

以下就進入登入 PTT 的流程了，成功登入後，將這個連線加入「BBS最愛」，可方便以後的操作。

由於這個「PCman SSH」是舊版，設定檔的儲存位置不太一樣，以 Win7 為例，設定檔的路徑為：

C:\Users\使用者名稱\AppData\Roaming\PCMan

因為我目前使用「PCman Combo」版，設定檔路徑在：

C:\Users\使用者名稱\AppData\Roaming\PCMan Combo

可將原本 Combo 版設定檔直接複製到 SSH 版設定檔路徑，這樣「PCman SSH」的環境設定就不必重新來過了。

3. PCman Combo + SSH

上面提供的下載檔案，是「PCman 舊版 + SSH」，如果與你的系統不相容、或是遇到中文輸入的問題，可改用「PCman Combo + SSH」或「PCman Lite + SSH」，請參考這個 PTT 討論串，來下載相關檔案：