WFU BLOG

前陣子因為購買網址，研究了一下普遍認為很划算的「Godaddy」。通常選擇網域名稱供應商時，不能只調查第一年的註冊費用(只繳一次)，最重要的是調查續約價格(每年都要繳)，除非是申請臨時性的網域(例如辦活動)。

好消息是，無論註冊費用、或是續約費用，Godaddy 跟其他供應商比起來，都有機會拿到最優惠的價格；而比較不好的消息是，Godaddy 的英文介面及控制台，比較會讓中文使用者卻步，另外就是「隱私保護(Private Registration Services)」的費用比較貴。

以下請參考 WFU 的歸納心得及自製折價券查詢工具，日後回來查詢有無最低價時，按下這個按鈕前往該網頁即可：

點此查詢折價券

一、購買網址的要點

1. 網址取名的要點及流程

網址取名是極度重要且困難的一件事，跟作戰沒什麼兩樣。由於主題太大因此另闢專文，請直接參考「網址命名的要點整理及流程SOP」。

2. 免費網址的壞處

如果覺得搶網址太困難而卻步，提供一點心得給猶豫是否買網址的讀者加強信念，請參考「如何讓大陸讀者能看到 Blogger 網頁及 Picasa 圖片」→「一、準備動作──讓 Blogger 不被封鎖」→「2. 避免申請免費網域」。雖然也有免費網址可申請，但是穩定性、是否會被大陸封鎖等等，都是需要考量的因素。

二、Godaddy 折價券

1. 折價券網站

Godaddy 隨時都能找到折價券，只要 Google 下面這些關鍵字，就能找到一大票網站：

Godaddy Promo Code / Coupon
配合折價券後的價格，跟原價 (USD 12~15 / 年) 相較之下真的是天差地遠，以下是幾個推薦的網站：

http://www.dute.me/→ 中文介面
http://www.retailmenot.com/view/godaddy.com→ 英文、提供成功率
http://renewalcoupons.com/godaddy-renewal-promo-codes/→ 英文、續約折價券整理
http://livecodes.blogspot.tw/→ 英文、觀察指標首選 → 請參考「三、何時會出現最低價？」→「1. 利用 Blogger 篩選字串」

2. 注意截止日期及限制

折價券都是有期限的，如果使用以上的英文網站，得特別注意敘述文字。因為使用沒有即時更新的網站時，當你看到了很優惠的價格，結果是幾個月前的資訊就白高興了。因此優惠卷需要注意以下幾個資訊：

截止日期
適用的域名 (針對 .com 或 .net 或...)
該折價券適用於新註冊網域、或是續約網域，得看清楚
是否需要一次買複數年

關於折價券的使用心得，也可參考這一篇「購買網域如何使用優惠碼」

3. 最低價格與可接受價格

利用本文開頭 WFU 所寫的「查價工具」，觀察折價券的價位分佈後，得出以下結論：

註冊新網域最低價：USD 0.99 / 1年 (很少出現)
註冊新網域可接受價：USD 1.99 / 1年 (每個月都會出現)
續約網域最低價：USD 8.49 / 1年 (不常出現)
續約網域可接受價：USD 8.99 ~ 9.99 / 1年 (偶爾出現)

三、何時會出現最低價？

實際上，為了想要找到低價，而常常去逛這些折價券網站，是很沒效率的一件事，因為：

不是每個網站都定期更新，所以必須一次檢查多個網站
而我們只是要找出最低價格，但卻必須讀完所有資訊，這個流程將花費大量時間。

1. 利用 Blogger 篩選字串

前面介紹的網站 Live Godaddy Promo Codes 是我們的秘密武器，因為該網站位於 Blogger 平台，利用 Blogger feed API 可以篩選字串的功能後，再搭配「Blogger 文章列表極速版__依日期排列」的主程式碼，可快速得知最近是否出現優惠價。

2. 搜尋工具使用說明

點此查詢折價券

進入以上網頁後，預設會列出「續約網域最低價：USD 8.49 / 1年」的搜尋結果，因為預期這會是使用率較高的搜尋價格。

經觀察後，續約價有可能出現的低價為 USD 8.49、USD 8.99、USD 9.99 這幾種；首次購買有可能出現的低價為 USD 0.99、USD 1.99。以下為搜尋的建議字串：

網域續約：8.999.998.499,99
首次購買：0.9999 cent1.99

以上出現一個奇怪的 "9,99"，因為該站長曾把句點 "." 打成逗點 "," → 因此有時可把句點改成逗點來搜尋。

以「8.49」這個搜尋結果為例，我們可看到去年年底(聖誕節檔期) ～今年一月份，剛剛出現了一波 USD 8.49 續約網域的機會。

3. 檢查週期

建議利用行事曆(例如 google 行事曆)，設定循環提醒，也許每個月為一週期，固定用這個查價工具查詢一下，看看有沒有低價出現。若運氣好出現了，便可立即買網址或續約，不必等到期限到才續約(屆時可能找不到什麼優惠)。

四、購買流程及心得

1. 購買流程

網路上已經有非常多 Godaddy 購買流程教學文章，在此只列出筆記供參考：

2. 省錢心得

從前面的歸納心得來看，如果不是很在意一定要最低價的話，那麼常常有以下機會：

用 USD 1.99 買到新網域
用 USD 8.99 ～ 9.99 續約

由於續約的時間沒有限制什麼時候，不一定快要到期前才續約，那麼可以將「折價券查詢工具」的網址加入書籤，平時利用行事曆提醒自己定期巡一下，就有機會每年以低價續約了。

3. 購買隱私保護心得

有一部分的使用者其實並不在意是否能以低價購買、續約網址，更在意的是隱私能否被保護，不希望自己的身家資訊在「whois」被起底，因此如本文開頭曾提到的，買網址時會加購「隱私保護」。對於這個部份，將在下一篇分享心得，如何利用這個自製折價券查詢工具，在 Godaddy 找出比較划算的管道。

上一篇「Godaddy網址購買及續約」說明了如何利用篩選器來找出便宜的折價券，本篇則是針對想要加購「隱私保護」功能、或是正在考慮是否購買的使用者。

以下先提供相關資訊來輔助判斷，再舉例說明 Godaddy「隱私保護」功能的相關流程及心得。

一、是否需要保護隱私

1. 註冊資訊需要確實填寫嗎？

這篇「如何申請Godaddy域名」→ 最後面的「注意事項」可供參考，主要考量點為當註冊資訊不實時，若被舉發則可能被停權。

2. 註冊資訊不隱藏會怎麼樣？

經由這個「whois查詢網站」，任何網站的註冊資料都能查詢，沒有隱藏的話，所有電話、住址都會被看光光。

3. 不想額外花費的對策

想省下經費隱藏註冊資訊，當然也不是沒有對策，就像股市作手使用人頭帳戶一般，借用親友的資訊也是一種途徑，不過先行知會當事人、讓 Godaddy 聯絡時，確認身份沒問題即可。

二、Godaddy 加購「隱私保護」的優惠價

1. 首次購買

Godaddy 針對首購族的優惠最多，連「隱私保護」也很低廉，點下面按鈕前往「折價券篩選器」頁面，搜尋字串 "private" 或 "privacy"，就能找出含有「隱私保護」的折價券。

點此查詢折價券

歸納一下，搜尋結果常出現 USD 4、針對首次購買網域含「隱私保護」的價位。

2. 續約

Godaddy 續約幾乎找不到針對「隱私保護」的折價券，很久才會出現一次極優惠價 → 看來 Godaddy 就是打定要賺「隱私保護」這筆錢 → 一年約 USD 8 以上。

一般來說，續約可利用前面的「折價券篩選器」，輸入字串 "renewal" 來搜尋續約的折價券，最大的折扣大致為總金額折價 30% 出頭而已，因此「續約(USD 14.99) + 隱私保護(USD 8 ↑)」在 Godaddy 就算使用折價券，也都是要花費 USD 15 以上。

3. 其他選擇

+張香腸在這個「Blogger中文社群討論串」推薦了「name.com」這家代理商，一年費用含「隱私保護」為 USD 10.99，跟 Godaddy 比非常划算，而且操作界面比較友善。

因此，如果在 Godaddy 續約時，找不到比這個價位更優惠、或是接近的折價券時，那麼建議可以移轉到 Name.com。

4. 移轉出 Godaddy 相關資訊

若要移轉到 Name.com，以下整理幾篇筆記以備將來不時之需：

三、Godaddy「購買/續約 + 隱私保護」流程及心得

以下分享 WFU 的「購買+續約」心得。

1. 如前所述，利用篩選器搜尋字串 "privacy" 後，我找到一些符合「首購族+隱私保護」的折價券號碼：

cjc4fp: USD 4 含 privacy
cjc3cp: USD 3 含 .com 網域 / USD 1 含 privacy

2. 購買流程請參考「上一篇」→「四、購買流程及心得」→「1. 購買流程」，以下只摘要重要之處。

3. 先測試了 "cjc4fp" 這個優惠券，結果發現使用折價券後，結帳畫面如下：

網域一年 NT. 469 → 最後價格成為上面紅框的 NT. 120 (也就是 USD 4)
「隱私保護」原價要 NT. 257(約 USD 8 ↑) → 結果下面的紅框依然是 NT. 257 價格不變

以上結果代表「隱私保護」這部份沒有優惠到，因此這張折價券並未完全生效。

4. 改為測試 "cjc3cp" 這個折價券

5. 結果網域價格變成 NT.89 (約 USD 3)，「隱私保護」價格變成 NT. 29 (約 USD 1)，代表這張折價券生效了。

6. 測試一下一次買個十年，看看價位是如何──

發現這張折價券非常不錯，「隱私保護」的部份，依然是每年 NT. 29 元
而網域的部份，從第二年起的價格為 NT.298 (約 USD 9.9)。

7. 考量到前面提到 Name.com 每年續約含「隱私保護」的價格為 USD 10.99，那麼這張折價券從第二年起，也是一樣的價格(USD 1 + USD 9.9)，這樣評估起來，在 Godaddy 要續約 + 「隱私保護」最划算的方式，就是在首購時，一次買下複數年的合約。

最後經過評量，WFU 決定先購買五年，至少第一年的價格(USD 4)是賺到的。

四、結論

從本文 WFU 提供的經驗與流程，大致可做出兩個結論：

1. 最省錢的方案，出現在「一、是否需要保護隱私」→「3. 不想額外花費的對策」，就看讀者如何評估了。

2. 不想消費人情關係的話，可以在 Godaddy 第一次購買時，直接下單五～十年，之後就偶爾碰碰運氣，利用「篩選器小工具」，看能不能遇上出現「隱私保護」折價券。萬一到合約期滿都沒有划算的方案時，那麼就轉戰 Name.com 了。

發佈「下拉選單安裝懶人包」一陣子後，發現會造成兩個小缺陷：

1. 行動版的網頁小工具失去作用
2. 對網頁版 SEO 稍微有點影響

因為 WFU BLOG 的行動版讀者不多，因此一直未針對這件事進行調校。直到最近換了新網址後，需要重新做 SEO，所以剛好來一次解決這兩個問題。

一、下拉選單造成的影響

1. 下拉選單的原理

下拉選單通常利用 CSS 語法，將選單隱藏起來，當滑鼠經過導覽列時，觸發 hover 狀態，再執行 CSS 來顯示選單，此為下拉選單的原理。

2. 平版裝置的現象

然而在平版裝置，並不存在滑鼠、所以也沒有所謂的 hover 狀態，這導致使用者必須做「按下」的動作，行動裝置才會認定這是「hover 的狀態」。

為了在平版裝置做「按下」的動作，來顯示下拉選單，那麼超連結必須設定為井字符號 "#"，而不能設定為某個網頁的超連結，避免按下後無法觸發下拉選單，反而跑到別的網頁去了。

3. 手機裝置的現象

然而「網頁」小工具設定的超連結為 "#" 時，在 Blogger 的官方行動版，「網頁」小工具的連結就等於沒有作用→ 這造成在手機上，網頁小工具形同虛設。

4. SEO 問題

當「網頁」小工具設定的超連結為 "#"，就失去了一個可以建立連結的機會，來讓搜尋引擎爬取及建立資料。

因此，下拉選單會造成的矛盾點不少，從以上幾點就看得出來，以下試著來找出解決方案。

二、最佳方案

為了同時解決以上難題，大致要進行的動作如下：

製作兩個 Blogger「網頁」小工具
第一個指派給行動版範本使用 → 設定正常的超連結 → 然後將這個小工具在網頁版隱藏起來
第一個的超連結剛好可以讓搜尋引擎爬取
第二個供網頁版及平版裝置使用，拿來當下拉選單 → 然後將這個小工具在行動版隱藏起來

原理大致如上，經過這些步驟後，就能在所有裝置、各自展示不同的效果，以下為實作過程。

三、操作流程

1. 製作兩個 Blogger「網頁」小工具

過去「Blogger 如何安裝兩個相同的小工具？」的方法已經不需要使用在本文，因為最近 Blogger 官方進行「網頁」小工具改版，現在只要在後台 → 版面配置 → 新增小工具，就能新增多個「網頁」小工具了。

2. 調整小工具位置

額外新增一個「網頁」小工具後，用滑鼠拖曳到導覽列的區塊，假設小工具標題設為 "網頁mobile"，拉到原本「網頁」小工具的上方，如下圖──

3. 設定超連結

這個 "網頁mobile" 小工具，不是給網頁版使用，而是專給行動版使用，並兼任 SEO 用途。

因此請自行設定多組超連結，供行動版的讀者在頁面導覽之用。這部分的操作很簡單因此略過，有兩種方式：

從後台版面配置的畫面，按下小工具的「編輯」按鈕
也可從行動版的畫面，按下小工具最右邊的螺絲起子圖示

4. 設定行動版參數

接下來從後台 → 範本 → 編輯 HTML → 搜尋小工具的標題名稱，例如 "網頁mobile"，可找到這個區塊──

如上圖籃框，可看到 "網頁mobile" 的 id 為 "PageList2"(請記下自己的 id, 下個步驟會用到)，然後如圖中紅線，請加上 mobile='yes'這個參數。

另外，原本的網頁小工具，位置應該在下方，也就是 id 為 "PageList1" 那一個，必須加上參數 mobile='no'。

先別存檔，動作還沒結束。

5. CSS 設定

為了讓 "網頁mobile" 這個小工具在網頁版不顯示，必須用 CSS 將其隱藏起來。請在範本中搜尋 </head>，找到後，在其前一行插入以下程式碼：

<style>
#PageList2 {
display: none;
}
</style>

以上紅色字串 PageList2 請置換為上個步驟「4. 設定行動版參數」所記下 id 字串。

到此所有動作結束，可以存檔看效果。

四、行動版參數的含意

最後補充一下「三、操作流程」→「4. 設定行動版參數」為何要如此設定。請參照「Blogger 行動版範本初探」→「三、讓小工具出現在行動範本」→ 第 2 點、第 3 點。

1. 為何行動版網頁小工具的參數設定為 mobile='yes'，是因為要讓這個小工具在網頁版及行動版都能執行(就能被搜尋引擎索引連結)，但另外用 CSS 隱藏起來(在網頁版就不會顯示)。

2. 如果第 1 點行動版網頁小工具，參數改成設定為 mobile='only'，效果會不一樣 → 變成在網頁版不會執行，就不能被搜尋引擎索引連結了。

3. 原始的網頁小工具，其作用為在網頁版、平板裝置執行下拉選單，因此參數設定為 mobile='no'，讓其在官方行動版(手機)不執行。

或許本文概念不容易快速理解，不過由於操作步驟其實很簡單，只要依樣畫葫蘆就能完成；至少先照著操作，可以讓「網頁」小工具分別在網頁版能執行下拉選單、在官方行動版能正常運作，需要理解的部份可稍後再細究。

(Pic from: businessemail.rediff.com)有了自己的專屬網域後，可以設立無數個第二層網域，也就是子網域(subdomain)。就像買了一間房子，怎麼個隔間法都可以；每個房間是要送禮或自用，端看自己的主意。

有的子網域可以經營分站，有的可以拿來分租(假設網域名稱夠棒的話)，有的還能轉往外部網站。以下介紹一些轉址的應用，並介紹強大的 "網域覆蓋" 功能。

一、轉址的應用

其實子網域如何地轉址，可以有千百種可能性，每個人都能發揮自己的想像力。WFU 提供幾種構想充當素材：

1. 社群網站

Facebook：例如設定為 fb.wfublog.com→ 跳轉到 FB 粉絲頁網址 www.facebook.com/WFU.BLOG
Google+：例如設定為 plus.wfublog.com→ 跳轉到 G+ 個人網址 plus.google.com/+WayneFu
微博：例如設定為 weibo.wfublog.com → 跳轉到個人微博

2. 部落格平台

痞客邦：例如設定為 pixnet.wfublog.com→ 跳轉到 wfublog.pixnet.net/blog
Xuite：例如設定為 xuite.wfublog.com→ 跳轉到 blog.xuite.net/wayne.fu/blog
Tumblr：例如設定為 tumblr.wfublog.com → 跳轉到 Tumblr

3. 拍賣網站

露天：例如設定為 ruten.wfublog.com → 跳轉到賣場網址 http://mybid.ruten.com.tw/credit/point?露天帳號
Yahoo拍賣：例如設定為 bid.wfublog.com → 跳轉到 Yahoo 賣場網址
淘寶：例如設定為 taobao.wfublog.com → 跳轉到淘寶賣場網址

4. 個人相關網站

「Ask.Fm」：例如設定為 ask.wfublog.com→ 跳轉到 ask.fm/WayneFu
「About.Me」：例如設定為 about.wfublog.com→ 跳轉到 about.me/WayneFu
YouTube：例如設定為 youtube.wfublog.com → 跳轉到自己的 YouTube 網址

二、轉址的優點

利用子網域轉址，顯而易見的就是可以自訂子網域名稱，進而讓網址大大縮短。因此這些轉址主要的好處，都是藉由縮短網址產生，大致有以下幾種：

1. 提高專業度

例如一般的拍賣網站，賣家的網址都是落落長，長得像這樣：

http://mybid.ruten.com.tw/credit/point?露天帳號

這樣的網址無論是要印名片、或放在部落格、或貼在論壇宣傳，看起來都不夠專業。如果賣場網址長的像這樣：

http://ruten.wfublog.com

是不是看起來像個專業賣家呢？

2. 便於記憶

原本 G+ 的冗長網址，包含許多亂數編號，沒有人記得住：

https://plus.google.com/communities/103807083735607134704

現在改成這樣，是不是簡單多了：

http://plus.wfublog.com

3. 名稱統一

網路上不只是網址名稱必須先搶先贏，基本上所有的網路服務都一樣，帳號名稱都是必須要先搶為快，甚至前面舉例的「About.me」這個網路名片服務，還提供了預先註冊帳號的功能，讓我們就算還沒決定是否使用這個服務，也可先預定帳號名稱(防止被搶走)，以後再來規劃內容。

所以，會發現 WFU 的舉例之中，每個服務的帳號名稱不盡相同，例如──

G+："WayneFu"
Xuite："wayne.fu"
痞客邦："wfublog"

不過利用子網域轉址後，全部都歸到 wfublog.com 這個網域之下，名稱得以全部一致，再也不會讓讀者感到錯亂了。

三、強置覆蓋網域名稱

以上提到的例子全部都是轉址，也就是說，瀏覽器上的網址會改變為轉址後的網址。而網域供應商 Godaddy 的轉址服務，提供了一個不尋常的功能──強置覆蓋網域名稱(forward masking)，會讓轉址後依然保持原本的子網域名稱。

這功能很強大，因此有不錯的應用，但其實這不是萬能丹，因此需要稍微探究一下。

1. 子網域的實質內涵

要能真實擁有一個子網域，其實一般是需要租用主機、經過 DNS 種種設定等等程序。如果沒有主機，像 WFU 一樣只是買個域名，那麼最多只能設定子網域名稱，是無法擁有實質的子網域，這也就是說，子網域都是需要經由跳轉，就像本文前半部的內容。

那麼，為何 Godaddy 可以讓我們的子網域網址不必跳轉，難道 Godaddy 送我們主機嗎？

2. 覆蓋網域的原理

其實 Godaddy 讓子網域網址不跳轉的原理，是利用 IFRAME 框架網站內容，就像是這篇「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」所做的事情一樣，Godaddy 幫我們把其他網站的內容，框架在子網域這個網址之內，所以網址才得以不跳轉。

3. 覆蓋網域的不好影響

Iframe 別人網站是不道德的行為，那麼框架自己的網站，就沒有任何道德或利益層面的疑慮了。然而，Iframe 還是有不少缺點，以下兩點摘要自這篇文章「Problems with Masked Forwarding」：

在行動版頁面的效果會受到影響。
對 SEO 有不好的影響(這是最主要的原因)。

4. 其他影響

另外有個現象，就是經由使用 Godaddy 這個功能後，被覆蓋的那個網域，不管頁面在內部怎麼跳轉，瀏覽器顯示的都會是我們的子網域名稱。

這個現象是好是壞，也許取決於我們應用的方式，才能做出評判。也因為研究了這個現象，才了解到以前曾逛過一些網站，發現奇怪，怎麼會無論如何跳轉，網址都不會變～～

四、強制覆蓋網域的應用

1. 適合的應用

WFU 認為這個功能，適合用在單一頁面、或是該網域連結不多的情形。例如：

客服問答網頁「Ask.Fm」→ 可惜經過實測，ask.fm 有防框架的機制
個人網路名片網頁「About.Me」→ 實測 ok
拍賣網頁

2. 不適合的狀況

如前所述，這個功能不利於 SEO，因此就不要用在各個部落格分站，例如痞客邦、Xuite 等等。對於部落格，只要使用轉址功能就好了。

3. 強制覆蓋網域的侷限

「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」提供了破解框架的語法，因此只要該網域使用了防止 Iframe 的語法，就無法覆蓋網域了。

經測試後發現，Google+ 與 Facebook 都無法框架網域，因此不是每個網域我們都能夠強制覆蓋。
此外，Adsense 明文規定不可放在 Iframe 之內，抓到就會停權，所以須特別小心檢查，使用「強制覆蓋網域」時，該網頁有沒有放置 Adsense 廣告。

理解完本文的功能與原理後，下一篇將實地操作，用 Godaddy 舉例，如何來設定本文提到的功能。

(Pic from: businessemail.rediff.com)「上一篇」說明了子網域轉址的優點，及強制覆蓋網域的原理和應用；本篇則是使用 Godaddy 來演繹操作的過程，並說明某些選項的意涵。建議先看完上一篇的原理，才會比較明瞭本篇的操作說明。

一、轉址的操作

首先登入 Godaddy 帳號：mya.godaddy.com

如上圖紅框，按下 Launch

如上圖 A～C 的順序，先勾選要轉址的網域 → 按下 Forward(轉址) → 選擇 Manage Subdomains(管理子網域)

上圖為管理界面，WFU 已經設定好一些子網域，如果日後要編輯或刪除，只要按每個項目右邊的 "鉛筆" 或 "打叉" 圖示即可；如果要新增轉址的子網域，請按下紅框的 Add Subdomain Forwarding。

上圖的例子中，WFU 準備將 G+ 個人頁設定到子網域，並取名為 plus.wfublog.com，這個部份必須說明如下：

1. Subdomain

填入要設定的子網域名稱(例如 plus)。

2. Forward to

填入跳轉的網址。稍微要注意左邊通訊協定的選擇，例如 G+ 是加密的通訊協定 "https://"，而不是 "http://"。

不過最簡單的方式是將完整網址直接貼上，Godaddy 會自動幫我們補上 "http://" 或 "https://"。

3. Redirect type(轉址型態)

有兩種選項，不過通常是填入 301(永久轉址)。

會填 302(暫時轉址) 通常是測試用、或短期用途，這個選項會讓搜尋引擎爬蟲機器人無法傳遞網站的權重，也就是對網站的 SEO 比較不好，因此沒特別情況，請一律選擇 301 即可。

4. Forward settings(轉址方式)

選擇 Forward only 代表只跳轉網址，不遮蔽網域名稱。至於如何抉擇是否遮蔽網域名稱，請參考上一篇「子網域轉址的各種應用」。

由於 G+ 無法用 Iframe 框架，所以這裡 WFU 只能選擇 Forward only。

二、遮蔽網域的操作

1. 操作說明

如果想要遮蔽跳轉的網址，那麼上個步驟不要選擇 Forward only，改選 Forward with masking即可。

如上圖，這次改以網路名片「About.me」為例，說明設定步驟。

選擇 Forward with masking 後，有一些資訊需要填寫：

Title(標題)：這裡填入的資訊，會成為瀏覽器分頁視窗的標題。
Description(敘述)：稍微描述一下這個網站的性質，可以適當穿插一些關鍵字，作為 SEO 用途。
Keywords(關鍵字)：看看有沒有什麼關鍵字要補充的，可以寫在這裡。不過，其實填不填沒什麼差，因為搜尋引擎規則不斷在變，例如 google 已經不太管這一項了。

填寫完後，按下方紅框的 Add 即可。

2. SEO 作用

補充一下說明，其實以上 3 項資訊的填寫，算是 Godaddy 的貼心服務，因為上一篇「子網域轉址的各種應用」曾提及，使用子網域跳轉，代表這個子網域並非實質的存在，因此也談不上需要做 SEO。

但 Godaddy 提供了這個「遮蔽網址」的功能，讓我們的子網域變成了一個「假性的實質存在」，子網域網址固定在那裡沒有跳轉，那麼該網址就能塞入一些資訊，例如標題、網站描述等等，供搜尋引擎爬取，進而產生該網址的權重。

因此，好好填寫這幾項資訊，是可以有一點 SEO 用途的。

三、收尾的操作

1. 收尾

所有的子網域跳轉都設定完後，按下上圖 Save 即可，一段時間後才能生效。法定的說詞是快則 1～3 小時，晚則 24～48 小時。

不過 WFU 使用 Godaddy 到目前為止，任何設定都生效的很迅速，快則幾分鐘，晚則 10～20 分鐘就能生效。~~(不曉得是不是信用卡還沒扣被到款、Godaddy 尚未入賬的關係)~~

2. 如何得知設定是否生效

根據 WFU 的操作經驗，是有辦法能夠得知子網域跳轉的設定生效了沒，先借用第二張圖──

設定完畢後，會回到這個畫面，此時按下網域名稱的連結，也就是圖中的 WFUBLOG.COM 的位置，可進入該網域的設定畫面。

先按下紅框的 DNS Zone File，會出現下方的畫面。

檢查一下 A(Host) 這個區塊所顯示的的資料，如果 Godaddy 已經完成設定的話，那麼我們剛剛建立的子網域 about、ask、fb 等等就會出現這個區塊；如果有沒出現的子網域，那就表示該子網域 Godaddy 還沒完成轉址設定。

談完了子網域跳轉，下一篇要說明經營 "真實存在的子網域"，也就是成立真正的分站，能夠實實在在增加我們網域的權重，使網域的價值真正成長。

前陣子在 +coke tech 的「首頁」看到，怎麼這個標籤分類工具有點眼熟？原來就是「Blogger 文章列表極速版__依標籤排列」。當初設計這個工具的原意本不在此，不過現在看起來，當成 Blogger 標籤工具也是一個很棒的應用！

其實長久以來，一直陸續有看到這樣的需求──「能不能讓 Blogger 按下標籤後出現文章列表」，尤其從別的部落格平台轉戰 Blogger 的使用者特別會詢問。因此感謝 +coke tech 的巧思，那麼就來動手調校一下原本的文章列表。

點此看範例網頁

一、如何修改文章列表

因為原本的「文章列表__依標籤排列」是放在文章裡面，所以標籤按鈕做得又大又寬。現在要放在側邊欄這個狹小的區塊，加上很多使用者的側邊欄設定得很小，常常不到 300px，甚至低於 250px，因此連帶字體大小也需要更改。

在主程式不變的架構下，WFU 將 CSS 修改為適合在側邊欄顯示的狀態，及隱藏 "新文章" 的標示，來減少寬度。不過每個使用者的範本都不一樣，最終想要適合自己版面的話，可能還是需要一點 CSS 基礎，才能改得漂亮。

二、安裝程式碼

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

很難得的，本篇沒什麼參數需要特別更改，因為重點在 CSS 的修改，因此 js 的部份一般是保持預設值即可。

如果只想列出部份標籤的話，那麼 G行可以填入不想顯示的標籤名稱，每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。

現在可以存檔看效果，也可先到 DEMO 網頁試玩一下：

點此看範例網頁

三、CSS 修改

1. CSS 區塊擺放位置

請對照程式碼行號，R～BG行的 CSS 區塊，如果放在小工具的區塊也是能執行，只是網頁執行效率比較差一點(不一定感覺得出來)。而好處是，程式碼全部放在一起，管理上比較方便，將來如果要移除工具的話不會漏掉。

對於網頁高手而言，請自行將 R～BG行的 CSS 區塊放在範本中 </head>之前即可。

2. 修改字體

每個人的範本都不一樣，如果字體大小、顏色不如預期的話，修改的地方如下：

標籤：綠字 /* 標籤按鈕 */的區塊
文章標號：綠字 /* 文章編號 */的區塊
文章標題：綠字 /* 文章標題 */的區塊

可以新增的參數舉例如下：

字體大小：font-size: ??px;
字體顏色：color: #aaa;

3. 修改項目符號

每個標籤前面的預設符號為 "●"，這也是經由 CSS 設定出來的。要修改的話，請詳閱以下的步驟：

A. 進入這個網頁：「CSS & Javascript Character Entity Calculator」

B. 按照上圖 A～C 順序，貼上自訂的字元(例如"●") → 按下 Convert → 在 CSS Value 那一行會產生對應的轉換字串(例如 "\25CF")

C. 參照程式碼 AB行，將紅色字串置換成上個步驟 B 所產生的轉換字串即可。

想要修改項目符號的顏色，也可在 AA～AD這個區間自行增添 CSS 參數。

四、小提醒

由於前陣子才發生「Google Drive(js檔)疑似流量有限速」的情形，而本文的小工具，由於放在側邊欄，預期 js 檔被執行的機率很高。為了避免將來某天這個小工具無預警罷工，建議讀者自行將 js 檔分流：

將程式碼 L 行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0NGhwZ2tQMU45VDA/blogger-label-toc-140512-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串。

以上流程不清楚如何操作的話，一樣參考「Google Drive(js檔)疑似流量有限速」這篇文章即可。

(Pic from: pixelportal.com.au)自由度較低的部落格平台(痞客邦、Xuite)，大部分的功能官方會提供；而自由度高的平台(Blogger、Wordpress)，官方提供的功能有限，很多都得仰賴第三方小工具來實現。

然而，第三方工具就像傭兵一般，我們是否瞭解這些外來軍團、具備管理知識，甚或傭兵的素質不一、其中是否混有 SPY，每一點都是重要的考量。

保險的作法當然是只用正規軍，否則行軍速度越來越慢，甚至被木馬屠城，不知如何收尾就慘了。以下先說明所謂 "第三方" 的定義，再列出第三方工具的不良影響。

一、何謂第三方工具

Blogger 由於自由度高，網路上有許多高手貢獻程式分享，以廣義而言，這些 "非官方" 的程式都可算第三方工具。不過，WFU 認為把他們全部當成傭兵看待不太公平，其實很多都可算是自己人──

1. 存取後台資料的小工具

例如「最新回應」、「文章列表」、「相關文章」這些小工具，其實都只是存取同一個網域的資料，傳輸速度只在一瞬間，因此 WFU 認為這些工具可以當成 "隊友" 看待。

只是隊友也有分等級，這個主題我們後面再談。

2. Google 相關產品

因為 Blogger 是 Google 產品之一，而使用 Google 相關產品的小工具，基本上都還是存取 Google 伺服器，因此這類小工具 WFU 認為可以當成 "盟友" 看待。

例如使用 Google 試算表資料庫的「WYBOARD 部落格即時留言板」、使用 Google Anayltics 資料的「單篇文章計數器」、或是 Google Map 的相關工具，這些盟友在 http 的請求至少會比外部的伺服器來的快。

3. 沒有外部請求的程式

例如「下拉選單」、「浮動導覽列」、「回到頂端按鈕」這一類的工具，並沒有需要請求外部資料，充其量只能算 hack(調校)而已，只要程式寫得好的話，不會是影響網頁速度的主要因素。

因此 WFU 的觀點是，除了以上三種程式，需要存取、連往 Google 以外伺服器的工具，對 Blogger 而言，才算是實質上的第三方工具。以下將逐項列出，使用這些第三方工具，需要面對的風險。

二、資料庫掌握在別人手裡

例如 Cbox、Disqus 等留言板，免費就能安裝與使用，功能也很強。然而其隱憂是，由於留言資料儲存在第三方的資料庫，那麼重視留言的站長，萬一突然間這些服務宣布收費怎麼辦？另外就是，有沒有辦法在各種情況下掌握這些資料？舉例來說：

網站搬家時→ 網址變更能否移轉留言
文章網址變動時→ 有時文章重新編輯、重新發佈後，網址會變更，留言資料可能不保
資料庫出意外時→ 萬一第三方的資料庫損毀、或沒做好備份，留言可能消失

(pic from: markxii.com)

以 Blogger 而言，最保險還是使用官方提供的留言板，這些留言永遠能跟著文章綁在一起。

三、外部伺服器的穩定度

如果第三方服務的公司規模不夠大，伺服器不夠多、不夠穩定，短期間內有高流量時，可能就無法承載，進而影響這些第三方工具的執行。

例如 BloggerAds，常有使用者抱怨，在 BloggerAds 後面的程式都卡住了，詳細情形可參考這篇「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」。

另外一個例子為社交分享工具 AddThis，當其伺服器不穩時，那麼讀取 AddThis 的 js 程式碼就會很久，造成頁面載入時間被拖累，詳情可參考這篇「Slow AddThis: Reason and Solution」，這篇文章也提供了解決方法，只不過這個解法不是每個瀏覽器版本都能支援就是了。

四、服務停止營運

當資料存放在第三方服務時，其實每一天都是風險，因為下一個小時，這間公司會不會消失我們無從知悉，說不定這個小公司的主機、網址合約到期，或錢燒完了，或突然遭到流量攻擊，或承擔不起流量增加的費用，就瞬間關門了。

很早期有個國產的部落格文章計數器服務「MyHotPost」，當然作者很熱心、根本算是做公益，自己承擔伺服器的流量費用。很不幸的是 WFU 才裝了一陣子(大概不到一個月)，就遇上作者宣布終止這項服務，這也導致所有數據全部消失。

原因 WFU 沒有深究，不過可以臆測的是，終究無法長期自行支撐主機的費用，除非多數使用者願意贊助。因此選擇第三方服務的重點之一，就是該服務有沒有辦法存活的跟 Google 一樣久，如果第六感認為很難的話，建議少用為妙。

五、收集使用者資料

許多第三方服務都是免費的，然而如果該公司沒有廣告收益的管道、或提供付費的版本，那麼他們圖的是什麼？當然就是蒐集使用者的操作習慣、興趣等等資料，這樣才有辦法轉換成收益。Google 使用 cookie 來分析使用者資訊大家都知道，而許多第三方服務則是使用超連結來動手腳。

以「相關文章」外掛的 LinkWithin 來舉例，一般而言，每個相關文章的連結應該像這樣：

http://www.wfublog.com/

不過對著該篇文章按右鍵、複製連結後，你會發現，連結竟然長的像這樣：

http://widget5.linkwithin.com/redirect?url=http%3A//www.wfublog.com/&rtype=&vars=%5B%22http%3A//www.wfublog.com/2014/04/wfu-blog-domain-anniversary.html%22%2C%201831077%2C%200%2C%20%22http%3A//www.wfublog.com/2014/04/wfu-blog-domain-anniversary.html%22%2C%20315839031%2C%204%2C%20315839043%5D&ts=1399980023871

這就是說 Linkwithin 會先把資料傳回他們伺服器後，再轉址到該篇相關文章。

Well，其實也不是很嚴重的事，看讀者自己如何評估了。以 WFU 而言，覺得一個超連結這麼做不是很乾脆罷了。

六、程式有問題

有問題的程式大致上有兩種狀況：

1. 沒有採非同步執行

這個主題太大，因此有機會另外討論，用舉例說明的方式比較快，例如前面提到的「BloggerAds」，其 js 程式就不是非同步執行，講白話就是一行一行依序執行(不能多行同時執行)。

那麼當 BloggerAds 的伺服器不穩的時候，這一行程式無法正常執行，就會導致永遠輪不到下一行的程式執行，也就形成頁面塞車的情況。

也因為有 BloggerAds 這樣的前車之鑑，WFU BLOG 開發的程式碼都是非同步執行，保證不會讓頁面塞住。

2. 程式有木馬

Ab? farh? 是很有名的 Blogger 工具發佈網站，數量龐大的使用者都曾安裝過這個網站的工具，例如文章列表、分頁工具等等。不過約半年前被 Google 偵測到其程式碼有惡意內容，事件始末請參考 +Bin Ye 的這篇「Google 警告 Ab?-farha? blogtoc JS 安全異常」。為何 WFU 要在某些字母使用問號 "?" 代替，有興趣可參考該篇文章的留言。

總之，很多使用者習慣在網路上隨意安裝、測試各種小工具，其實風險不小。要如何篩選網路上的程式，下一篇會談到這個主題。

七、小結

根據 +Mark X 的「網頁載入速度黃金三秒」，加快網頁載入速度，是增加訪客再訪率的重要因素。因此網站有哪些小工具是非必要的，需要審慎評估。下一篇將提供一些評判的原則、及替代方案以供參考。

(Pic from: pixelportal.com.au)「上一篇」詳述了第三方工具可能的不好影響，那麼對於 Blogger 而言，不算第三方的程式，就比較安全了嗎？

當然不見得，以下先說明原因，並提出針對第三方與非第三方工具，在篩選上的建議。

一、非第三方程式要注意之處

這裡所謂 "非第三方程式" 為 WFU 的定義，是指「上一篇」→「一、何謂第三方工具」→ "存取後台資料的小工具"、"Google 相關產品"、"沒有外部請求的程式" 這三種。這些程式都可能導致以下四個大問題──

1. 範本管理習慣

Blogger 裝了許多非官方程式之後，管理變成一件重要的事。使用者常常會發生以下情事：

看不出哪一段程式碼是從哪裡 copy 來的
看不出程式碼的頭跟尾分別在何處
移除程式碼時沒有完整移除乾淨
要刪除 A 工具時，卻誤刪了 B 工具的部分程式碼

要避免以上的狀況，務必參考「Blogger 範本__(一)各種註解方式」→「一、範本註解方式」，將每個工具的名稱、出處、頭尾都註釋清楚才行。

如果是 WFU BLOG 的讀者，應該會注意到安裝程式的頭、尾之處，會註釋相關資訊，正是為了幫助讀者避免以上的麻煩。

2. 程式碼相互衝突

Javascript(以下簡稱js) 是個自由、隨性的程式語言，隨時能夠宣告變數，因此範本裡安裝的程式一多，就有可能發生不同的程式之間，使用相同的變數，而導致程式當掉。

為了避免這樣的情形，如同「Javascript 設計模式(筆記)__（一）精要」→「二、減少全域變數」所提，WFU BLOG 的程式會自我要求只使用一個變數，甚至完全不使用全域變數，來避免跟其他的程式衝突。

3. jQuery 版本

除了上一點可能產生的變數衝突，不同使用者範本裡放的 jQuery 版本也可能都各不相同，這也增加了程式當掉的機率，解決方法可參考 +Mark X 的這篇「如何使用jQuery版本」。

4. 程式沒有動態載入

js 是個一行一行執行的程式語言，只要其中一行出問題，就會導致頁面之後的內容塞車(例如「上一篇」→「六、程式有問題」)。

因此 js 工具程式要安全的執行，必須盡量使用動態載入的技術，讓程式不是逐行執行，而是在平行的時空同時執行，這也是 WFU BLOG 發佈的工具所採用的方式。

二、如何挑選第三方外掛

以上看完了所有第三方、與非第三方程式可能產生的問題，接下來提出一些建議。在挑選第三方服務時，可先檢視以下三個原則：

1. 是否為世界級的公司

例如 Google、Facebook 都是世界級的龍頭，安裝他們的外掛工具，不但伺服器相對較穩、速度快、程式碼也寫得比較有水準。

使用了規模不夠大的外掛服務，只好戰戰兢兢、要有出問題的心理準備、期望不要無預警收攤，同時最好這個外掛是可有可無的工具。(不過話又說回來，如果是可有可無的工具，何不乾脆移除？還能加快頁面的載入速度！)

2. 程式碼是否來自官網

例如這個「Blogger 中文社群討論串」談到 Line 為何容易遭到詐騙，原因為使用者連到非官網的網址，事實上 Line 的官網為了省錢，找了個不適當的網址也必須自行承擔後果。

總之，安裝第三方服務時，建議最好連上官網安裝，避免隨意從不知名的網頁安裝。

3. 是否資料需要存在第三方

例如留言資料、計數器資料，如果需要存放在第三方服務，那麼最好三思，能夠自己掌握資料庫，才不會受制於人。

三、如何挑選非第三方外掛

這個部分其實有點困難，而且需要花費時間與心力、經驗，畢竟不存在 "世界級" 的非第三方外掛，因此需要自行對這個 "非第三方外掛" 的貼文者進行徵信、審查。

1. 檢查程式碼是否為原創

很多網路上 google 到的工具，其實程式碼只是互相抄來抄去，當出了問題時，去跟貼文者詢問，也是一問三不知。

所以最好能判斷出貼文者是否就是程式的原作者，那麼這個工具才有保障，比較值得安裝。(例如 WFU BLOG 的程式碼會註明出處)

2. 觀察貼文者的留言

從貼文者的留言回答，大致能觀察出其寫程式的程度，再來決定是否使用該工具。

3. 自行留言

如果該貼文者的留言不多、或分析不出來時，那麼我們可以自行留言詢問技術相關問題，除了可以測試斤兩，也可觀察出貼文者回覆的間隔、頻率。

4. 檢查程式碼

這部分對 js 不熟悉的話可跳過。檢查的要點主要是「一、非第三方程式要注意之處」→ 2、4 兩點。

如果原始碼裡面看到一大堆 var、設定了太多的全域變數的話，比較會有發生衝突的風險。
如果主程式使用 <srcript src="xxx.js">這樣的載入方式，會延遲頁面載入速度，需要改寫成動態載入的方式較佳。

5. 檢查是否為惡意程式

想辦法找到原始程式網址出處後，然後 google 該網站，檢查是否含木馬或惡意程式，例如下圖：

搜尋關鍵字後，如果該網站的程式有問題，Google 會列出如紅框中的提醒文字 "這個網站可能會損害您的電腦"。從這個範例就可知道，第 1 點「檢查程式碼是否為原創」，進而找到源頭是一件很重要的事。

四、常見第三方工具的替代方案

為了避免第三方服務可能中斷的影響，列舉一些常見工具的替代品，能夠確保該功能長久運作：

1. 各種外掛留言版

例如 FB、Disqus 等等，可改用 Blogger 原生官方留言板。或許功能不夠強，但網路上可找到各種 hack 來加強功能，例如表情圖案、顯示圖片及影片等等，而如果要排序留言的話，用 js 也是寫得出來。

2. Cbox 即時留言版

可改用「WYBOARD」。

3. AddThis 社交分享按鈕

可改放幾個常用的超連結語法即可，減少 js 外連請求的時間。也可參考這篇「在 Blogger 加上各種推文按鈕」自行製作圖案與連結。

4. LinkWithin 相關文章

可改用「Blogger 相關文章 + 任意尺寸縮圖」。

5. 文章瀏覽數

搜尋 "post views counter" 可以找到非常多的文章瀏覽數小工具，不過都不出名，隨時可能會倒，然後數據歸零。最保險的方法還是參考這篇「Blogger單篇文章計數器」。

五、總結

就像是 Windows 系統，安裝的程式越來越多後，系統會跑得越來越慢。部落格跟作業系統一樣，範本越乾淨就能執行得越有效率。

如果 Blogger 範本還沒整頓過的話，可以參照本篇的內容整理一番，並且去蕪存菁，留下必要的外掛即可。越快的網頁載入速度，絕對能帶來更多訪客、給予讀者最佳印象。

「舊版相關文章」的安裝方式稍微麻煩、複雜一些，如果對 Blogger 範本的操作不太熟的讀者，可能就無法安裝成功。因此，這個新版本改成安裝懶人包的方式，算是一個步驟就能完成安裝，相信不會再有安裝失敗的情形發生。

另外，WFU BLOG 的工具更新不一定會有版本號，但這個相關文章使用了 V2 的版本號，代表有重大變革，因此稍後會有詳細介紹。

有了這些新的功能，此版本可說是 Blogger 平台功能最強的「相關文章」工具，其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例；而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。

點此看範例網頁

以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。

一、V2 版的特色及提醒

1. 抽樣方式進化

舊版抽樣的母體，為每個標籤近期的 N 篇文章(可自訂)；新版的抽樣母體不必再額外設定，會從每個標籤的所有文章來抽樣→ 這代表年代再久遠的文章都有機會現身。

順帶一提，LinkWithin 雖掛名 "相關文章" 工具，其實抽樣的文章多半不相關，若掛名 "隨機文章" 比較恰當。

2. 任意尺寸縮圖進化

舊版任意尺寸縮圖的技術比較不成熟，選擇保持原圖比例時，當寬度固定後，每張縮圖的高度會不一致；新版的任意尺寸縮圖，不但原圖比例能保持，也能裁切成任意尺寸的縮圖，讓版面保持一致、美觀。

3. 圖片可在大陸顯示

根據「讓大陸讀者看到 Picasa 圖片」的原理，縮圖的通訊協定一律轉換為大陸可讀取的 https。

4. 更多相關文章功能

新版的此功能，版面改的比較簡潔、直覺；按下「更多相關文章」按鈕，便會重新篩選出一組新的相關文章。

5. CSS 可自訂

新版所有區塊的 CSS 全部開放自訂。

另外，有兩點注意事項需要先瞭解一下：

Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。無論如何，PICASA 與 Blogger 都是 Google 產品，建議參考這篇「使用 PICASA 的三大好處」，儘早改用 PICASA。
請參考這篇「Google Drive(js檔)疑似流量有限速？檔案自行分流教學」，自行置換本文程式碼的 js 連結。

二、安裝程式碼

安裝過舊版相關文章的話，請先將舊版程式碼完整移除。

1. CSS 樣式

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

<style>
/* 相關文章2 */
.rltPost2_bar { /* 標題欄 */
}
.rltPost2_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
.rltPost2_allPost { /* 相關文章區塊 */
display: table-row;
}
.rltPost2_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
}
.rltPost2_post:hover {
background: #ecf5ff;
text-decoration: none;
}
.rltPost2_post:hover .rltPost2_picFrame {
border: 1px solid transparent;
}
.rltPost2_picFrame{ /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
}
.rltPost2_pic { /* 圖片 */
border-radius: 5px;
}
.rltPost2_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rltPost2_more { /* 更多文章按鈕 */
vertical-align: middle;
display: table-cell;
font-size: 60px;
}
.rltPost2_more:hover {
background: #ecf5ff;
}
</style>

2. 主程式碼

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

可先存檔看效果，預設參數將顯示裁切成 120x80 (px) 的長方形縮圖，類似本文留言區塊上方的相關文章效果(或是下圖)。

注意事項：由於前陣子發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者參考以上文章連結，自行將 js 檔分流：

將程式碼 R行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串。

需要修改參數的話，請跳到下個段落。想看正方形縮圖效果可前往範例網頁：

點此看範例網頁

三、修改參數

如果想要自訂參數的話，請對照程式碼行號──

E：顯示相關文章的數量

F：設定縮圖的寬度

G：設定縮圖的高度

H：建議不要變更預設值，"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形，那麼參數改為 "N" 的話，代表縮圖強制從原圖變形為指定的尺寸。

I：相關文章工具的標題文字

J：可自訂 "更多相關文章" 按鈕的字元或圖示，也可使用 http 開頭的圖片網址。

K：文章沒有縮圖時的替代圖片，可改為自訂圖片網址(只限 PICASA 圖片)。請特別注意紅字部份的參數，在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數)，請務必改成 "s72-c"。不清楚原理的話，可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。

舉個簡單的例子，最常看到的 PICASA 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../s72-c/wfu.jpg

L：如果希望這個小工具出現在留言區塊之前的話，那麼不必變動此參數；如果是非官方範本、或想擺放在自訂位置，請更改本行參數──

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

四、修改 CSS / 設定文章標題高度

如果想要自訂 CSS 的話，請對照 CSS 區塊的綠字提示，即可找到對應的區塊來修改參數。

特別提出一點，/* 文章標題 */這個區塊設計了特別的參數 -webkit-line-clamp: 3，如果是 Chrome 家族的瀏覽器，文章標題預設最多顯示三行，超過會顯示 "..."，可以用來控制文章標題的高度，讓版面美觀。

五、常見 FAQ

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

Blogger 文章標題在預設的狀態下，於首頁可以點擊代表文章網址的超連結。但進入文章頁面後，文章標題就只剩下文字的功能，無法再點擊。如果以站長的角度來看，這不是什麼大不了的事，不過以訪客的角度而言，情況可能略有不同。

以 WFU 的經驗，逛到一篇質量不錯的文章，想保存、分享、或稍後閱讀時，最簡單的的方式為對著文章標題按滑鼠右鍵，來複製文章網址的超連結。

因此，Blogger 的文章標題，在文章頁面沒有超連結這件事，將不利於訪客幫忙傳播、分享文章。為了改善這個狀況，以下就來說明如何修改範本，順便舉例讓文章標題比較美觀的 CSS 設定。

一、補充說明

或許很多情況下，不需要從文章標題複製連結，例如，直接從瀏覽器網址列複製網址不就好了？因此再花一點篇幅說明一下，最佳的方式還是讓訪客能從文章標題來複製文章網址，原因如下──

1. 留言網址

有時從留言進入文章，那麼網址就會像是類似以下的字串：

http://www.wfublog.com/2012/11/bulletin-board.html?showComment=1399591215594#c2680021458947764108

相信這樣的網址對於不熟悉網路知識的訪客，會有不小的困擾。

2. 網址亂碼

有時使用了非官方範本，或裝了不知名的程式、外掛等等，會讓網址出現亂碼或無意義字串，例如：

http://www.wfublog.com/#.TuomlFaZCSo

相信這樣的網址比起上一點，會更讓人困惑。

3. 網址放追蹤碼

許多第三方服務，為了追蹤連結點擊的成效，會在網址放追蹤碼，例如 RSS 閱讀器，點擊後的網址又更加地冗長，類似像以下：

http://www.wfublog.com/2014/05/blogger-avoid-third-party-widget-1.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+WfuBlog+%28WFU+BLOG+%E9%83%A8%E8%90%BD%E6%A0%BC%E8%AA%BF%E6%A0%A1%E8%B3%87%E6%96%99%E5%BA%AB%29

二、修改文章標題超連結語法

根據「Blogger 文章區塊的程式碼」→「三、文章區塊」，我們可在範本中找到文章標題區塊的程式碼如下：

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

這段程式碼應該會找到兩段一樣的，一個是網頁版，一個是行動版，可以兩段都修改。

以上代表「文章標題」字串的程式碼為 <data:post.title/>，一共有四組。我們可以觀察到，Blogger 預設在某些條件下，會將文章標題加上超連結，語法為：

<a expr:href='data:post.link'><data:post.title/></a>

而某些條件之下，則只有文章標題的字串。所以要完成本文的任務，只要沒有超連結的 <data:post.title/> 字串，改為以上語法即可。

然而，這並非最佳解，因為根據「Blogger 無預警轉換區域網址」事件，代表文章網址的 <data:post.url/> 字串，會將文章網址轉換為區域網址(例如 .tw)；而我們提供給訪客複製的網址字串，還是保持 .com 會比較好。

既然要改了就徹底一點，修正為 <data:post.canonicalUrl/> 更佳。做個總結，原本的文章標題區塊，可以改成以下內容(紅字為變更的內容)：

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
</b:if>
<b:else/>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
</b:if>
</b:if>
</h3>
</b:if>

存檔後，文章標題不管在任何頁面，都可產生超連結了！

三、修改文章標題字型

文章標題在大部份情況下，甚至比內文更重要，值得設定不同的字型來引起訪客注意。這部份可參考「網頁中英文字型設定最佳化」來進行設定。

以 WFU BLOG 為例，選擇的文章標題字型為標楷體(可自行改用其他字型)，修改字型 CSS 的步驟如下：

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

2. 預設的文章標題應該位於 <h3>標籤，請自行檢查「二、修改文章標題超連結語法」之中是否有 <h3>標籤；如果不是的話，請自行置換對應的標籤。新增的字型 CSS 範例如下：

h3.post-title {
font-family: Arial, "全字庫正楷體", "TW-Kai", "標楷體", "BiauKai", DFKai-SB, sans-serif;
}

四、修改文章標題 CSS 效果

除了字型，文章標題也可發揮創意，增加一些 CSS 效果，變得美觀一些，例如增加陰影、去除底線等等。

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

2. 新增的 CSS 範例如下：

h3.post-title { /* 文字陰影 */
text-shadow: 2px 2px 2px #ddd;
}
h3.post-title a { /* 超連結去除底線 */
text-decoration: none;
}

系列文第一篇為文章標題的簡單調校，之後會有更深入的主題，將進行 SEO 的調校。

「上一版」留言 #5 +Lee Bruce詢問能否改成自適應的版本。由於目前行動裝置的普及化，而各種行動裝置的螢幕寬度不一，因此舊版本只能固定 FB 留言框寬度的 px 值，的確不合時宜，於是本篇做了小幅度的修正。

另外，之前的文章一次說明了各種部落格平台的安裝方式，版面可能稍微凌亂、不利於閱讀，因此這次不同平台將個別說明，本文只針對 Blogger 的安裝流程，其他部落格請參照以下連結:

一、留言框寬度設計的考量

根據 +Lee Bruce提供的連結「Facebook Comment Responsive Design」，這個版本的設計原理包含了，當使用者改變視窗大小時，重新計算寬度，並重新載入 FB 留言框。

WFU 的版本考量如下：

1. 這樣的設計是真正的自適應版面，不過 WFU 覺得使用者改變視窗大小的機率不高，且每次一改變視窗就重新載入 FB 留言框，須花費額外的執行時間(例如有時使用者會在短時間內，多次按 Ctrl+、Ctrl- 來放大縮小調整視窗)，因此未採用這個設計。

2. 留言框寬度符合自適應版面的寬度後，會產生的問題為，或許有的版面 100% 寬度在視覺上效果不佳，或許有的使用者不想要 100% 的寬度。因此 WFU 仍舊將寬度的參數開放出來自訂，例如可以設定為 95% 寬度這樣的效果。

二、安裝程式碼

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

基本上如果沒有特殊需求的話，儲存後就可以看到效果了，FB 留言框會出現在 Blogger 留言區塊的上方。也可看以下範例網頁的效果：

點此看範例網頁

如果需要更多的功能，那麼請繼續往下看如何修改參數，及其他安裝步驟。

三、修改參數

請參照安裝程式碼行號及綠字的備註──

G：預設值 1代表 FB 留言框的寬度為 100%；若改為 0.9 代表寬度為 90%。

H：請改為自己的 email，那麼只要一有留言，可及時收到通知。

I：請參考「四、管理留言」的步驟，填入自己的 FB 管理者 ID，那麼自己的留言就不會收到 email 通知。

J：設定顯示幾則留言

K：留言框預設會出現在 Blogger 留言區塊的上方；若想擺放到自訂的位置，本行參數可改為 "#fb-comment-area"，然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」，把全部程式碼放在範本中的自訂位置即可。

L：若部落格底色為深色, 字串請改為 "dark"

四、管理留言

如果需要管理 FB 留言的話，請請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」，來取得 FB 管理者 ID 及 FB 應用程式 →「三、Blogger 安裝」→「2013.11.22 補充」的內容，將 META 標籤的字串放在範本中 <head>後面即可。

五、其他說明及注意事項

為了避免重複內容，關於「使用說明」、「調整 CSS」、「Email 每日寄送額度」等等事宜，請直接參照「上一版」→「五、使用說明」→「六、其他注意事項」

領取 Adsense 收益最方便的管道當然是西聯匯款(備註:請參考「三、其他筆記事項」→「3. 取款方式」的電匯)，由於網路有很多參考資料，大略瞭解一下重點後，便準備前往兌現第一次的廣告收入！

查閱一下西聯官網後發現，台灣目前有四家銀行可提領(台新、京城、大眾、元大)，於是找了距離最近的元大分行辦理，因為比較方便、且 WFU 有該行帳號，結果...

赫然發現有些地方跟查的資料、以及跟想像中不一樣，為了記取教訓，以下便是此次當白老鼠的紀錄～

一、網路線上取款

1. 線上取款的優點

此行最重要的目的便是辦理「網路西聯匯款」，因為根據這篇「京城銀行網路線上西聯匯款領取Adsense」，申請了這個服務後，在家上網就能處理領款事宜，不必跑銀行，將可省下許多時間成本。

雖然第一次比較麻煩一些，且據作者所言匯率比較差，不過方便比較重要，且這是一勞永逸的事，同時也可以等待匯率較好的時機再領款即可。

2. 提供線上取款的銀行

很遺憾的是，到了元大銀行才知道，原來他們並沒有提供這項服務...(櫃臺妹妹還訝異的問：哪家銀行有這種服務？)

好的，為了避免讀者走冤枉路，把四家西聯合作的銀行都查了一遍，目前提供網路線上取款的銀行為：

京城：有
大眾：即將推出(此為「公告網址」)
元大：無
台新：無

相信下次 WFU 能領 Adsense 時，大眾應該已經推出線上取款的服務，屆時就能到距離比較近的分行辦理開戶。

二、元大取款流程

1. 準備動作

待收到「Google AdSense 的款項已經核發給您」的 email 通知後，進入「Adsense 官網」 → 右上角齒輪狀圖示 → 付款 → 可找到西聯匯款的付款收據，大概如下圖──

需要準備的資訊都在這張圖裡面，以上 A～F 訊息填寫時會用到，其他的只要依照指示，攜帶有照片的證件如身份證即可。

保險起見可將上圖印出，或將資訊複製到行動裝置、帶去填寫即可。

2. 填寫匯入匯款單

到銀行取款只需要填寫一張「匯入匯款單」即可，雖然元大的單據跟其他銀行格式不一定一樣，如下圖──

以上只要參照第 1 點的資訊，依先前 A～F 的內容填上，並填寫聯絡電話。

而匯款性質這一項，櫃台妹妹很熱心幫忙查到是「19D-專利技術事務收入」這個項目，另外英文地址也事先幫 WFU 從身份證的中文地址，翻成英文讓我填寫(其實從 B 點就有資料了)，很感謝單據的填寫沒遇上什麼困難。

三、其他筆記事項

領到款項後，發現從美金匯兌成新台幣被扣了一些手續費，現在的匯率是 30.xx，而收據上匯率那一欄顯示的是 29.877，不過銀行就是靠這個吃穿的啊～以下紀錄一些其他的心得筆記：

1. 節省匯差的方法

根據這篇「大眾銀行提領西聯匯款」的心得，作者表示可以：

直接提領美金 → 沒有匯差損失
再轉換成台幣 → 不收手續費

也許這是大眾銀行特別的服務，請讀者提領前自行確認一下了～

2. 無法代領

由於取款需要核對身份、看本人相貌是否與證件相符，這部份將無法請他人代領，也就是說每次取款都必須花費時間成本。因此將來取款時務必申請網路線上取款的功能。

3. 取款方式

現在 Adsense 多了「電匯」的方式取款，不過一般部落客應該用不到，只有事業做很大的層級才需要研究。

如果取款金額大的話，或許需要考慮匯率、手續費的問題，也就是說要考慮使用「西聯匯款、還是電匯」，計算到底 "匯損" 跟 "手續費" 哪一個比較大。那麼可以參考這篇「Adsense電匯與西聯比較」，作者阿榮還整理了一個試算表供對照。

4. 西聯官網注意事項

官網網址：http://www.westernunion.tw/tc/how_to_receive.php

這裡有不少基本重要訊息，適合領款前參考，例如：

如何確認匯款已經到達
需要攜帶含照片的政府簽發身份證明 → 例如身份證
網頁左側可查詢西聯匯款服務供應據點 → 也就是各分行的地址

(Pic from: theiciexperience.blogspot.com)原本這篇流程紀錄，是要接在上一篇「保存盜文證據」之後，沒想到一眨眼不知不覺一年就過去了～

還好測試了一下目前 Blogger 的檢舉畫面，發現跟以往差不多，因此去年的截圖依然有效。那麼就來看看，盜文者若處於 Blogger 平台，要如何讓其文章下架吧！

一、檢舉盜文簡易 SOP

本篇著重在流程紀錄，關於盜文的處置或預防，下一篇會有較詳細的統整。目前先提供簡易版 SOP──

1. 保存證據

請參考這篇「保存部落格盜文證據__archive.is」，務必先將盜文網頁保存起來，如此日後盜文者若變更盜文內容，再辯稱他沒有盜文時，我們才有投訴的依據。

2. 向搜尋引擎檢舉

例如向 Google 檢舉，讓盜文網頁消失在搜尋結果。

3. 向發文平台檢舉

如果發文平台為部落格，則向該部落格客服檢舉，要求撤除文章；如果發文平台為論壇、討論區，一樣聯繫該客服單位。

二、Blogger 平台檢舉流程紀錄

由於此次盜文者剛好在 Blogger 平台，因此以下展示的是 Blogger 的檢舉流程。

一開始在 Google 的搜尋結果，發現了第二名的內容有點問題(第一名是本站未申請 wfublog.com 之前的網址)，屬於「內容重整」的抄襲，大概有百分之六十的抄襲內容，其他部份使用自己的話講。

觀察到抄襲者的網域也是 blogspot.com，那麼就可向 Blogger 提出檢舉。

依照以上簡易 SOP，先備份抄襲內容，便可向 Google 搜尋引擎檢舉(流程後述)，接著向 Blogger 要求撤除文章，請進入以下網址：

https://support.google.com/legal/troubleshooter/1114905?product=blogger&rd=2

如果要先向 Google 搜尋引擎檢舉，請選擇紅框的「Google 網頁搜尋」，之後的流程差不多。
本文展示的是 Blogger 檢舉流程，因此如圖中箭頭，選取「Blogger/Blogspot」

選取「我有其他法律問題」

選取「我發現疑似侵犯本人版權的內容」

選取「是...」

如果只有圖片被盜用，請選圖片；本文案例為文章被抄襲，因此選「其他」。

點擊紅色箭頭的「這份表單」連結

請按圖中項目填寫，並務必使用真實姓名，否則對方提出抗辯時，我們投訴者提不出真實身分，這份檢舉就無效了。

雖然一次允許填入多個被盜文的網址，不過大部分情形還是得個別處置，建議一次處理一個網址。

而每個網頁被盜文的狀況不一，請依自己的狀況描述。如果覺得上圖這個範例的描述太籠統，請參考下圖範例。

這是我另一個被該網站盜文的網頁，該網頁有盜文也有盜圖，因此描述的文字看起來比較詳細。

接著就是填入盜文網址(注意！非盜文網站首頁)，然後勾選上圖兩個紅框處。

一樣，請填入真實姓名

最後，按下「提交」即完成檢舉流程。

三、後續插曲

過了約一個禮拜，收到了 Google 傳來的 email 通知：

官方表示 WFU 提交的兩個盜文網頁，很快就會進行移除。

結果過了四、五天後，我又收到了另一個 email，說找不到我投訴的盜文網頁，這是什麼情形啊！Google 的自動回覆機器人發生錯亂了嗎？

仔細的思索之後，應該是第一封的回覆，來自於 Google 底下的 Blogger 部門；而第二封的回覆，來自於搜尋引擎部門。由於 Blogger 處理速度較快，先執行了移除文章網頁的動作，等到搜尋引擎部門要處理這個案子時，發現資料庫中沒有這兩筆盜文網頁的紀錄，才會發生這個邏輯上的錯誤！

搞清楚狀況後，還是發了一封 mail 給 Google，感謝他們對這個事件的處理。

四、小結

從這個事件得到的感想也許是，如果盜文者出自 Blogger 平台時，檢舉流程可能要多花一點時間。意思就是說，先向 Google 搜尋引擎檢舉，並得到成果。

這樣的好處是，盜文者在 Google 搜尋引擎會留下不好的紀錄，該網站的權重會被調降，進而影響該網站其他文章的能見度，這是對盜文者的實質處罰。

等到搜尋引擎處理完後，再向 Blogger 提出檢舉，將盜文給下架。如此就不會發生本文的流程，只有 Blogger 平台得到處置，而搜尋引擎無法處置的烏龍～

(Pic from: aardvarky.com)現在手機的螢幕越來越大，使用手機搜尋資訊的比例越來越高。站長們應該可以理解，網頁版的廣告收益，勢必會有一部分的流失；而如果 Blogger 行動版的 Adsense 廣告經過適當地配置，相信能夠平衡網頁版的流失。

Blogger 行動版要正常顯示 Adsense，其實一點都不困難；不過想要隨心所欲的配置，卻又不是那麼地簡單。本篇歸納出一些簡易的操作技巧，絕對讓讀者能輕易上手。

一、行動版最簡單的安裝方式

Blogger 行動範本分為「自訂版」與「官方版」，請參考「Blogger 行動版範本修改技巧」，由於「自訂版」需要不小的語法門檻，不符合本文「簡易操作」的原則，因此請注意，本文只針對「官方版行動範本」進行說明。

讓行動範本出現 Adsense 最簡單的方式有下面兩種：

1. Adsense 小工具

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

只要曾經做過以上流程，那麼無論如何「官方版行動範本」一定會出現 Adsense 廣告，只不過位置、尺寸都會跟想像的不一樣，例如行動版 Adsense 絕對不會出現在上圖小工具的位置。

2. 設定收益

Blogger 後台 → 收益 → AdSense → 在網誌上顯示廣告 → 選擇「是」→ 任選一個擺放位置

只要做過以上流程，那麼無論如何「官方版行動範本」一定會出現 Adsense 廣告，只不過位置、尺寸都會跟想像的不一樣。

3. Adsense 出現位置

不管在前面的流程安裝過一個 Adsense、還是五個 Adsense 小工具，無論是何種尺寸，在行動版一律會出現兩個 Adsense 廣告──

一個固定在網頁的最上方，約 320 x 50 大小

一個固定在網頁的最下方，約 300 x 250 大小

二、在文章中顯示 Adsense 廣告

如果覺得 Blogger 官方行動版能顯示的廣告太少，想要增加廣告曝光的機會，那麼可以在文章中插入 Adsense 安裝碼。

不過每篇文章都要手動貼上 Adsense 安裝碼，操作上是一件麻煩的事，有沒有比較省事的技巧呢？

有的，請到 Blogger 後台 → 設定 → 文章和留言 → 文章範本 → 貼上「Adsense 安裝碼」→ 儲存設定

如上圖完成後，將來每開一篇新文章時，預設的文章內容就會出現 Adsense 安裝碼，我們再將安裝碼移動到想顯示的位置即可。(以下為參考用的安裝碼形式)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336 ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-8931???????????9"
data-ad-slot="6910?????4"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

三、不安裝 Adsense 小工具的方法

其實 WFU 完全沒有安裝任何 Adsense 小工具，版面上出現的 Adsense 廣告都是使用安裝程式碼的方式，無論是放在文章、或是放在 HTML/Javascript 小工具之中。

理由應該算是個人因素，因為只要在 Blogger 後台安裝了 Adsense 小工具，那麼在 Adsense 官網的管理畫面，會類似下面這樣子：

每個項目的名稱是由系統自行命名及決定，一堆密密麻麻的英文字串看了有點不舒服，很難迅速辨認，因此對 WFU而言不是很好管理。如果是在 Adsense 官網新增 Adsense 廣告，就能自己命名，管理畫面可以清爽不少。

現在問題來了，不安裝任何 Adsense 小工具，Blogger 官方行動版要怎麼出現廣告呢？

1. 設定收益

如前所述，除了安裝 Adsense 小工具，在後台還能從「收益」這個項目來顯示 Adsense 廣告，借用一下前面的圖：

因為我們的目的只是要在官方行動版顯示廣告，而不要影響到原本網頁版的廣告版面配置與數量，因此建議選擇「在我的文章下方顯示廣告」。

這麼做之後，網頁版的文章下方也會顯示廣告。如果原本網頁版已經設置了三個廣告，這樣會讓廣告總數超過三個，可能導致某個重點位置的廣告無法顯示，因此必須讓這個文章下方的廣告在網頁版不顯示。

2. 隱藏文章下方的 Adsense

為了讓文章下方的廣告在網頁版不顯示，必須從範本下手，請在範本中搜尋以下這一串程式碼，這就是文章下方的 Adsense：

<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>

使用判斷式就能讓這個 Adsense 在網頁版不顯示，在以上程式碼的前後分別加入以下的紅色字串即可：

<!-- 行動版才顯示廣告 start-->
<b:if cond='data:blog.isMobile'>

<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>

</b:if>
<!-- 行動版才顯示廣告 end -->

一、系列文的原理

1. 構想出處

最早是從コーさん這篇「自訂相關文章進階版」得到聯想，コーさん的作法是列出某標籤的所有文章，在某種程度上可視為系列文章，只要將文章的標籤控制得宜即可。

2. 需求及設計

WFU 的構想則是利用設定 "特定字串"，系統會篩選部落格包含此 "特定字串" 的文章標題，經比對標籤及排序後於文末列出，這就成了真正的系列文工具。

而設計上為了與該頁面的那篇文章不重複，系列文列表中的該篇文章，將不以超連結顯示，並增加一個指示圖案以供區別。

另外，由於本站不屬於美食、旅遊、攝影等需要大量圖片的性質，因此這個小工具目前只針對自己的需求，先做出文字的列表。

二、安裝主程式碼

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

請對照以上程式碼行號：

E：藍色圖示可改為自訂的字元，或使用 http 開頭的圖片網址

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

I：此行的註釋文字代表，只有該文章「使用系列文功能」時，才會執行這個小工具；沒有使用系列文功能的文章，就不會執行程式碼，以減少瀏覽器的負擔。

以上安裝完主程式碼後，接下來說明如何在文章中使用「系列文功能」。

三、使用系列文功能的方法

1. 文章範本

只要在文章中加入一行 HTML 語法，該篇文章就能自動執行「系列文功能」。而在後台文章範本中加入這行語法，又可讓這件事的操作更方便。

請到 Blogger 後台 → 設定 → 文章和留言，在文章範本之中，貼上這行 HTML 語法：

<div id="postSeries" title="填入系列文字串"><b>相關系列文章：</b></div>

2. 修改字串

做完上一點的動作後，以後只要開新文章時，都會出現這一行語法。若新文章不需要此功能，將這行字串刪除即可。若需要系列文功能，接下來請依照自己的需求修改字串。

在撰寫系列文標題時，建議一部分使用共同的字串，例如「如何用語法保護網頁文章著作權__（一）附加版權宣告」這系列的文章，都使用了相同的字串 "如何用語法保護網頁文章著作權"，我們便可將這個字串放進 title 的參數裡面，就像下面這樣：

<div id="postSeries" title="如何用語法保護網頁文章著作權"><b>相關系列文章：</b></div>

而藍色字串 "相關系列文章：" 也可改為自訂標題。

只要依照以上說明來設定字串，系統就會自動抓取文章標題中含 "如何用語法保護網頁文章著作權" 字串的文章來形成系列文功能，可點擊以上舉例的系列文章「如何用語法保護網頁文章著作權__（二）阻止全文轉載」來看效果。

3. 自訂 CSS

想自訂「系列文區塊」的話，可到後台範本 → 自訂 → 進階 → 新增 CSS，貼上以下 CSS 程式碼：

#postSeries {
margin: 20px 0px; 
}

以上只是舉例，參數可依需求調整。

想要設計出與眾不同的區塊版面，可參考這篇「特殊文字區塊實作範例」，來增加 CSS 參數，下圖是本站以前每次都要花不少時間、辛辛苦苦用手工刻出的系列文效果：

四、注意事項

比較麻煩的一點是，javascript 對於 UNICODE(中文)的排序結果，跟我們想像的不太一樣，如果系列文使用了 "一"、"二"、"三" 這樣的字串，排序結果會讓人大大的意外，如下圖：

因此如果想要有正確的排序，有以下兩種建議：

使用英數字串來排序，避免使用中文數字
系列文超過十篇時，建議補零位數，例如 "01"、"02"、"03"，否則 "11"、"12" 的排序會在 "2"、"3" 的前面。

可參考「有錢人想的和你不一樣」系列文的效果，這系列目前有 15 篇，可注意標題的設定方式。就算將來寫了第 16、17 篇，舊文章的系列文列表也能自動排入新的文章。

五、應用方式

雖然這個小工具主要用途為系列文，不過若能發揮創意，相信還有很多不錯的應用、或更棒的用途。以下舉幾個 WFU BLOG 的實例──

1. 相關主題文章

相關的文章主題不一定是系列文的形式，因此文章標題不會大部分的字串都相同。不過我們可以取一個最小的公約數，設定某個關鍵字，讓這個小工具把所有符合關鍵字的文章標題都抓出來。

例如 WFU 寫了好幾篇有關 javascript 的學習筆記(並非全部都是系列文)，相信對於想要學習 js 的讀者，看完一篇一定也想看看其他的相關心得，那麼文末若能將所有 js 相關筆記列出是再好不過的了。

由於這些筆記的文章標題一定會有這個關鍵字 "javascript"，那麼我們可以這麼設定語法參數，同時更改一下大標題：

<div id="postSeries" title="javascript"><b>Javascript 相關筆記：</b></div>
想看看效果如何嗎？請點這篇「Javascript 優良部分(筆記)__糟糕與不良的部分」，可看到標題含 "javascript" 字串的文章都被篩選出來了！

2. 大事紀要索引

有看過本站導覽列下方「公佈欄區塊」的讀者，一定知道本站每年都製作了大事紀要。不同年份的大事紀要，也可以利用這個小工具，讓想要查詢過往年份的讀者方便許多。我們可以這麼設定語法參數，同時更改一下大標題：

<div id="postSeries" title="更新紀要索引"><b>其他年度紀要：</b></div>
執行效果可參考今年度的「2014 BLOG 更新紀要索引」。

3. 多重關鍵字篩選

除了以上第 1 點「相關主題文章」提到的使用 "關鍵字" 來篩選，這個小工具最強大之處，在於還能夠使用 "多重關鍵字" 來進行篩選。

例如本站寫了一、兩百篇的 Blogger 相關文章，都會用到 "Blogger" 這個關鍵字，而大約有將近十篇的 Blogger 相關筆記，文章標題大概像是這樣："Blogger 小技巧 (筆記)"、"Blogger 新手入門（筆記）" 等等。要怎麼將這幾篇 Blogger 筆記當成系列文的模式列出來呢？

我們觀察到，標題相同的關鍵字為 "Blogger"(請注意大小寫) 及 "筆記"。這兩組關鍵字並沒有連在一起，所以無法使用之前的設定方法，不過可將這兩組關鍵字用空格 " " 來隔開，語法設定如下：

<div id="postSeries" title="Blogger 筆記"><b>Blogger 相關筆記：</b></div>
執行效果可參考這篇「Blogger 文章相關工具及技巧 (筆記)」，這樣的設定會將標題含有這兩組關鍵字的所有文章篩選出來，這算是目前發現最棒的應用了！

六、需求建議

由於一方面目前 WFU 使用系列文沒有縮圖的需求，另一方面如果使用縮圖的話，或許效果很接近「Blogger 相關文章 V2」，那麼版面上在距離很近的位置，擺了兩個構圖效果相似的工具可能不太恰當。

因此對於這個小工具有什麼延伸構想，歡迎提出討論，如果有不錯的結果，或許可衍生出另一個版本。

當網址字串有誤時，伺服器會傳回 404 錯誤訊息，表示網址頁面找不到。為了不讓訪客流失，這些錯誤網址是在什麼原因下產生、如何設計 404 頁面，都是值得站長們深入研究的主題。

本文將會分析 404 頁面的相關事宜，並抽絲剝繭找出 404 頁面的最佳設計方式，及提供達成這種設計的小工具，想直接安裝請跳至「四、安裝 Google 自訂搜尋」，下面範例網頁會前往 "http://www.wfublog.com/404" 這個不存在的 404 錯誤頁面：

點此看範例網頁

一、訪客看到 404 頁面的反應

雖然本篇主要談的是應用層面，不過基礎知識還是需要帶過一下，建議先參考百度的這篇「404頁面」，從原理、錯誤原因、到 SEO 等面向都整理地很詳盡，是身為站長必須了解的內容。

然而，這些知識訪客不需要知道、可能也不想知道。那麼，當訪客看到網頁出現了 404 錯誤時，他們會有什麼反應呢？這感覺就像是走進了一條死巷子，大概會覺得運氣很衰，稍微確定一下真的沒有出路、也沒什麼路標指示後，結果八成是自認倒楣、摸摸鼻子退回巷口，繼續往別處尋找目標吧！

如果熟客看到 404 錯誤，他們會知道如何回到首頁，知道怎麼找到標籤列表、文章列表，或使用搜尋框，來找出需要的文章。但是多數第一次造訪網站的讀者不熟悉這一切，他們需要有完整、詳盡的路標，才不會迷路。

更甚者，當沒有 404 錯誤頁面提示時，很多訪客會認為，這個網站是不是搬家了？是不是已經沒有在維護了？除了轉身離開，對網站形象也是一種受損。

相信看到這裡，站長們可以了解，只要沒有設計 404 頁面，將會錯失這些潛在訪客的流量。也許百分比不大(其實也很難知道大不大)，不過以經營生意的角度來看，很少老闆嫌客人太多而往外推吧？

二、錯誤網址的來源及修正方式

讓我們來看看 404 錯誤的結果多不多吧！如果網站登錄過「Google網站管理員工具」，請選擇你的網站 →「檢索」→「檢索錯誤」，這裡可查詢所有的頁面錯誤。

以桌面版為例，「桌面」→「找不到」，這裡列出的就是 404 錯誤頁面，如下圖：

點進其中一個錯誤網址 →「連結來源」，可看出這個錯誤網址是從何處連過來的：

如果是自己網站的內部連結，那麼事情好辦，到該網頁找找看，是不是自己有哪個連結輸入(或複製貼上時)出錯，然後更正其可。

如果出問題的連結是從是外部網站而來，就像上圖的例子，那麼可以在 Blogger 後台 → 設定 → 搜尋偏好設定 → 編輯「自訂重新導向網址」：

如上圖分別填入外部連結、及正確的連結，以後這個外部連過來的錯誤網址，就能自動導向正確網頁，而不會流失這個訪客了。

三、404 頁面的設計

在 Blogger 後台設定「自訂重新導向網址」可解決外部 404 錯誤的問題，不過這招並非萬靈丹，因為：

這是事後補救措施
必須常常上「Google 網站管理員」查詢
某些自動抓取內容的外部網站，程式有問題時，會不斷地製造出有問題的外部連結，導致永遠修補不完。

所以外部 404 錯誤，如果能透過 404 頁面就解決是再好不過。

1. 基礎 404 頁面設計

一個不錯的 404 頁面需要包含的要素，這篇「如何處理網頁中出現的404頁面」提到的有：

指向上一級子目錄的鏈結
網站地圖頁面
網站查詢的建議和搜索框

當然還可自行增加其他選項，例如「首頁」、「文章分類列表」之類。

有了這樣的 404 頁面，至少不會讓訪客猜測這個網站是不是倒了、或搬家了。而且設計良好的 404 頁面能給予訪客類似「客服」的感覺，對於能提供客服的公司，相信顧客會認為這個企業有一定的規模，能給予更多的信賴感。

2. 美觀有趣的 404 頁面設計

有了基礎工程後，有時間的話可以再來進行美化的工作，提昇網站的形象。可參考專業的 404 頁面設計，例如
「404 頁面：為網路上的旅人準備的小驚喜」、「50個有趣的創意404頁面設計」。

3. 最佳 404 頁面設計

以上的 404 概念，能為建立網站建立一定的形象，提供訪客某些指引，讓他們在錯誤頁面時，知道怎麼去搜尋出想要的文章。實際上，相信多數訪客是沒耐心的，只要沒立即看到答案，很少願意根據路標指示，去慢慢自己爬向正確的目的地。

因此 WFU 心目中最理想、最友善的 404 頁面，能夠在錯誤頁面出現時，自動從錯誤網址判斷，最接近的文章網址是哪一篇，然後將建議結果給予訪客，這樣就可以確定 100% 不會流失客源了。

四、準備動作──安裝 Google 自訂搜尋

為了達到理想中的 404 功能，這個工具必須擁有自動搜尋的功能。值得高興的是，「Google 自訂搜尋」提供 API 能執行這個任務，我們可將錯誤網址處理一下，丟給 API 搜尋，就能找到最接近的文章網址出來。

1. 安裝 CSE

CSE 就是「Google 自訂搜尋」的縮寫，現在可以開始將這樣的功能實做到 Blogger 上。

無論是否曾在部落格安裝過 Google 自訂搜尋，都必須先參考這篇「安裝 Google 自訂搜尋」的流程，來申請安裝 CSE，並注意以下兩點：

在「外觀和風格」→「版面配置」→ 請選擇「只顯示結果」
如果部落格曾安裝過 CSE 的話，這次重新申請時，雖然搜尋的是同一個網站，不過網站名稱可另外取，如上圖紅色底線(取名為 "404 error")。

2. 取得 CSE 搜尋引擎 ID

安裝的過程中，可取得 CSE 的搜尋引擎 ID，請記得自己的字串，下一篇會用到。

如果部落格已經使用了官方的「搜尋」小工具，其實這跟 CSE 兩者是一模一樣的工具，但官方搜尋小工具沒有任何自訂版面的功能，所以如果有空的話，改為安裝 CSE 會比較好。

五、搜尋效果展示

先來看看「Google 自訂搜尋」的威力，以下取幾個從前面「Google 網站管理員」發現的錯誤網址，來當作 404 頁面的範例：

1. http://www.wfublog.com/2012/04/ff7-weapon-4.html.

2. http://www.wfublog.com/2012/11/recent-%E2%80%8Bcomment-avatar-title.html

3. http://www.wfublog.com/2014/04/how-to-choose-a-domain-name-sop.htmlhttp://www.wfublog.com/2014/04/how-to-choose-a-domain-name-sop.html

第 1 個錯誤網址是因為最後多了一個句點 "."；而 2、3 的錯誤網址都是由不明因素所產生，在「Google 網站管理員」裡面有許多類似的案例。不過 404 頁面使用 CSE 後，這三個範例所建議的搜尋結果，第一個都是正確的網址，可看出這個 404 頁面的強大威力。

看完範例、並完成以上準備動作後，下一篇將說明如何安裝程式碼，達成本文所提到的概念──友善的 404 頁面最佳設計。

404 頁面系列文章：

這是系列文的第二篇，請務必先看完第一篇「404頁面原理」，了解最佳 404 頁面如何設計、如何找出錯誤頁面原本的正確網址及範例、先行安裝 Google 自訂搜尋等等。

完成準備動作後，本篇將說明如何安裝程式碼，以及版面設計可以自訂之處。

一、取得「Google 自訂搜尋」的搜尋引擎 ID

參照上一篇的指示安裝完「Google 自訂搜尋」後，如下圖的畫面，可取得搜尋引擎 ID：

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

二、安裝程式碼

1. 設定 Blogger 404 頁面

Blogger 提供自訂 404 頁面的功能，請到 Blogger 後台 → 設定 → 搜尋偏好設定 → 錯誤與重新導向 → 編輯「找不到網頁時顯示的自訂錯誤訊息」

在上圖紅框的區域內，貼入 HTML/Javascript 語法，就能自行設計 404 頁面。

2. 安裝程式碼

請貼上以下的程式碼，就能實現本篇 404 頁面的效果：

請對照以上行號──

C：紅色字串請置換為前面步驟所提到，自己的「搜尋引擎 ID」。

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

儲存後就可測試效果，隨便在自己網站打個不存在的網址即可。

或者可看以下兩個本站的錯誤頁面範例，這個小工具所建議的搜尋結果，第一個都能出現正確的網址：

三、自訂頁面效果

1. 自訂 HTML

程式碼 F～W行為 404 頁面的 HTML 內容，這部份的設計依據「上一篇」→「三、404 頁面的設計」→「1. 基礎 404 頁面設計」的原則，包含了以下要素：

網站查詢的建議
搜索框
網站地圖頁面
文章列表、首頁

以下說明請對照程式碼行號，可自行置換所有藍色字串的部份──

I：包含了 404 圖片網址及文字，請發揮創意自行置換此部份的內容

L：提示「目前為錯誤頁面」的訊息

N：搜尋框提示訊息

P：「其他建議頁面」訊息

Q～S：這幾個建議頁面的連結、文字，請置換為自己的網頁，並請自行增減項目。

2. 自訂 CSS

程式碼 X～AZ為 CSS 參數內容。如需要自訂版面，請修改這部份的內容。

四、不同平台的 404 頁面

1. Blogger

本文的工具主要是依據 Blogger 平台、及 WFU BLOG 所遇到的各種 404 錯誤頁面來設計，如 Blogger 讀者遇上某些無法正確建議的搜尋結果，請留言回報，會看看如何修改這個工具來完善其功能。

2. 其他部落格平台

如果非 BLOGGER 平台，那麼可能無法套用這個工具，有需要客製 404 頁面功能的話，請從這個網頁「諮詢服務」與我聯繫。

404 頁面系列文章：

之前「買網址的附加價值」介紹了子網域的各種應用方式，而這篇「子網域介紹」讓我們瞭解，就像名人住過的豪宅，房價總是能水漲船高；若是子網域內容出色，就能拉升整個網域的價值、提高這個網域在搜尋引擎的權重。

如果經營部落格時，自認不只專精一個主題，可以利用 Blogger 開多個部落格，並且分別設定在子網域之下，讓整個網域一起累積價值。本文以 Godaddy 為例說明設定的流程，以及設定裸網域(naked domain)特別需要注意的事項。

一、真實子網域

上一篇「子網域轉址的操作」，是利用網域供應商 Godaddy 提供的轉址服務，設定虛擬的子網域。由於這種型態的子網域經過轉址後，最終的網址落在外部網域(非處於我們購買的網域)，所以無法累積網域的權重。

若使用 Blogger 開新的部落格，例如「三國志11」這個主題，先取名為 "wfu-san11".blogspot.com(因為 "san11" 被註冊走了) → 接著在後台設定成自己的網域，就能取名為 san11.wfublog.com。

只要在網域供應商的 DNS 設定正確，因為最終網址落在我們網域，這就是真實的子網域，可以累積網域的權重。

所有的部落格平台，以 Blogger 為例，???.blogspot.com 都是 Blogger 的子網域，都是在幫 blogspot.com 這個網域在累積權重。如果評估後認為能夠長期經營部落格的話，那麼使用自己的網域，才不至於為他人作嫁。

以下循序漸進，說明主網域及子網域的設定流程。已經設定過主網域的讀者，可以跳到需要的主題閱讀即可。

二、主網域設定

如何將購買的網域設定到 Blogger，由於網路上有不少教學，因此這部份簡單帶過，應該參考「官網說明」即可。如需要 Godaddy 圖文解說，可參考 +Orsino Sung 的「自訂網域及DNS設定心得」，根據 Godaddy 不同的操作方式，也可參考這篇「自定網域名稱與網址教學」。

以上流程最重要的是，最後面必須將 A HOST 設定正確，如此裸網域才能正確轉向。以本站為例，設定正確後，裸網域 wfublog.com 這個網址才能自動轉向 www.wfublog.com。

雖說目前設定正確後，裸網域能自動轉向，不過之後設定了子網域後，會出現標題所言的「奇特現象」──裸網域無法自動轉向，後續會說明如何解決。

三、子網域設定(以Godaddy為例)

本站目前設定了多個子網域，例如──

Blogger 效果展示：「demo.wfublog.com」
三國志 11：「san11.wfublog.com」

以下簡單舉例設定「三國志 11」子網域的流程。

首先進入原「三國志 11」網站的後台 → 設定 → 基本 → 網誌網址，可看到原本的網址是 wfu-san11.blogspot.com，接著按下「為您的網誌設定第三方網址」──

網址請填自訂的子網域，如圖中的 san11.wfublog.com。

請特別注意圖中的紅框，由於裸網域 wfublog.com 之前已經設定給主網站 www.wfublog.com，我們可不想把裸網域設定給分站吧！因此紅框誤必要取消勾選→ 然後按下「儲存」。

但也由於這裡取消勾選，反而產生了「奇特現象」→ 裸網域 wfublog.com 從現在開始無法指向 www.wfublog.com，這讓 WFU 為了這件事搞了很久，後面再來談這件事。

接下來我們必須到網域供應商那兒設定 DNS，才能讓 san11.wfublog.com 這個網址生效。以下以 Godaddy 為例，首先登入 Godaddy 帳號：mya.godaddy.com

如上圖紅框，按下「Launch」

按下自己購買的網域，如圖中的 WFUBLOG.COM

如上圖 A～B 順序，先選擇「DNS Zone File」，再點選「Add Record」

依照以下順序：

先選擇「CNAME(Alias)」
在 Host 欄位填入子網域名稱，例如 "san11"
在 Points to 欄位填入 "ghs.google.com" 即可
最後按下 Save 鈕

螢幕上方會出現浮動紅色欄位，接著將螢幕往下捲，看到紅框標示的那一欄，確定剛剛數入的子網域有出現後，如藍色箭頭所指，按下「Save Changes」即可。

接下來可能等數分鐘，也可能等一～兩天，子網域轉址就能生效了。

四、裸網域的奇特現象

子網域的設定很簡單，按照以上流程跑完即可。但 WFU 當初設定了多個子網域，後來卻無意中發現，裸網域到底指向何處簡直是一團混亂！以下整理所有過程的經驗，萬一遇上相關狀況的讀者可以參考。

狀況1：裸網域指向子網域

一開始設定完主網站 www.wfublog.com 後，紅框顯示「將 wfublog.com 重新導向 www.wfublog.com」，在這個畫面，我們必須勾選。

先說結論，Blogger 這裡有 bug。這個選的勾選狀態，會套用到使用 wfublog.com 這個網域的所有網站。意思就是說──

主網站勾選完這個選項後，設定子網域時，這個選項也一律是勾選的狀態。
子網域取消勾選這個選項後，在所有其他子網域及主網站，這個選項也一律是取消勾選的狀態。

一開始不清楚這個狀況，因此子網域也都是保持勾選的狀況，造成了每設定完一次子網域，我的裸網域 wfublog.com 就指向新的子網域。

狀況2：裸網域無法指向主網站

了解以上狀況後，設定子網域時，趕緊取消勾選該選項。但由於這個選項在同一個網域是連動的，當我們回到主網站 www.wfublog.com 時，在該畫面，一樣會發現該選項是取消的狀態。

這就造成，在瀏覽器輸入裸網域 wfublog.com 時，並無法指向 www.wfublog.com → 這是很嚴重的事情，難道為了經營子網域，反而讓裸網域 wfublog.com 就此失效，永遠無法指向任何一個網站？

狀況3：瀏覽器會記憶轉址狀態

「裸網域無法指向任何一個網站」這件事，其實 WFU 是無意中發現的，因為瀏覽器一直都能夠將裸網域指向我要的網站，直到某天在不同的電腦或行動裝置，輸入 wfublog.com，才發現竟然無效。

WFU 的主要裝置有四種瀏覽器，每一個都能將 wfublog.com 正常轉址，但直到在別人的電腦上使用，沒有了瀏覽器的記憶效應，才發現原來裸網域一直都是不正常的。

希望這個經驗能讓讀者明白 → 設定了子網域之後，記得在不同的裝置分別測試，才能得知裸網域到底指向何處。

五、解決裸網域的問題

最終的解決方法，請依照以下三個要點：

1. 設定完子網域後，請記得回到主網站，例如 www.wfublog.com，在下圖的設定畫面：

將這個選項重新勾選，並按下「儲存」，這樣裸網域 wfublog.com 就能重新指向 www.wfublog.com。

2. 如前所述，做完第 1 點後，如果再去子網域的這個設定畫面看，就會發現這個選項變成也是勾選的狀態。

→ 為了防止這個狀況，從現在開始，請不要到子網域去打開這個選項，這樣就可以相安無事，不會讓裸網域再度發生錯亂的情形！

3. 要確認裸網域是否正常轉址，最好在別人的瀏覽器測試，效果比較準！

自訂網域相關文章：

(Pic from: ewp.rpi.edu)談到盜文這件事，相信都是群情憤慨，就如同「網站被 7headlines 框架」事件一樣，誰都不喜歡著作權被消費或竊取。

網路上的盜文應該可分成兩個層次，一種是完整的複製貼上，另一種是內容重整(部份心得、部份複製)。不曉得讀者覺得哪一種比較無法忍受呢？

以 WFU 而言，若被盜文的話，比較討厭的是內容重整那一種。以下會敘述理由，及各種自保與反制的方法。

一、層次1: 複製貼上

1. 自保技巧

過去曾寫過一系列「保護著作權」的文章，如果使用了以下的技巧：

文章內多使用自己文章的連結
文章某些用到 "我" 的時機，替換為 "WFU"
使用隱藏字串

相信這樣的文章，就算被複製貼上，讀者還是能夠知道該篇文章真正的出處為何。

如果想了解其他的自保技巧，可參考「如何用語法保護網頁文章著作權__（二）阻止全文轉載」系列文。

2. 複製貼上的動機

有的人複製貼上是真的在盜文，只是他不知道這是比較容易被抓到的途徑。不過或許有的人複製貼上，只是為了備份的目的，放在自己的部落格方便將來查詢。

例如本站這篇「讓 Google 試算表能自動回信__FormEmailer 設定」，發現「這篇複製內容」的圖文一字不差。反正連圖片浮水印都看得出來源為何，WFU 乾脆睜一隻眼閉一隻眼，省下追訴的時間與力氣。

3. 保留追訴的權力

雖然上述例子 WFU 尚未追究，但不代表複製貼上是可取的行為，因為根據本站下方宣告的 "CC 條款"(以及導覽列的 "版權聲明")，轉貼是需要 "姓名標示" 及附上出處連結的，因此視情況 WFU 有可能追究，萬一該篇盜文的搜尋結果很前面的話。

而且這還是比較寬鬆的 CC 條款，另一派主張使用「著作權」的站長，可用更嚴格的條件對付轉貼者，請參考 +Almighty Demiurge 這個「Blogger中文社群討論串」

二、Google 能否判定重複內容？

雖說 WFU 比較不擔心文章被完整地複製貼上，但這是因為本站文章偏 "資訊類型"，利於使用前述的「自保技巧」來保護文章。如果是其他旅遊、美食、攝影類的文章，也許不是完全適用。

而且，還有一個嚴重的問題，Google 搜尋引擎怎麼知道是 WFU 複製別人的文章，還是別人複製我們的文章？

1. 原創性標記 Google Authorship

因此，取得一篇文章的「作者認證」是極為重要的事情，當 Google 認定你是該篇文章的原創作者後，文章的搜尋結果會出現大頭照，而其他一樣的複製內容當然就是抄襲啦，會很難出現在 google 搜尋引擎。

申請原創文章標記的 Google Authorship，可參考這系列的流程「讓作者頭像出現在搜尋結果__申請Google Authorship心得」。

2. 仰賴第三方社群媒介

沒有申請原創性標記怎麼辦？Google 會怎麼判別重複的網頁呢？如果是規模較小的草創網站，這一點的確比較麻煩，因為 Google 收錄的速度慢，說不定盜文者的網頁還比原創者搶先收錄。

這篇「Stolen Content問題，文章被盜用怎麼辦?」提出的作法可供參考，發文後請第一時間分享到社群媒介(Google+ 或 Facebook)，因為：

部落格發文時間能夠竄改
社群網站貼文時間無法變更為更早的時間

因此藉由第三方社群網站，可以輔助判斷誰才是原創者。

3. 自動同步貼文

要如何實現第一時間貼文到社群網站？以 Blogger 為例，可以這麼做：

同步到 G+：Blogger 後台 → Google+ → 張貼文章後自動分享
同步到 FB：使用 IFTTT → 設定 recipe → Blogger 同步到 FB

若 IFTTT 不清楚怎麼操作的話，可參考 +Phil Ko 這篇「Blogger發文自動分享到Facebook」

三、層次2: 內容重整

內容重整是 WFU 比較頭痛的抄襲方式，因為此類盜文者願意花時間把隱藏字串去除、把連結及特定字串去除，一部份內容保持一樣，一部份內容改用自己的話說。

講白了他們就是要偷我們的構想，但不想給我們 Credit，又要裝成自己是原創。其實，這一類的剽竊者很多，不只存在於網路上，網路外的實體書籍很多都是這麼做，+Pan Kuan 在 Blogger 中文社群提供了「這個案例」可供參考。

對於「內容重整」式的剽竊作者，不容易抓到，但只能說，不是不報、時候未到。就像論文抄襲沒有標示出處，多年之後被抓包時，爬的位置越高，屆時只是摔得越重。(論文被踢爆涉抄襲 6日部長楊念祖閃辭)

四、處置盜文的流程

當發現盜文者後，如何處置也許要依照情節輕重而定，以下整理一些可當成 SOP 的流程作為參考：

1. 走法律途徑

如果認為符合以下條件：

權益受損很大
需要走求償路線
有時間
有經費

那麼可參考這篇「被盜圖盜文侵害智慧財產權怎麼辦？有免費法律諮詢嗎？」，步驟列的滿詳細的，留言也有一些求償成功的案例。

2. 網路處理 SOP

如果屬於寫文章都來不及，沒有美國時間跟對方耗的站長，那麼可以在網路上直接將抄襲事件處理掉，可參考上一篇「處理盜文簡易 SOP 流程」，以下只摘要重點：

保存證據：避免對方網頁可隨時更改。
向搜尋引擎檢舉：使抄襲文章無法出現在搜尋結果。
向發文平台檢舉：向部落格平台、論壇檢舉，讓文章下架。

3. 是否需要知會抄襲者？

會不會覺得網路 SOP 有點少？許多站長還會好心地去函對方，請求將抄襲圖文下架。WFU 認為，對方抄襲前也沒想過要知會我們，而寫文章的時間都不夠了，實在沒多餘時間跟一位抄襲者魚雁往返！

當然，凡事都有例外，如果讀者在抄襲者的網站，看到作者的大頭貼是位大眼無辜美少女(男)，那麼合理的推斷應該是這位妹妹(弟弟)涉世未深，不清楚要善盡先行知會才能轉貼的義務，才會不小心犯了這個錯，因此去個函 "溝通" 一下是非常合理的。

如果不是以上情境的話，建議省下這個時間，直接向 Google 及發文平台開鍘吧！

五、Blogger 平台檢舉流程實例

關於檢舉的實例，盜文平台在 Blogger 的話可參考這篇「Blogger 檢舉盜文流程」，若在其他平台請 Google 一下聯繫的窗口了。

需要特別提的一點為，在實務的操作上，如果希望盜文者的網站能被搜尋引擎處罰，降低該網站的信任度及權重，那麼建議先跟搜尋引擎檢舉，等搜尋引擎處理完後，再向盜文平台進行檢舉。

WFU 之前就是 "發文平台與搜尋引擎同時提出檢舉"，結果發生 Blogger 平台先將文章下架，之後 Google 搜尋引擎要處理檢舉案子時，卻找不到盜文網頁這樣的結果。

六、如何知道被盜文？

如果是英語系的文章，國外有提供監測盜文的服務。然而，Unicode 系(含中文)的文章，目前要能偵測出盜文，只能我們作者自己 "勤奮" 一點、或是有報馬仔幫忙回報，才有可能得知。以下提供一些方法供參考：

1. 這篇「揪出抄襲者的幾個方法」提供的方法有：

以圖搜圖
用 Google Alert 訂閱文章標題
文章剽竊檢測工具 Turnitin→ 須自行上傳文章才能幫忙偵測

2. +Pan Kuan 在這個「Blogger中文社群討論串」使用的方法為，在文末插入個人常用語，定期用 google 搜尋此常用語，藉此發現是否有盜文者。

3. WFU 個人常用的作法為，利用「histats」→ Referring Sites 功能──

除了可看看讀者從哪些網站連過來，偶爾不小心就是靠這個功能抓到盜文者！

七、小結

雖說以上提供了不少抓盜文者的方法，然而都是必須 "勤勞"、"持之以恆"，才能長久見效；只要一偷懶，必定讓僥倖者得利。

WFU 在想，如果能有個簡單、操作方便的方法，可 "自動" 揪出盜文者，那就再好不過。下一篇將會提出這個構想，希望能遏制短視近利的剽竊心態。

處理盜文相關文章：

談到 "私密留言" 這個台灣部落格平台幾乎都是預設的功能，國外部落格平台幾乎都不會有，想要的話得自己找外掛或替代方案。也許國外平台認為，想要講悄悄話，不會直接寄 mail 給作者就好了，何必另外寫一個工具出來？

如果以官方角度想也是有道理，在後台資料庫存放一堆原本應該躺在雙方郵件匣的訊息，還要維護、避免被第三方看到，的確算是花費資源又吃力的工作。

不過既然我們風俗民情如此，另外就是在少數情況下，私密留言存放在網站上有其好處，那麼還是來介紹三種 Blogger 私密留言的替代方案：

Google+ 留言框
私密留言小工具
官方工具：聯絡表單

一、G+ 留言框

1. 安裝及使用方式

G+ 留言框的功能非常強大，只是用的人不多，完整功能大部分使用者都不熟，所以較難傳播開來。對 G+ 不熟的人，就不太知道有 "私密留言" 功能、也不知要如何使用。

要在 Blogger 安裝「G+ 留言框」，請參考這篇「Blogger 轉換為 G+ 留言系統的各種方法」。
要收到 G+ 留言框的留言通知，請參考這篇「徹底解決 G+ 留言框無法收到留言通知的問題」。
G+ 留言框的私密留言使用方式，可參考 +Ala Go 這篇「G+ 私密留言方式」。
想對 G+ 留言框有通盤的了解，這篇「G+ 社交圈與 Facebook 社團比一比」分析地非常詳細。

2. 優點

社交圈的設計機制很棒，除了一般的私密留言用法(留言者與站長兩人才能看到)，也可指定該留言讓特定人看到、或讓特定社交圈看到。
留言內容會跟著文章網址，可延伸文章內容的深度(但沒有權限的其他訪客看不到)。
留言可編輯，字打錯不用重發。
該篇文章的私密留言集中在同一頁面，便於日後查詢。

3. 缺點

私密留言與公開留言夾雜在一起
沒有 G+ 帳號無法留言
留言者跟站長不是朋友的話(不在同一個社交圈)，分享對象很可能無法選擇站長的頭像，這是很嚴重的問題。
G+ 留言框常常處於整修的狀況，不定期就會失效，且原因不一。就像最近一兩個禮拜以來，「該篇文章曾經有 Blogger 留言的話，G+ 留言框就會消失」。
有人反應過舊的 G+ 留言有時會消失。

4. 小結

從以上分析可看出，G+ 留言框使用私密留言功能時，優點很多，缺點也是超乎想像的多。

可能的原因是，Google 推廣 G+ 非常不順，導致 G+ 留言框的開發並不積極。也因為如此，WFU 覺得這個工具只能給予「觀望」的評價。

二、私密留言小工具

1. 安裝及使用方式

這是 WFU 早期所開發的工具，基於台灣的部落格只有 Blogger 無法使用私密留言，因此研究了「Google試算表當作資料庫」，才有辦法儲存留言的資料。

這個工具的使用說明請參考「Blogger 私密留言系統 V2.0__簡易安裝及使用說明」。

2. 優點

私密留言自成一個區塊，不會跟公開留言擠在一起。
私密留言區塊可折疊、展開，不太佔空間。
該篇文章的私密留言集中在同一頁面，便於日後查詢。
不用帳號即可留言

3. 缺點

安裝及驗證身份的動作比較多一些
開發處於停滯狀態，很久沒有更新版(缺乏反饋)
版面非由專業人員設計(WFU 缺乏美術天份)

4. 小結

結論很明顯，這是個堪用的工具。不過身為 Blogger 平台唯一的專用私密留言工具，在沒有競爭對手、開發成本沒有回收、也沒什麼功能需求提出的情況下，暫時無法產生進步的動力，因此短時間內不會有 V3.0 的計畫。

三、聯絡表單

1. 安裝方式

這是 Blogger 官方發佈，可充當私密留言的小工具，安裝後可讓訪客留言，以 email 私訊的方式傳遞，不會留在網站或文章。

安裝方式：後台 → 版面配置 → 新增小工具 → 更多小工具 → 聯絡表單

2. 優點

不用帳號即可留言
站長可得到留言者的聯絡方式(email)
靈活性高，可放在側邊欄、特定頁面、或每篇文章

3. 缺點

留言只能出現在站長的收件匣，同一文章主題的留言無法集中，日後查詢不易。
雖靈活性高，但對語法不熟的使用者，不一定能靈活運用。

4. 小結

當「聯絡表單」作為單一私密留言工具使用時，不一定是個很好的選擇；但是若將「聯絡表單」與其他私密留言工具搭配使用時，WFU 給予高度評價，因為能夠達到互補作用，各自消彌缺點。

而如果對 Blogger 熟悉的老手，「聯絡表單」可以隨心所欲擺放到適當位置，在各種不同情境發揮不同的應用，這部份我們在下個章節用單獨的主題來談。

四、聯絡表單的應用

1. 特殊安裝方式

這個主題過去已經寫過，請直接參考「Blogger 如何安裝兩個相同的小工具？」→「五、兩個聯絡表單的應用」即可。

從這篇可以知道如何安裝兩個「聯絡表單」、安裝到特定頁面、安裝到文章中的作法。

2. 放在側邊欄的情境

樂於跟讀者交朋友的站長，會希望有個最方便讓讀者留言的機制，即使是怕羞的讀者也能留言(內容不會被他人看到)。那麼「聯絡表單」當成小工具使用時──

部落格的每個頁面都會看到
不須任何帳號即可馬上留言
留言內容不會被看到
比起在頁面上留個 email 讓讀者聯絡，這個表單更為方便。

相信基於以上優點，可以符合這類站長的需求。且 Blogger 的小工具可以在後台的版面配置畫面，拖曳到任何位置。站長可以放在自認明顯之處，不一定要放在側邊欄。

3. 放在特定頁面的情境

有的站長習慣設定特定頁面，來當作留言板之用。在這個留言板頁面，也能放入「聯絡表單」，讓不同需求的讀者留言。

4. 放在文章中的情境

這個情境是 WFU 的使用方式。經分析後，本站很大比例的讀者從搜尋引擎而來，主要是看文章的內容，側邊欄有什麼小工具不一定會注意到，因此判斷「聯絡表單」放在文章區塊以外的地方效用不大。(這也是為何本站側邊欄大多將內容收合、不執行小工具以節省網頁載入速度)

為了讓「聯絡表單」產生最大的效用，在需要讀者聯繫 WFU 的文章內容，就會在那個文章段落擺放「聯絡表單」，讓讀者能用最方便的方式留言，例如「諮詢服務與提案合作」、「贊助管道」這樣的公告文章。

不過以上只是舉例之用，這是經驗談，台灣的風俗民情還不到習慣贊助的程度，建議站長暫時不必為了獲得贊助而建立贊助頁面～

5. email 名單行銷

這是「聯絡表單」的獨家優點，站長必可取得留言者的 Email，這在行銷上是很重要的一項利器。

相信了解這一點的站長知道要怎麼做，只要累積的名單夠多，這些都可能是忠實讀者，透過 Email 可以有很多推廣網站、增加回訪率的方式，例如 +Pan Kuan 的「跪婦阿冠週報」。

五、小結

本篇整理了各種 Blogger 私密留言的應用方式、及使用情境，足以供各種性質部落格參考。相信讀者能從中找到適合的方式來運用，也歡迎提出你的方法，來激盪出更好的應用。