WFU BLOG

使用 Google Drive 建立網頁其實很簡單，做好執行的 HTML 檔(例如 index.html)，把所有相關的檔案(html/js/css/jpg)上傳後，網站就架設完畢了，而上傳檔案及獲得外連路徑的操作可參考「取得 Google Drive 外連路徑」系列文章。

不過本篇要說明的是，操作 Google Drive 建構網頁的過程中，一些可能遇到、但鮮少被提及的狀況。同時藉由實際案例說明，更能瞭解操作要點。

一、某些檔案類型無法外連？

網頁內容的呈現需要靠 html 檔來執行，不過放在 Google Drive 的 html 內容使用外連路徑時，有一些匪夷所思的現象，以下來看實例──

1. HTML 檔內的 js 外連現象

這個狀況吃了不少苦頭才 debug 出來，例如以下的 html 內容：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>

網頁引用 js 函式庫時，使用以上 CDN 網址的載入速度比較快(可參考「如何使用JQUERY版本」)。然而這個 html 檔的內容放在 Google Drive 執行後，我們會發現彈出提示方塊顯示 jQuery 為 "undefined" → 代表這個 js 檔根本沒有被載入。

這個結果一定讓人嚇一跳對吧？似乎得到的結論為，html 檔不可使用外連路徑，只能把這個外連的 jquery 檔上傳到 Google Drive 直接引用。

難道所有外部檔案都不可連結嗎？

2. PICASA 圖床可外連

如果說 html 檔不可使用外部連結，只能使用相對路徑，但是以下的 PICASA 外連圖檔路徑，卻又可以正常顯示：

<img src="http://4.bp.blogspot.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTM/Fa2-yAEaZkM/s1600/wfublog-anniversary.png"/>

所以 PICASA 圖檔不受外連路徑的限制，js 會受到外連路徑的限制，這是目前得到的實驗證據。延伸出來的問題是，那麼哪些檔案類型可以外連、哪些又不能外連呢？

要搞清楚這個問題豈不得做上一整天的實驗，而且新的檔案類型源源不絕，為了省麻煩，最簡單的結論乾脆是，全部檔案都上傳到 Google Drive 最保險，對吧？

3. HTML 檔內的正確 js 外連方式

這件事是無意中發現的，剛好可以為這個主題下個定論，js 其實是可以外連的，請見以下範例：

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>

當把外連路徑 "http:" 給去掉後，剩下相對路徑網址，執行的結果彈出提示方塊顯示 jQuery 為 "function" → 代表這個 js 檔被成功載入。

這是個奇怪又無奈的結論：Google Drive 的 html 檔內容，外連路徑記得要去除 "http:" 字串，以確保能執行正常。

二、拖曳檔案上傳

Google Drive 支援拖曳的方式上傳檔案，這個功能讓建立網頁格外方便。

1. 拖曳檔案

基本上使用瀏覽器比較新的版本，從檔案總管選取要上傳的數個檔案後，就能直接拉進 Google Drive 來上傳，WFU 在各大瀏覽器都能執行成功，如 Chrome、FireFox、IE、Opera。

2. 拖曳資料夾

但是要建構網站，不可能只上傳幾個檔案而已，可能還需要同時上傳好幾個資料夾(目錄)。但是在檔案總管選取多個資料夾、以及多個檔案後，拖曳到 Google Drive 時，會顯示錯誤訊息，告訴我們瀏覽器不支援這項功能。

原來拖曳資料夾上傳的功能，目前只有在 Chrome 家族的瀏覽器有支援，包含新版 Opera(瀏覽器核心跟 Chrome 是一樣的) 也有支援。但是 FireFox 以及 IE，則無法拖曳資料夾上傳，這一點需要特別注意。

3. 小遊戲網頁製作範例

本站會員中心的「小遊戲區」，有一些免費的 open source (開源)遊戲，出自開源平台 Github，例如這個「突擊! 競技場」的 source code 放在這裡：

https://github.com/lostdecade/onslaught_arena

右手邊有個「Download ZIP」按下後可下載打包好的 zip 檔，解開後會有數個資料夾及檔案，全部拖曳到 Google Drive 就完成了第一步。

接著資料夾 "htdocs" 裡面有個 "index.html" 檔案，利用「取得 Google Drive 外連路徑」來取得路徑後，例如放在我的 Google Drive 路徑為：

https://googledrive.com/host/0B1EZ1B5T0maDUWdRcGhOTTd4ekU/index.html

把這個連結貼到瀏覽器網址試試看，是不是就能玩這個遊戲了呢？用 Google Drive 建立網頁就是這麼簡單。

4. 其他範例

例如安裝著名的 fancybox 燈箱外掛，也可以用拖曳資料夾的方式，迅速把所有相關檔案上傳到 Google Drive，請參考：

Fancybox, 既優雅又八面玲瓏的燈箱效果 (1)安裝教學

三、Google Drive 有流量限制

Google Drive 雖然好用，但並非架設網站的萬靈丹，是有流量限制的：

Google Drive(js檔)疑似流量有限速？

如果網站想保持正常運作，不想三不五時讓訪客開啟不了網站，那麼網站最好別架設在 Google Drive、Dropbox 等這些免費空間。

如果沒有特殊需求的話，"網站" 可以架設在 Blogger 這樣的部落格平台，以確保沒有流量的問題、也不必擔心駭客。而個別功能的 "網頁"，則可以架設在 Google Drive，例如上一點舉例的「小遊戲」頁面。

這麼做的好處是，小遊戲、個別頁面或許會因為流量太大而暫時失效，但網站主體不至於被流量限制而開天窗，給予訪客不好的印象。因此結論是，Google Drive 只適合放置 "網頁"、而非架設 "網站"。

四、編輯 Google Drive 檔案__Editey

以上三件事是比較重要的概念，而這一項算是補充的心得。上傳到 Google Drive 的檔案有時需要修改內容，如果頻率高的話，重複刪除、上傳的這些步驟也是挺累贅的。如果 Google Drive 能有線上編輯功能的話，就能節省很多作業流程。

「Editey」正是一個解決這類需求的線上服務，可以直接編輯 Google Drive 的 HTML/JS/CSS 檔案內容，讓我們不需再為了一點小小的修改而重複許多動作。

如果只有編輯部分檔案格式需求的話，也可以安裝個別的 Chrome 套件就好：

相信讀者有了本篇的這些技巧，駕馭 Google Drive 網頁都能得心應手。

Google Drive 相關文章：

許多非官方的 Blogger 範本，都會內建圖片輪播效果，可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本，才能擁有 slideshow 功能，已經有數量龐大、可免費使用的現成 jQuery 函式庫，例如這些介紹網頁「20 個免費好用的響應式 jQuery 輪播幻燈片插件」、「70+不同類型的jQuery Slider教程與DEMO」。

其中有許多功能強悍的輪播效果，甚至能展示各種 3D 特效、一次輪播數張圖片等等。而本文要介紹的這款套件「camera」，相較之下沒那麼花俏，不過 WFU 正是喜歡他的表現平穩、用途廣泛，相信其適用性可滿足最多的使用者，因此專文介紹。

點此看輪播範例

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

一、Camera 功能介紹

基本上這個外掛該有的功能都有，也有不少貼心設計，而且是免費的「MIT 授權」：

1. 基本功能

以下是 slideshow 的基本配備：

上下頁切換按鈕
分頁按鈕
幻燈片播放、暫停按鈕
至少十數種過場特效

2. 質感

如果網站特質想要展現專業感，那麼這個外掛的表現還滿平穩的，各方面的設計都沒有太突兀或誇張的部分。右上方緩慢旋轉的計時器，讓讀者可以明確知道何時要換圖片，心裡不會產生焦躁感，無形中增加了網站的好感度。

除了使用旋轉的計時器，也能改為進度條的方式，來提示何時播放下一張圖片；同時圖片下方的字幕說明橫條，也增加了不少質感。

3. 加分項目

除了上一點提到的內容，以下都是幫這款外掛加分的特點：

圖片能自適應寬度調整顯示範圍
可播放文字或影片
三十多種 skin 色系可選
可自訂各種參數、提供 API
open source 可自由改源碼

二、安裝準備動作

說到安裝，跟「fancybox 燈箱效果」一樣，這類強大的 jQuery 視覺效果外掛對部落格體系都很不友善，安裝方式只適合有主機的網站。本篇的 Camera 外掛就算把整個英文官網都細讀通透，WFU 認為依然有九成的讀者無法成功安裝在 Blogger 、並顯示完整的效果。

如果安裝過之前介紹的 fancybox，那麼對於本篇的安裝原理就能較快理解與上手，不過首先建議你申請一個「Dropbox」帳號。

1. 下載與上傳

首先到以下官方放在 Github 的源碼網頁：

https://github.com/pixedelic/Camera

按右手邊的 "Download ZIP" → 下載後解開這個壓縮檔

如上圖，camera.zip 這個檔案如不用可刪除，而其他資料夾可看出 js/css/圖檔分別放在不同資料夾。如果按照 fancybox 的安裝方式，把這些資料夾全部上傳到 Google Drive，很可惜 Google Drive 無法完整支援相對路徑，會導致 camera 官方提供的安裝檔案彼此引用路徑錯誤。

因此最方便的安裝方式，為使用 Dropbox 的公開資料夾「Public」。將所有 camera 檔案複製到「Public」資料夾之中，就等於自動上傳到免費的網路空間，可以開始引用 camera 的檔案了。

進入 dropbox 網站並登入後：

WFU 把所有檔案放在 slide2 這個資料夾，上圖可看到上傳的所有 camera 資料夾，而需要的 js 檔就在 scripts 目錄、css 檔就在 css 目錄。

舉例來說，要取得 camera.min.js 這個檔的外連路徑，只要按滑鼠右鍵 → 選擇「複製公開連結」就行了。

2. 安裝程式碼

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='你的外連路徑/jquery.mobile.customized.min.js'></script>
<script src='你的外連路徑/jquery.easing.1.3.js'></script>
<script src='你的外連路徑/camera.min.js'></script>
<link href='你的外連路徑/camera.css' rel='stylesheet' type='text/css' media='all'></link>

第一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。其他四個綠色字串請改為自己的 js/css 檔路徑。

三、使用方式

在任何想要展示輪播圖片的地方，加入以下程式碼。例如在「首頁公佈欄」的位置，新增一個「HTML/Javascript」小工具，拉到文章區塊上方，加入以下程式碼即可。

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

以下說明請參照以上程式碼行號，以及對照「camera 官網的說明」：

B：綠色字串可自訂，但必須與 I 行綠色字串一致。藍色字串為 skin 色系的參數，不設定也沒關係，要使用的話請參考官網 SKINS 部分的說明。

C~F：這區間為一張圖片的所有參數，請複製這個區間的程式碼，要輪播幾張圖片，就在 F 行與 G 行之間插入幾組程式碼，為了避免複製錯誤，特別在 C、F 行頭尾的 div 用橘色標記起來。

C 行詳解：

data-src：藍色字串請改為自己的圖檔網址
data-target="_blank"：連結另開新視窗，不需要可刪除
data-link：綠色字串請改為外連網址。若不需連結可刪除這組參數。
data-thumb：後面填入縮圖網址，若不需縮圖可刪除這組參數。若使用 PICASA 圖床，則可使用內建參數快速產生縮圖網址，請參考「PICASA 圖片規則」的原理，這個縮圖網址其實是同一張圖片，但紅色字串 "h50" 代表縮小為高度 50px 的等比例圖片。若改為 "s50-c" 則代表強制出現正方形 50px 的縮圖。

D~E：這兩行為字幕說明內容，若不需字幕可刪除這兩行

D：藍色字串為字幕效果，可使用的參數請參考官網 CAPTIONS 部分的說明

E：請改為自訂說明字串

I：綠色字串請 B 行綠色字串一致

J：time 代表每張圖片顯示時間，紅字參數 3000 代表 3 秒，若改為 1 秒請置換為 1000。

K：固定圖片的高度為 400px，藍色字串可改為自訂像素值，若不需固定高度請刪除此行。

L：預設圖片的過場效果為隨機，若要自訂效果，可放入一組或多組字串，請參考官網說明「fx: 'random'」的部分，有三十多種，例如要放入多組可將字串改為 'simpleFade, mosaic' 這樣的形式，彼此用小寫逗號隔開。

M~N：代表使用縮圖導覽。若不需要請將 pagination 參數改為 true，以及將 thumbnails 改為 false。

需要更多參數或其他效果，請參考官網說明；增減參數時要注意，J~N 行每個參數之間用小寫逗號隔開，最後一個參數之後不可有逗點。

也可參考以下官方 DEMO 網頁，更瞭解 camera 能實現哪些效果：

基本效果

輪播影片

全螢幕

jQuery 相關網頁效果：

網站使用數字分頁功能，來方便訪客跳頁尋找、閱讀文章，這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用，原因有二：

1. 如果不瞭解 Blogger 的機制，裝了這樣的外掛一定抱怨連連，請參考「Blogger官方自動分頁機制」，分頁的狀況常常會不如預期。

2. 本站屬於「資訊提供」的性質，訪客有七成來自搜尋引擎，主要目的為尋求問題的解答，平均停留頁數少，比不上旅遊、美食、心情抒發、插畫等等諸多類型的網站，訪客比較有輕鬆的心情進行跳頁式的閒逛。

不過最近一個案子需要分頁功能，且相信很多網站還是需要數字分頁的導覽效果，因此發佈此項研究成果。另外這個小工具能在跳頁時，頁面使用 Ajax 動態載入，算是獨家功能。以下先進行功能介紹，想直接安裝請跳至「二、準備動作」。

點此看範例網頁

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

一、分頁歷史與功能介紹

1. 歷史

找資料的過程才發現，原來 Blogger 分頁功能的歷史還滿精彩的，有不少掠奪著作權的進程，對故事有興趣可參考「FreeTong DIY」這篇介紹。

另外曾在「為何部落格最好避免第三方外掛？」→「六、程式有問題」→「2. 程式有木馬」提醒過讀者，現在發現這篇「《姆奈》MKnight」的第一則外國人留言，就是那個被 Google 查封的著名分頁功能作者。

這個外國作者其網站當初算是最大宗的 "Blogger 分頁工具" 輸出地，現在已經被標示為「惡意軟體網站」，只能再次提醒讀者，隨意找網路上的程式安裝到自己部落格，不小心就會替自己埋未爆彈。

2. 基本功能

分頁功能的演算法還滿瑣碎的，不得不感謝前人已經造好輪子，WFU 的工作就是把交通工具美化就好。本篇採用的程式碼出自「Helplogger」，這個版本比其他分頁工具好的地方有：

部落格文章沒有 500 篇的限制
不需讀取整個部落格的文章來載入、速度較快
標籤頁面也能執行

3. 改造功能

因已習慣「Javascript 設計模式」的撰寫模式，將原始碼修改甚多，也增加新的功能，大致如下：

程式碼全部動態執行、不拖慢網頁執行速度
跳頁不必重新整理頁面，採 ajax 動態載入 → 讀者可以感受一下 "光速載入" 的效果，對訪客是非常友善的閱覽體驗
原版本若要讓標籤頁面也能執行分頁功能，必須手動修改 Blogger 範本各處相關程式碼，此版本由程式自動執行。
刪除全域變數及不必要的程式碼

二、準備動作

1. jQuery

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 數字分頁 */
#blog-pager{
clear:both;
margin:30px auto;
text-align:center; 
padding: 7px;
}
.blog-pager {
background: none;
}
.displaypageNum a,.showpage a,.pagecurrent{
font-size: 14px;
padding: 5px 12px;
margin-right:5px; 
color: #666; 
background-color:#eee;
}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#359BED;
text-decoration:none;
color: #fff;
}
#blog-pager .pagecurrent{
font-weight:bold;
color: #fff;
background:#359BED;
}
.showPageOf{
display:none!important
}
#blog-pager .pages{
border:none;
}
</style>

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

2. CSS 樣式

以上 style區間的 CSS 樣式除了可自行修改，原作者也提供了多種樣式，如下圖：

可參考原文網站「Helplogger」來自行置換 CSS 樣式的程式碼。而如果熟悉 CSS 的話，其實色碼自己改一改就行了。

3. 注意事項

正式安裝之前仍有兩件事項需要注意：

這個工具必須讀取部落格的 feed，因此公開的部落格才能正常執行，請檢查後台 → 設定 → 其他 → 允許網誌資訊提供 → 是否為「完整」
後台設定每頁顯示的文章數，必須與小工具的設定一致，請檢查後台 → 設定 → 文章和留言 → 最多顯示 → 這裡的數字請與小工具的參數吻合。

三、安裝程式碼

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

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

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

D：紅色參數代表每頁顯示的文章數，請跟「二、準備動作」→「3. 注意事項」後台設定的數字一致。

E：紅色參數代表換頁數字按鈕要顯示的數量，若實際的頁數超過設定的數字時，會自動隱藏。

F~I：字串可改為中文，例如 "第一頁"、"最後一頁"、"前一頁"、"下一頁"。

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

存檔後即可，想先看效果請前往範例網站：

點此看範例網頁

四、補充

目前在官方範本測試，執行上應該沒問題，如有問題建議先檢查前面提到的注意事項。如有其他問題，之後再以 FAQ 的形式回答補充。

更多實用工具：

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

喜歡裝潢門面的站長可能三不五時會有一點小困擾，在站內維護的期間，例如調整版面 CSS 配置、測試安裝某些外掛時，網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題，因為多半只影響不到一天的時間。

如果是網站大改版、或是更換新範本(模版)等，那問題可就大了，受影響的期間少至數天、多至一兩個星期都有可能。建設中的工地會用圍籬、帷幕遮蓋起來，我們也該替自己的門面維持一下形象，對吧？

最近 +Orsino Sung 提出了很好的問題，「部落格能否設定短暫關閉，讀者連過來會顯示"網站升級改版中或是維修中"等資訊」，且剛好有案主希望網站能建構完畢後再設定為公開，因此設計了本文的工具。以下先介紹功能及出處，想直接安裝請跳至「二、準備動作」。

點此看範例網頁

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

一、功能及「倒數計時」出處

1. 功能

網路上有一些付費工具，能讓網站在施工期間顯示「維修中」的頁面。不過這類程式的原理只適合有主機的自架站，在部落格平台並不適用，

WFU 設計的版本，在部落格平台只會向訪客顯示「維修中」的頁面，而站長的身份則可安心地進入施工現場。

2. 倒數計時功能

向讀者提示「維修期間」的資訊是必要的，才能知道何時該回頭拜訪網站，因此需要一個倒數計時的功能。本文工具採用了免費的「CountDown jQuery plugin」，在這部分可省去造輪子的麻煩。

3. 寄 email 通知

雖然「CountDown jQuery plugin」提供了 email 通知的功能，讓站長可以在維修結束後，通知留下 email 的讀者重新拜訪網站。但該程式只適合自架站的環境(需要 php)，因此部落格平台的站長，若需要 email 通知的功能，WFU 可進行客製化處理(需要製作資料庫)，請用文末的表單聯繫。

二、準備動作

1. jQuery

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 網站維修中 及倒數計時*/
#coverPage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(47,99,135, 1);
}

#underConstruction {
text-align: center;
width: 75%;
padding: 20px;
background: #fff;
margin: 50px auto;
}

.construction_img img {
max-width: 100%;
}

.construction_title {
color: #666;
margin-top: 20px;
font-size: 40px;
font-weight: bold
letter-spacing: 12px;
}

.construction_title span {
border-bottom: 2px solid #666;
padding-bottom: 2px;
}

.construction_desc {
color: #333;
font-size: 30px;
margin: 20px auto 40px;
}

#countdown_dashboard {
height: 110px;
margin: 20px;
}

.dash {
width: 110px;
height: 114px;
background: transparent url('http://2.bp.blogspot.com/-dEcieQnffks/VGcQZr8k6nI/AAAAAAAAKis/MqqFhuQyWWA/s1600/dash.png') 0 0 no-repeat;
display: inline-block;
margin-left: 20px;
position: relative;
}

.dash .digit {
font-size: 55pt;
font-weight: bold;
float: left;
width: 55px;
text-align: center;
font-family: Times;
color: #555;
position: relative;
}

.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 6px;
font-size: 9pt;
color: #555;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>

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

2. CSS 樣式

如果對 CSS 熟悉的讀者，可自行修改 CSS 樣式、打造自己「維修中」頁面的特色。

只有一點需要特別提一下，在 #coverPage的區間，有個紅色參數 1，這代表背景的透明度。1 為不透明，若改為 0 ~ 1 之間的數字例如 0.5，會可看到背景，也就是能些微看到網站的內容。

三、安裝程式碼

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

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

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

C：藍色圖片網址請改為自訂圖片網址，此為標頭圖案。

E：藍色字串請改為自訂標題

F：藍色字串請改為自訂敘述

C~G：這個區間全部的 HTML 碼也可自行設計，改造為自訂的頁面風格。

L~Q：這六個紅色參數代表倒數計時的期限，本文的參數代表截止日期及時間為 2014/11/29 00:00:00。

R~V：這五個藍色字串可改為自訂的字串，例如 "週"、"天"、"小時"、"分鐘"、"秒"。

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

存檔後即可，只有訪客會看到這個「維修中」頁面，站長不會看到。想先看效果請前往範例網站：

點此看範例網頁

四、注意事項

1. 範本中盡量不要安裝不必要的程式碼，以加快網頁速度，因此請維修期間才安裝本文的所有程式碼。

2. 本文程式碼只適用 Blogger 平台，如有其他部落格平台需要此功能，需要另外寫判斷站長身份的程式碼。需要客製服務請用下面表單聯繫：

更多實用工具：

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

(Pic from: seocorporation.net)經營部落格一段時間後，站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等，轉移到更深的層面，例如網頁載入的速度、手機版的效能、範本程式碼優化等等。

會開始關注這些考量點，代表除了內容以外，也會站在讀者立場，想打造友善的使用者體驗。

本篇為這個系列的第一篇，由於整個主題很大，首先試著從大方向著眼，由幾個主要標題的詢問句，來協助站長釐清及分析如何進行考量，避免做出不合意的選擇。

一、是否使用高清圖片？

「圖片」算是影響網頁載入速度的首要因素，因為圖檔是所有網頁需要傳輸的檔案中體積最大的，從 "圖片瘦身" 下手，絕對能帶來 "有感" 的速度提升。不過，比載入速度更重要的問題是，網站需不需要使用高清圖片？

1. 釐清網站性質

如果網站是內容導向，以提供資訊、或抒發、評論的文字為主，讀者並非被圖片吸引而來，那麼這類型的網站，穿插圖片的尺寸不必過大，當作點綴就好，就算圖片壓縮比例稍高，也不太會是流失讀者的主因。

這類型的網站可以放心使用各種工具來壓縮圖片，以加快網頁載入速度。如需技術文章輔佐，可參考「圖片壓縮不失真加速網頁載入速度」。

2. 需要高品質圖片的網站

如果網站的讀者需要眼球刺激，例如攝影、旅遊、美食、正妹...等等，照片不夠大、解析度不夠好、圖片壓縮到變成印象派作品，肯定會流失很多訪客。

這類型的網站適合放棄「網頁載入速度黃金三秒」的思維，圖片得大一些、要能吸睛，只需進行微量壓縮就好，因為讀者進入這類型的網站，通常已經有了心理準備~

3. 補救之道

只要文章中會穿插圖片的網站，無論是否為高清圖片，都建議安裝這個圖片延遲外掛──Lazy Load。

這個外掛的原理是，圖片在背景下載、先不顯示出來，避免造成網頁捲動很卡的感覺。等背景下載完畢後，才將圖片顯示出來，這對訪客頁面捲動的操作而言，會是比較友善的體驗。效果可參考「官方 DEMO 頁面」。

不過新版 Lazy Load 的安裝使用非常麻煩，WFU 相信有此耐心的人不多，比較推薦使用舊版的 Lazy Load，相細說明請參考「Lazy Load__Blogger 最佳安裝方式」。

二、形象網站或是個人網站？

回答標題的問題之前，得先說明一下有關 javascript(簡稱 js ) 的特性。影響網頁載入速度的第二大因素，就是 js。

1. js 會拖慢網頁速度

這篇「如何讓 Javascript 執行有效率」→「二、JS 的正確擺放位置」有比較詳細的原理說明，js 如果寫的不好、擺的位置不對，有可能讓整個網頁大塞車。

除此之外，網路上找來的 js 不代表完全安全，也因為如此，如果網站沒有特定需求的話，我會建議「部落格最好避免第三方外掛」。

雖說如此，許多特效、外掛都得靠 js 才能實現，我們必須學會與 js 共存。除非有把握肚子裡的墨水能像「人渣文本」一樣，網站沒有任何門面裝潢、沒有外掛、只有文字內容，仍然不用擔心讀者流失。

2. 形象網站

想要加快網頁載入速度，結論之一就是 js 的使用越少越好。回到標題，如果經營的是形象網站，例如公司、商務、活動等類型的網站，那麼 js 這件事又得先拋在一邊了。

跟網頁載入速度相比，形象網站的門面、給訪客的視覺效果更為重要，不太可能為了加快一點點的載入速度，而拔掉圖片輪播效果、去掉形象動畫等等。

所以審視「網站效能優化」這件事時，第二個要釐清的問題會是，製作這個網站的目的是什麼？

3. 個人網站

如果目的不是塑造形象，只是個人部落格的話，那接下來要釐清的，就是站長在決定是否安裝某個 js 外掛時，「速度比較重要，還是這個外掛比較重要」？

簡單舉個例子，「圖片輪播外掛」的效果很炫，但載入 js 會明顯拖慢速度。可能有幾種思維：

如果認為這個外掛可以吸引讀者、帶來更多流量，那麼這個外掛的價值大於速度，應該安裝
如果認為這個外掛並不是留住讀者的主要原因(例如網站性質為資訊提供)，那麼速度的價值會大於這個外掛的價值，應該移除。
我是站長，這個外掛看了就爽，管他速度會不會變慢 → 站長最大，外掛留著。

如果讀者會猶豫如何取捨時，以上幾個思路或許幫得上忙。

4. js 速度的補救方式

js 之所以會塞住頁面的載入，是因為大部分都寫成單線程的執行方式。如果改寫成動態載入的 js (多線程)，就比較不會影響網頁主要內容的輸出。

基本上 WFU BLOG 所寫的 js 工具多是以動態方式來執行，如果讀者現有範本中的內容想要優化 js 的部分，可以發案子給我，用文末的表單聯繫。(不過如果非 Blogger 官方範本的話，不一定能懂其程式的邏輯，所以不是每個案子都有辦法接了)

三、手機版或自適應範本？

進入行動裝置的時代後，站長需要頭痛的，還有網頁在手機上的執行速度。這個問題要抉擇十分不容易，過去寫了一篇「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」，可先參閱這部分的內容。

1. Blogger 官方手機版

如果沒有特殊需求的話，個人推薦使用 Blogger 官方手機版就好，原因為：

簡潔、載入速度最快
不需要維護兩套範本
似乎 +Mark X 提過，使用 Blogger 官方手機版對「Google 行動搜尋」的收錄結果比較好，需要再確認一下

2. 分析訪客族群

如果很想用自適應範本取代 Blogger 官方手機版的話，建議先分析自己的訪客族群，可使用 Google Analytics 就能看出訪客來源是 "手機" 的比例大不大。

如果比例不大的話，那麼不用特地為手機版裝潢版面，用官方手機範本即可。
如果比例大的話，見第 3 點。

3. 改造自適應範本的手機版面

想提升自適應範本的手機載入速度，有兩個方向：

前面提過的 "減少 js 使用"
減少側邊欄小工具

針對這兩個目標，請參考「Blogger 行動版範本修改技巧整理」，利用 Blogger 語法判斷式，盡量地去除手機版不需要執行的 js、不需要執行的側邊欄。

同樣，這方面如果對語法不熟悉，需要發案給 WFU 請用後面的表單聯繫。

四、哪些外掛、側邊欄小工具是必須的？

為了提升網站速度，砍掉不必要的外掛、js 是必須的大掃除工作。不過這個問題並沒有標準答案，畢竟每個網站的性質不一樣，除了「二、形象網站或是個人網站？」→「3. 個人網站」提出的方法，來判斷速度與功能孰為重要之外，另外或許可以有這樣的管道來得到答案──

被動式民調：在網站放問卷讓讀者回答，不過大部分情況能得到反饋的機率不大。
主動式民調：詢問家人朋友的意見，不過準確度遠不及找到真正讀者來詢問的結果。
田野調查：找出強有力的競爭對手(成功的同質網站)，觀察他們的網站設計，學習~~(抄襲)~~必要的外掛、功能。

這部分就看站長的功力了。

五、小結

這一篇主要提出大方向的概念，先行審視自己如何做出決定，比較沒有談到細節的內容。之後會進入技術層面的操作，來檢視範本中的程式碼，達到細部的效能優化。

SEO 相關文章：

取得 Google Drive 外連路徑不是輕鬆的事，對於使用免費網路空間的站長，這些外連檔案 html / js / css / jpg / png 等等包括圖檔，如果無法方便地複製連結，那麼長遠來看，操作 Google Drive 的不便會影響使用意願，相較之下 Dropbox 複製連結路徑的設計是很友善的。

過去 Google Drive 每個檔案大約花費 3~4 個步驟才可取得外連，請參照「Google Drive 取得檔案外連路徑」。不過最近 Google 推出新版雲端硬碟，官方已經封鎖了外連路徑的資訊顯示，我相信有其考量的因素。而國外一些線上取得檔案外連的服務，都得先連上其網站，為了廣告收入這也是可以理解的。總之目前的所有解決方案，在操作上都是繁冗不便的。

為了自己使用方便，於是動手寫了個懶人專用的產生器，如果有同樣需求的讀者，相信試用後也能感受到他的便利。

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

一、使用方式

為了方便使用，這個產生器做成書籤的形式。只要先連上 Google Drive，再按下這個書籤，就可在畫面右邊看到這個「Google Drive 外連路徑產生器」。

操作流程如下，可比對上圖英文字母：

A.先按下書籤列上的書籤連結

B.稍待一下便會出現「Google Drive 外連路徑產生器」

C.將滑鼠移到要取得連結的檔案名稱上方

D.在此處會即時產生完整連結字串，並自動選取，只要按下 Ctrl - C即可複製連結。

E.滑鼠移到別的檔案時，也會即時產生對應的外連字串

使用上十分簡單，不過有些基本規則需要注意，否則會誤以為產生的所有連結都是有效的。請先閱讀「Google Drive 外連網址原理分析」，要取得外連的檔案必須放在資料夾、且需要設定公開權限，並注意哪些檔案或形式可外連，因為 Google Drive 產生的文件不能外連。

二、安裝書籤連結

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

有幾種安裝方式：

1. 想先測試一下效果的話，可直接將上面這個連結用滑鼠拉到書籤列，按照「一、使用方式」的說明即可使用。

2. 由於程式碼裡面的 js 連結放在 WFU 的空間，而過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，改成自己的連結。

3. 改完 js 連結後，如果熟悉如何製作書籤的話，請將全部的紅色字串(含分流的 js)複製，貼到書籤的連結即可使用。

4. 如果對書籤製作不熟悉，以 Blogger 為例，可開一篇新文章，貼上所有程式碼(含分流的 js)，儲存後即可看到文章內的這個超連結。然後跟第 1 點的方法一樣，直接將超連結拖曳到書籤列即可使用。

三、補充

使用上有任何建議歡迎提出，另外需要注意的是，Google 的產品一向不斷地在更新，因此這樣的小工具說不定某天會因改版而失效，屆時讀者若發現異狀請再回報，會再來更新這個工具。

Google Drive 相關文章：

隨著範本修改次數增加、範本檔越來越肥大，從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話)，是不是會覺得開啟範本的等待時間越來越久？也難怪網頁開啟時間越來越慢。

進入主題前先回顧一下系列文前兩篇，站長要如何不盲目地修改範本、脫離單純複製貼上所衍生的麻煩與未爆彈，得先瞭解「備份及註解範本的訣竅」；想讓範本的程式碼執行有效率，得先瞭解「Javascript(簡稱 js)、CSS 的執行原理」。

接下來要談的是如何幫範本瘦身，利用各種免費的線上工具，幫 html/js/css 來縮減體積，加快網頁載入速度。不過跟人體一樣，一昧瘦身只會適得其反，均衡飲食才是健康之道。除了讓體積最小化之外，某些程式碼也得搭配格式化工具，幫助視覺上的閱讀效果、讓範本內容更加美化。

一、萬用壓縮工具﹍YUI Compressor

網路上有數不清的線上壓縮、格式化/美化工具，WFU 本文推薦的服務都是自己長久使用、測試後，經過綜合評量才介紹，也會說明推薦的原因。


用途：壓縮 JS/CSS/HTML
網址：http://ganquan.info/yui/?hl=zh-TW

推薦的原因：

中文化、介面較親切
YUI Compressor 是 Yahoo 研發的 js 壓縮演算法，壓縮比例非常棒。
js 壓縮可以處理變數中的特殊字元，而不會出現錯誤訊息
請見上圖，紅框處選擇 CSS 則可壓縮 CSS 碼。
稱他為萬用壓縮工具是因為他也可以處理 HTML 碼，一樣選擇 CSS 的模式，即可壓縮 HTML 碼。

補充說明：

壓縮 js 時記得去除首尾的 script標籤
這個工具並非我的首選，因為壓縮時會重整頁面，而非動態處理，所以速度較慢。但免費線上服務無法預期何時會倒閉，因此這個網站算是我的備用站。

二、萬用格式化/美化/排版工具﹍JsBeautifier

程式碼使用格式化工具處理後，縮排的視覺效果才適合閱讀、及利於日後修改。除了可以將壓縮後的程式碼用線上美化工具，將其恢復為原本的縮排方式，Blogger 範本中很多原本縮排不一的程式碼也可利用這樣的工具，將排版變得一致、好閱讀。


用途：格式化 JS/CSS/HTML
網址：http://jsbeautifier.org/

推薦的原因：

目前最棒的線上工具，優點很多
處理速度快、不必重新整理頁面
自訂選項很多，最棒的是這個網站能記憶你的選項，下次使用不必重新設定
WFU 常用的設定如圖中藍字註記，設定縮排為 Tab 間隔
稱他為萬用工具是因為他除了 js，也可處理 html/css
開放源碼，萬一將來網站掛了，可以使用源碼自己架設
程式碼自動上色(算是沒有實際用途的優點)

三、HTML 推薦的壓縮工具


用途：壓縮 HTML
網址：http://www.textfixer.com/html/compress-html-compression.php

推薦的原因：

速度比 "YUI Compressor" 快，不必重整頁面

四、JS 推薦的壓縮工具


用途：壓縮 JS
網址：http://javascript-minifier.com/

推薦的原因：

處理速度快、不必重新整理頁面
壓縮比例比 "YUI Compressor" 還低一些
產生的程式碼會自動選取，最友善的使用設計
提供 API，可自己架設

補充說明：

跟 "YUI Compressor" 比較起來，使用這個線上服務既節省時間、壓縮比例又更佳，因此多數情況下這個工具是首選。
但在某些特殊情況下，例如 js 變數中使用了特殊字元，這個工具會無法處理而拋出錯誤訊息，那麼這類的的 js 必須使用 "YUI Compressor" 處理。

五、CSS 推薦的壓縮/美化工具

1. 壓縮工具


用途：壓縮 CSS
網址：http://cssminifier.com/

推薦的原因：

速度比 "YUI Compressor" 快，不必重整頁面

2. 美化工具


用途：美化 CSS
網址：http://cssbeautify.com/

推薦的原因：

處理速度比 "JsBeautifier" 更快，不必按按鈕才能處理，把程式碼貼上就自動產生美化後的程式碼，最友善的使用設計。

六、使用原則

如何活用以上推薦的這些工具？

如能確定某個區段的 html/js/css 日後修改的機率不大，那麼這個區段的程式碼就全部壓縮吧，這樣網頁需要讀入的字元數就可大大減少。
如果某個區段的 html/js/css 是有可能修改的，那麼該區段最好使用格式化工具，保持程式碼的易讀性，方便日後維護。
舉例而言，如果是本站的忠實讀者，從各種安裝的 js 工具可發現，WFU 將需要修改的 js 參數都獨立出來，而其餘不必須修改的 js 碼全部壓縮，既維持了修改的彈性、又達到了瘦身的效果。

大致遵循以上原則，Blogger 範本就能既縮減體積、又保持美觀，便於日後的維護工作。「工欲善其事，必先利其器」，本篇先推薦最佳的使用工具，之後會進一步介紹技術層面上的操作細節。

修改 Blogger 範本的觀念系列文章：

(Pic from: allbloggingways.com)這個「Blogger 中文社群討論串」提到了 Google 不再更新 PageRank 的消息，而這件事 Google 很久以前便開始預告，PageRank 的數字也有很長的一段時間沒有變動，越來越少看到網站掛上 PageRank 貼紙。

為何 Google 這麼做，想瞭解原因可參考「別再用 PageRank 當評量標準」的簡單說明。不過 PageRank 的演算方式是公開的，因此 Google 不做這件事，照樣可以有其他人來做，只是演算法稍微有些變更而已。

現在起無法從 PageRank 了解網站的評等變化，那麼以後就利用本文介紹 MozRank 吧，而且這個服務提供的數據更多呢！

一、MozRank 介紹

MozRank 是由「Moz」這個著名的 SEO 網站提供的服務，網路已經有一些介紹的文章，這篇「新的網頁評判標準:判斷網頁等級mozRank」說明得非常深入，以下摘錄一些重點：

MozRank 模仿 PageRank，根據鏈接來計算頁面等級
Google 伺服器的外鏈數據大於 Moz 的伺服器，理論上 PageRank 會比 MozRank 精確。
Google 會過濾垃圾連結，所以同一個頁面，MozRank 可能會比 PagRank 高
網站被 Google 懲罰時，PageRank 會歸零，但 MozRank 不會
MozRank 在更新頻率上比較能呈現站長的努力

另外，根據 Moz 官網數據，MozRank 的更新週期是 60 天。

二、Moz 官網提供的數據指標

利用 Moz 官網提供的免費服務, 可以得到不少網站評比的數據：


工具：Open Site Explorer
用途：瞭解網站權威度、外連數量
網址：https://moz.com/researchtools/ose

進入網址後如上圖，在搜尋框輸入自己網址，按下「Search」即可得到數據：

Domain Authority：網域的權威度，滿分為 100 分(例如 "google.com" 為滿分)
Page Authority：網站所有頁面的權威度平均值，滿分為 100 分
Root Domains：所有外連來自幾個網域
Total Links：所有外連數量

以上是可免費查詢的項目，想要獲得更多深入的評比資訊必須付費，且每天有查詢次數的限制。不過一般這是 SEO 公司才會做的事，一般網站知道這些數據就夠了。

另外有兩點需要特別注意：

以裸網域為主的網站，輸入網址時不必加上 "www"，例如查詢「重灌狂人」時，應該輸入網址 "http://briian.com/" 而非 "http://www.briian.com/"
使用免費部落格平台的網站，"Domain Authority" 這項數據屬於整個部落格平台的網域，請不要誤會成自己網站的權威度暴增！例如 WFU BLOG 原始網址 "http://wayne-fu.blogspot.com/" 的 Domain Authority 數據是屬於 "blogspot.com" 這個網域。

三、批次取得 MozRank

使用官網幾次後，就會覺得有點小家子氣，大概查詢個三次就會告訴你達到本日上限。而且不知讀者有沒有發現，本文的主角「MozRank」這個取代 PageRank 的數據在哪裡呢？

很納悶的一件事對吧，不過沒關係，以下這個網站除了提供 MozRank 數據，還能一次查詢最多 10 個網站：


工具：Bulk Domain Authority & Page Authority Checker
用途：批次取得 MozRank、網站權威度、外連數量
網址：http://www.seoreviewtools.com/bulk-seomoz-authority-checker/

進入網址後如上圖，首先填入所有要查詢的網址，接著填入防止機器人的驗證數字(問題都很簡單，絕不擾民)，最後按下「Perform check」即可。

上圖為顯示的結果：

英文標題請參照「二、Moz 官網提供的數據指標」的說明
紅框部分即為 MozRank 數據，一個接近 PageRank 統計的數字

拿「電腦玩物」的網址一起並列雖然不太妥當，兩者無法相提並論，不過主要是讓讀者瞭解「資訊類型」、「不刻意操作 SEO」的龍頭部落格，統計數據大致落在什麼區間。

四、隨時查詢 MozRank

如果覺得每次都得連上網站才能查詢相關數據，是一件麻煩的事，那麼 Moz 官方提供了瀏覽器外掛 mozBar，目前有 Chrome、Firefox 版本：


工具：mozBar
用途：即時取得網頁的 MozRank 等各種統計數據、及 SEO 相關資訊
網址：http://moz.com/tools/seo-toolbar

安裝之後，只要開啟了這個套件：

瀏覽到任何網頁，都能即時顯示各種資訊
開啟頁面需要花一點時間
可顯示的資訊比前面介紹的工具多很多，適合研究 SEO 的站長使用
連 Google 搜尋畫面都能顯示個別連結的 MozRank 相關資訊

以上為簡短的介紹，需要詳細的使用說明，這篇「SEO工具mozBar」寫得十分詳細，請直接參閱即可。

對 WFU 個人而言，希望瀏覽器的執行速度越快越好，因此瀏覽器外掛除了必要的之外，能不裝就不裝，是否安裝這類的外掛請讀者再衡量自身需求了。

延伸閱讀：

(Pic from: mybloggertricks.com)過去寫了不少篇屬於優化網站效能的基礎知識，如果都曾讀過、打好基礎後，那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例，說明如何整理程式碼、讓範本最佳化，也就是能夠減少體積、執行有效率，同時又易於維護。

不過動手之前，最好先確認對 html/js/css 有基本的認識，瞭解 debug(除錯) 的方法，以免不小心操作錯誤之時，能夠還原事先的範本內容。對範本進行任何變更之前，建議先閱讀「備份範本的訣竅」系列文章，備份需要有版本控制的觀念。

一、整理 HTML

1. 提醒事項

因為很重要，所以再提醒一下，如果要動 Blogger 範本中的 HTML 內容，最好知道那部分程式碼的作用為何，段落的開頭、結尾分別在何處，建議確認已經讀過了「Blogger 範本」系列文。

本篇以下提到需要使用的所有線上工具，均請參考「活用 HTML/Javascript/CSS 格式化及壓縮工具」。

2. 壓縮 HTML

如果確定某個區塊的 HTML 永遠都不會去動他、不會修改，那麼可以將該區段壓縮，以節省網路傳輸的字元數。

可參照「Blogger 標頭區塊的程式碼」，上圖以範本中標頭區塊的一部分程式碼為例：

未壓縮前縮排使用的皆為空白字元，佔用許多位元數
如果不會去動標頭區塊的話，那麼紅框部分的英文註釋內容也不會有機會去看，可以刪除後再進行壓縮。

經以上處理後，範本中 html 碼部分可節省非常可觀的容量。

3. HTML 格式化

如果標頭部分有可能會修改，那麼進行格式化除了維持程式的可讀性，也可縮減體積。因為如前所述，Blogger 範本使用的縮排為空白字元，佔用太多體積。

上圖使用同樣區段的程式碼，經格式化工具處理後，選擇 Tab 縮排，一樣可以縮減一些體積。

而最搞剛的作法是，判斷標頭那個部分可壓縮(都不會去讀他)、那個部分格式化(有可能會修改)，達到最佳化處理。

二、整理 CSS

1. 處理外連

範本中任何一個 http 請求，也就是進行外連的動作，都會花費很多時間，如果範本中有很多 css 外連的話，建議將多個外連合併為一個。

例如安裝過「fancybox」的話，會看到類似以下的 css 檔外連：

<link href='https://googledrive.com/host/0BykclfTTti-0UENiUFpueXBHZUk/fancybox-thumb-min.css' media='screen' rel='stylesheet' type='text/css'></link>

如果是官方外連的檔案(原始的範本內容)就請不要動了，而非官方的外連檔案(自己後來新增的內容)，可用記事編輯軟體，將所有 css 檔內容合併為一個檔案，再上傳到網路空間取得外連路徑(可參考「Google Drive 檔案自行分流教學」)，如此將只會花費一個 http 請求。

2. 合併 style 標籤內容

範本中每產生一個多餘的標籤，都是浪費瀏覽器的運算時間，如果可以只花費一次的時間來產生 style標籤，那麼範本中就不需要製作 10 個 style標籤。

從「如何讓 CSS 執行有效率」我們知道 css 的內容要放在 </head>之前，讀取速度才會快。除了檢查範本、所有的小工具內容，是否都將 css 移到 </head>之前，也得檢查 style 標籤是否四散各處。如果有的話，請將所有標籤的字串內容，集中在一個標籤即可。

3. 註釋 css 區段

集中在一個 style標籤之後，衍生的問題為，如果原本個別的標籤使用各自的註釋，那麼需要特別處理這部分的問題。

例如原本四散的 css 內容可能為以下：

<!-- 下拉選單 start-->
<style>
.dropMenu {
xxxxx
}
其餘 css
</style>
<!-- 下拉選單 end-->

<!-- 浮動導覽列 start-->
<style>
.float {
xxxxx
}
其餘 css
</style>
<!-- 浮動導覽列 end-->

集中為單一個 style處理後，註釋改成以下模式即可：

<style>
/* 下拉選單 start */
.dropMenu {
xxxxx
}
其餘 css
/* 下拉選單 end */

/* 浮動導覽列 start */
.float {
xxxxx
}
其餘 css
/* 浮動導覽列 end*/
</style>

4. 壓縮 css

無論是外連 css、或範本中的 css 內容，如果確定不常修改的部分，就請利用 css 壓縮工具，來減少體積。

5. 官方 css

官方範本中 <b:skin>~</b:skin> 這個區間，建議對語法熟悉、且不會去動這部分內容的話再進行壓縮處理。上半段是 Blogger 自己的語法，屬於 HTML 的格式；下半段才是 CSS 的格式。

另一個區間 <b:template-skin>~</b:template-skin>，也是類似格式，有把握的話可進行壓縮。

三、整理 JS

1. 一般性的 js 處理

這裡所謂的一般性，是指「非 Blogger 平台」、「非 Blogger 範本之中的 js 內容」，包含了 Blogger 「側邊欄小工具的 js 內容」。處理的原則大致依循本文有關 CSS 的處理方式即可：

官方外連的 js 檔案不要動，而非官方的外連檔案，可用記事編輯軟體，將所有 js 檔內容合併為一個檔案，再上傳到網路空間，如此將只會花費一個 http 請求。
合併多個 script 標籤內容為一個 script 標籤
註釋 js 區段，但 js 註釋方式與 css 略有不同，請參考這篇「Blogger 範本 (1)各種註解方式」
js 確定不常修改的部分，利用壓縮工具來減少體積；可能修改的部分利用格式化工具處理。

2. Blogger 範本中的 js

放在 Blogger 範本中的 js，要處理是一件很複雜的事，首先必須詳讀「Blogger 範本裡為何這麼多亂碼？」，才能有基礎的概念。

Blogger 範本的內容經過系統的解析之後，有太多種字元會被轉換，對程式碼不熟的讀者，看起來就像是亂碼一般。當 js 內容加入這些編碼後，拿去餵給 js 壓縮工具就會產生錯誤訊息。

如果不是對 Blogger 範本非常熟練的使用者，我的建議會是「不要貿然對範本中的 js 進行處理」，否則遲早埋下未爆彈；如果有信心、很想對範本中的 js 最佳化的話，以下是幾個可行的方案：

自行將編碼還原，可使用這個網頁的工具「HTML unescape」。
某些編碼是不可進行還原處理的，否則 js 就會失去作用。所以請詳讀前述的參考文章，確定知道哪些可還原、哪些不可還原。

優化網站效能系列文章：

上一個版本「讓 Blogger 自動顯示系列文章」留言 #5 WHY 詢問「有時文章過長，想幫文章變更為好幾頁 ( 寫好幾篇 )，能否讓【自動顯示系列文章】的顯示結果不出現標題，而出現數字」。基本上「文章分頁」算是常見的功能，當文章內容較長，分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能，但畢竟太過火而引起讀者反感，總是得不償失，相信站長們心中自有一把尺。

在 Blogger 要做出分頁機制，並不是很好設計，需要說明的地方不少，因此把篇幅留給使用說明。建議先看上一篇 →「一、系列文的原理」瞭解設計的原理，後續內容比較能理解。

點此看範例網頁

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

文章分頁的效果大致像這樣：

系列相關文章的效果大致像這樣：

一、安裝準備動作

若曾安裝舊版程式碼，請先完整移除。在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 文章分頁 系列文 start */
#postSeries { /* 整個區塊 */
font-size: 14px;
}
.postSeries_title { /* 系列文標題 */
text-decoration: none!important;
font-weight: bold;
color: #666!important;
}
.postNav_title { /* 分頁功能 標題 */
display: inline-block;
text-decoration: none!important;
width: 20%;
text-align: right;
}
.postNav_page {
display: inline-block;
width: 70%;
}
.postNav_displayNum { /* 分頁按鈕 */
padding: 5px 12px;
margin-right: 10px;
color: #666;
background-color: #eee;
}
.postNav_current { /* 目前分頁 */
font-weight: bold;
color: #fff;
background: #359BED;
padding: 5px 12px;
margin-right: 10px;
}
/* 文章分頁 系列文 end */
</style>

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

如果對 CSS 熟悉，可自行修改 CSS 參數。

二、安裝程式碼

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

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

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

E：要使用分頁功能，請保持紅色字串 "Y"；只想使用系列文功能，可改為 "N"

F：要使用分頁功能時，文章標題必須包含 1, 2, 3, 等序號數字。如果序號要用括弧包覆，例如 (1)，那麼此處藍色字串必須填入 "()"；若不需包覆字元請維持空字串 "" 即可。

G：可自訂分頁功能的提示字串

H：在系列文模式，可設定要顯示的篇數，系統會自動以亂數挑選；若要顯示全部的系列文，此參數請設為 0。

I：系列文標示目前頁面文章的圖示，可使用 http 開頭的圖片網址

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

三、使用方式

1. 文章標題

使用分頁功能的文章，假設有四篇，這四篇必須符合以下要件：

有共同的標籤
有部分共同的文章標題字串
文章標題必須包含數字序號

2. 執行方式

這四篇文章的內容，都必須放入以下字串，通常放在文章最後面，請在 HTML 模式下編輯：

<div id="postSeries" title="填入共同標題字串"></div>

3. 文章範本

如果不想每次在文章中手動輸入以上字串，來啟動文章分頁功能，可參考「上一篇」→「三、使用系列文功能的方法」→「1. 文章範本」的方式，將字串存入文章範本。

四、使用技巧範例

1. 分頁範例功能

例如我的這篇「為健康把關的57堂課__飲食篇」心得內容太長了，必須分成兩頁的長度才適合訪客閱讀，那麼使用預設的程式碼參數，可啟用分頁功能，然後將兩篇文章的標題設定為以下：

為健康把關的57堂課__飲食篇 (1)
為健康把關的57堂課__飲食篇 (2)

然後編輯這兩篇文章，在最後面加入以下語法：

<div id="postSeries" title="為健康把關的57堂課"></div>
如此在這兩篇文章的網頁，結尾處就能自動產生分頁效果了。

點此看分頁範例

2. 相關文章+顯示固定文章數

除了使用分頁功能，經由正確的設定，也可啟用相關文章功能。例如我寫了不少 CSS 相關的文章，不過若在文末將所有 CSS 相關文章全部列出來，數量太多實在太佔版面了！

可以使用預設的程式碼參數，然後所有相關文章的標題務必包含 "CSS" 這個字串，然後編輯所有相關文章，在最後面加入以下語法：

<div id="postSeries" title="CSS">CSS 技巧相關文章：</div>
如此在所有 CSS 相關文章的網頁，都只會亂數挑選 5 篇文章來顯示。

點此看相關文章範例

3. 完整系列文功能

有些系列文章例如小說連載、遊記，是有順序性的，必須全部列出供讀者參考。不過本文這個小工具必須處理多種互斥的設定實屬不易，如果你的部落格在使用這個工具時，有部分文章必須跟預設參數不一樣時，可參考以下的處理方式。

例如我的部落格已經使用了前述兩種 "分頁" 及 "相關文章" 的狀況，現在又有個系列文「有錢人想的和你不一樣」必須在文末列出所有系列文章，目前一共 15 篇，才能讓讀者有脈絡可循，那麼務必讓所有系列文章的標題包含 "有錢人想的和你不一樣" 這個相同的字串，然後編輯所有系列文章，在最後面加入以下語法及參數設定：

<div id="postSeries" title="有錢人想的和你不一樣">相關系列文章：</div>
<script>
var postSeries = {
random: 0,
pointer : "☜"
};
</script>

重點在於 random 的參數改為 0，覆蓋掉範本中的參數，如此文末就能一次列出所有系列文了。

點此看系列文範例網頁

4. 篩選字串的技巧

利用設定語法中 title 的參數，可以有篩選出超乎想像特定相關、系列文章的可能性，這方面得靠讀者的創造力了，請參照「上一篇」→「四、注意事項」以及「五、應用方式」來瞭解各式應用方法。

五、常見 FAQ

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

更多實用工具：

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

在增進網頁效能的執行事項之中，減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解，不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow？因為它會造成 CPU 無謂的重複運算，消耗瀏覽器效能及渲染頁面的時間。

關於這件事先說結論，除非網站 Javascript(簡稱 js) 大部分是自己寫的，否則站長能做的改善有限，因為 js 寫得好不好無法由自己控制。因此如何減少 reflow，本篇著重在可以經由修改範本來改善的部分，也就是我們能 "自力救濟" 的部分。

在 Blogger 平台如果硬要打分數的話，以這個系列文來說，能完成「優化網站效能該注意哪些事? (1)最關鍵的考量因素」起碼可拿到 50 分以上，完成「 HTML / Javascript / CSS 最佳化處理」約可拿到 20 分；而本文按照教學設定正確的 css 最多可拿到 5~10 分，如能自行解決 js 可額外拿到 5~15 分，依範本中需要處理的多寡而定。

一、瀏覽器運作原理

1. 瀏覽器如何渲染網頁

要改善 reflow 現象，得從瞭解瀏覽器運作原理下手。這篇「瀏覽器渲染原理」非常值得推薦，簡短又生動地說明了網頁大致的渲染(render)流程。以下用精要的文字歸納 reflow 的定義：

當網頁任一個區塊，其尺寸或位置產生變化時，瀏覽器必須重新計算受影響的區塊(尺寸或位置)，重新安排區塊位置、重新繪製畫面的整個流程，稱為 reflow(英文字面來看，就是重新流動一次)。

當一個改變造成影響的區塊越多，可想而知瀏覽器的運算會有多累了。如前所述，非程式設計者的我們，無法自行優化 js，不過根據參考文章，我們可以自行優化 CSS 的部分：替所有圖片設定寬、高的參數。

以上為區塊變動時，reflow 行為的示意圖

當 CSS 參數改變、但區塊尺寸沒變動的話，只會進行重繪(repaint)，而不會引起 reflow。

由於原文的圖片掛了，以上兩圖取自轉貼原文的網址：http://justjavac.iteye.com/blog/644235

2. 替圖片設定尺寸

當圖片沒有設定尺寸參數時，瀏覽器在下載圖片之前，便無法知道這張圖片到底多大，所以不會為圖片保留座位。你一定有這樣的經驗：

逛網頁時，會看到文章中的文字先顯示出來，忽然間一張圖片顯示了出來，把原來的文字從圖片顯示的位置，擠到了下方去。而一篇文章中放了幾張圖片，就可能依序重複發生以上的現象。

以上就是頁面多次發生 reflow 的現象，圖片之後的內容、區塊越多，瀏覽器因為 reflow 所耗費的運算就越龐大。解決的方法現在我們已經知道，事先幫圖片用 CSS 設定好寬、高，那麼瀏覽器會先幫圖片把這個區塊的尺寸保留起來(圖片未顯示前的空白區塊)，自然就不會發生 reflow 的無謂運算了。

3. 舉一反三

瞭解原理之後，從圖片的處理我們可聯想到，其他區塊也可用同樣的方式來處理，最大程度地避免 reflow 發生。

Iframe：許多 Facebook 外掛提供了 Iframe 的形式，例如「讚按鈕」，如果把網頁所有 Iframe 都預先設定好寬、高，這些 Iframe 就不會產生 reflow。
外掛工具區塊：很多外掛工具都是用動態產生，或是一開始設定 display: none，產生內容後再取消隱藏，都會導致 reflow 的現象。如能確定尺寸的話，一開始就先把區塊 DIV 設定寬、高，或是隱藏的方式改為 visibility: hidden，都能有效減少 reflow。

4. 瀏覽器運作的原理

這部分算是補充的內容，如果想要做到完美，那麼必須精確瞭解所有瀏覽器運作的原理，才能進行針對性的效能改善。有興趣的讀者可參考這篇值得推薦的濃縮文章「瀏覽器的渲染原理簡介」，其原文來自於「瀏覽器的工作原理：新式網絡瀏覽器幕後揭秘」。

程式設計師可經由以上這兩篇文章，瞭解 js 應該如何操作，來減少 reflow 的產生。

二、圖片添加尺寸參數

接下來進入實作階段，幫圖片加上尺寸的參數算是很簡單，但又不是那麼簡單的任務。首先，要如何得知一張圖片的實際寬、高的像素值呢？

1. 取得圖片的尺寸

最簡單的方法，將圖片另存新檔 → 用看圖軟體查看尺寸。

只不過圖片數量一多，這個方法的操作步驟繁冗，不是最有效率的方式。

2. 利用開發人員工具

如果熟悉瀏覽器的操作，例如「Chrome 開發人員工具」，使用放大鏡功能，游標移到圖片區塊，就能立即得到圖片尺寸。

以 WFU BLOG 網站 logo 為例，使用此工具的放大鏡後，滑鼠移到圖片即顯示尺寸為 100 x 100 px，如下圖紅框：

3. CSS 設定

A. 單張圖片：使用行內 CSS 即可，例如網站 logo 的圖片 html 新增紅色參數如下──

<img style="width: 100px; height: 100px;" src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s100/wfublog-logo-8abeb7.png"/>

B. 多張圖片：如果有多張尺寸一樣的圖片，使用行內 CSS 比較沒效率，可在圖片 html 設定 class，這個 class 的 CSS 參數即可套用到多張圖片──

<img class="wfu_logo" src="圖片1.jpg"/>

<img class="wfu_logo" src="圖片2.jpg"/>

<style>
.wfu_logo {
width: 100px;
height: 100px;
}
</style>

以上 style區間的程式碼，請參考「如何讓 CSS 執行有效率」，放到範本中 </head>之前的位置。

三、實作技巧

看完「二、圖片添加尺寸參數」的說明後，當準備開始在自己的網站實作時，讀者應該就會發現問題來了，而且是令人頭大的問題：

舊文章的圖片數量是天文數字，處理不完。
新文章的圖片一開始可能無法知道尺寸，要得知尺寸、設定尺寸的過程，是一件很麻煩的事！

1. 處理文章中的圖片

舊文章的處理後續再提，如果是新文章中的圖片，Blogger 平台有個簡單快速的方法可以設定。

使用 Blogger 的文章編輯器 → 切換到 HTML 模式 → 上傳圖片 → 對齊方式選「無」，完畢後大致會出現以下格式的圖片 html 碼：

<a href="http://2.bp.blogspot.com/-sljaRxqJ7qY/VILpym1UCCI/AAAAAAAAKss/rLOksSgIXI4/s1600/chrome-develop-tool-img-size.png" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-sljaRxqJ7qY/VILpym1UCCI/AAAAAAAAKss/rLOksSgIXI4/s400/chrome-develop-tool-img-size.png"/></a>

接著切換到撰寫模式 → 對著上傳的圖片按下去，會出現下圖選項──

請選擇圖片想要顯示的尺寸，盡量不要選對齊方式(html會非常亂、也會有很多麻煩)，然後再切回 HTML 模式，奇妙的事發生了，以下是新的圖片 html 碼：

<a href="http://2.bp.blogspot.com/-sljaRxqJ7qY/VILpym1UCCI/AAAAAAAAKss/rLOksSgIXI4/s1600/chrome-develop-tool-img-size.png" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-sljaRxqJ7qY/VILpym1UCCI/AAAAAAAAKss/rLOksSgIXI4/s400/chrome-develop-tool-img-size.png" height="238" width="400" /></a>

請見紅字的參數，Blogger 自動幫我們依寬高比例計算、並加上了圖片尺寸，這樣的設計可以說是幫我們節省了不少麻煩。如果有任何圖片想自動設定尺寸，倒是可以藉助 Blogger 文章編輯器的這項功能！

2. 其他區塊的圖片

網站之中、文章區塊以外的圖片，尺寸通常都是固定的，例如網站 logo、社交按鈕、各種小圖示等等，這些都可經由「二、圖片添加尺寸參數」的流程及技巧，來找出圖片尺寸，並加上 CSS 參數。

3. 小工具的圖片

以「相關文章 V2」為例，可以設定固定長、寬的縮圖，所以不會引起 reflow。

而側邊欄的小工具很多都會使用圖片，例如熱門文章、最新文章、最新留言(的頭像)等等，最好也使用固定的縮圖尺寸，方便設定參數。如果懂 js 的話可自行修改程式碼，將來這幾個小工具出更新版時，也會使用固定縮圖尺寸的參數，來減少 reflow 的機會。

四、其他問題

最後剩下舊文章的圖片尺寸，由於數量龐大並不好處理，最好是能藉由 js 自動批次處理來節省操作時間。下一篇的構想將是利用 Lazy Load 來延遲圖片載入的同時，一併加上圖片尺寸的參數，算是一舉兩得，請讀者靜候。

優化網站效能系列文章：

上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」FB 留言 Herman Tsao 詢問「能做成依瀏覽器語言做自動轉換嗎?」，其實偵測訪客的瀏覽器語言設定是做得到的，我們應該有這樣的經驗，某些安裝 Google 翻譯的網站，能得知我們的預設語言，在畫面上自動顯示 "是否翻譯為 xxx 語言" 這類訊息。藉由這樣的偵測功能，就完成了本文的這個小工具升級版。

那麼讀者的問題或許會是：「那還需要這個小工具嗎，使用 Google 翻譯不就好了？」的確如此，不過 Google 翻譯用久了，就會發現以下不方便之處：

畫面上方會被 Google 翻譯強制佔用一定的高度，而破壞版面
Google 翻譯耗費的時間還滿久的

因此，如果只需要簡繁自動轉換(或切換)的話，這個小工具的切換速度可用 "光速" 來形容，比 Google 翻譯強太多了。以下先說明原理，想直接安裝請跳至「二、安裝程式碼」。

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

一、運作原理

1. js 偵測語言設定

原本認為用 js 偵測語言設定不難，搞定跨瀏覽器的語法設定就行了，例如以下程式碼：

var language = window.navigator.userLanguage || window.navigator.language;

2. 藉助伺服器端

深入瞭解後知道這不是最佳解，在這個 Stack Overflow 討論串「JavaScript for detecting browser language preference」，以上的程式碼只排第二名，原來每個瀏覽器的設計方式不一，用 js 所取得的語言設定，可能只是部分瀏覽器的系統設定值。若使用者變更了偏好的語言設定，js 並不一定能取得改變後的參數。

因此最謹慎的作法，是由 http request 的訊息之中，擷取有關語言設定的字串。但這件事使用純粹前端的 js 做不到，必須藉助第三方伺服器的輔助才行，而衍生的問題就是，使用外部伺服器的服務，必須面臨會有不穩、或流量限制的風險。

3. 解決方案

最終 WFU 採取「2. 藉助伺服器端」為主，當偵測到伺服器暫時失效時，使用「1. js 偵測語言設定」為輔，算是最佳的折衷方式。

4. 簡繁切換原理

如果需要瞭解為何這個小工具能夠快速的進行簡繁切換，請參考「相容各大瀏覽器的全網頁簡繁快速轉換語法」、「更新版」的說明。

二、安裝程式碼

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

如安裝過舊版本，請先移除原本的程式碼。接著請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

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

D：這個參數跟舊版本的意義不同，這個新版本由於會自動偵測語言設定，此處的參數只會作用在訪客預設語言 "非繁體、非簡體" 的狀況。例如一個住在美國的華人訪客，預設語言可能是英文，那麼這裡設定的參數可讓他的網頁文字以繁體或簡體顯示。

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

三、切換按鈕

安裝本文的新版小工具後，基本上就不太需要切換按鈕了。不過如果仍然想在網頁上提供訪客簡繁切換按鈕的話，一樣可按照「上一版」→「三、安裝文字按鈕」或「四、安裝圖片按鈕」的步驟來進行即可。想要先測試效果，可按下面這個按鈕：

簡繁切換

更多實用工具：

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

Facebook 與 Google 這樣的網路龍頭有著共同特色，不斷嘗試、修正錯誤，功能持續更新，因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化，已經跟當初不太一樣。雖只是約 38x20 像素的區塊，他的安裝方式、設定選項與應用方式，其實多得超乎想像。

我們從網路搜尋看到的單一安裝方式，都算是片面的用途，本篇綜合整理「讚按鈕」的完整安裝方式，讀者可從中審視自己的需求，選擇最適當的安裝方案。

首先進入 FB 讚按鈕的官網：


用途：「讚按鈕」安裝程式碼
網址：https://developers.facebook.com/docs/plugins/like-button?locale=zh_TW

如上圖，在各處選好設定後，按下「Get Code」可取得取得程式碼。

一共有四種安裝方式，為了說明方便，以下標題從後面的順序開始。

一、URL, 分享按鈕

選擇「URL」這個方案，會得到一個類似以下的網址字串：

http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.wfublog.com%2F&width=200&layout=button_count&action=recommend&show_faces=false&share=true&height=21

先說結論，這個方案屬於特殊用途，官方說明建議把這個網址用在自訂的 Iframe 之中，或是自己寫外掛工具程式時可使用這樣的網址。總之，一般用途不會選擇這個方案。

不過，網址字串有一種實用的安裝方式，例如很多人不喜歡看到 "讚"、比較偏好使用 "分享" 的字樣，那麼就可以改一下網址字串、放在「超連結 A 標籤」之中，自製這樣的圖片式分享按鈕：

<a href="http://www.facebook.com/sharer.php?u=http://www.wfublog.com/" target="_blank"><img src="http://4.bp.blogspot.com/-G6hhyoFN78c/VIwHT0yySnI/AAAAAAAAKv8/P_ZA1cIXtoQ/s1600/sharebtn.jpg"/></a>

以上藍色字串請改為自訂網址，綠色字串請改為自訂圖片網址，效果如同以下這個分享按鈕：

(圖片出處：bossfly.net)

二、IFRAME, 不用設定網址的方法

1. 特點

這個安裝方式對於多數使用者而言，如果沒有特殊需求的話，算是最推薦的一個方案：

最簡單的安裝方法，程式碼只要複製、貼上，一個步驟就完成，不會出錯
不需安裝多餘程式，與網頁其他部分的執行不會產生衝突

不過這個方案有個很大的缺點，每個讚按鈕都必須個別設定頁面的網址才能執行，一般的免費部落格、網站，想要每個頁面都產生讚按鈕，如果不會自己寫程式的話，將是一件苦差事，得不斷地重複「複製網址、貼上」這個繁冗的流程。

而好消息是，本文後面會提供所有網站適用、自動執行的程式碼，來自動產生網址字串。

2. 非 Blogger 平台安裝程式

這個程式碼適用於所有網站，首先依照文章開頭的 FB 官網，在各處選好設定後，按下「Get Code」→「Iframe」→ 複製程式碼。

<!-- FB 讚按鈕簡易安裝法 start -->
<script>
//<![CDATA[
(function () {
var iframe = '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.wfublog.com%2F&width=200&layout=button_count&action=recommend&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>',
url = "http://" + location.hostname + location.pathname,
index1 = iframe.indexOf("=http"),
index2 = iframe.indexOf("&"),
part1 = iframe.substr(0, index1 + 1),
part2 = iframe.substr(index2),
html = part1 + url + part2;
document.write(html);
} )();
//]]>
</script>
<!-- FB 讚按鈕簡易安裝法 end, Designed by WFU BLOG -->

紅色字串是 WFU 在本文開頭示範的 Iframe 設定內容，但可能跟讀者的設定值不同。因此請將以上紅色字串，置換為你從官網 Iframe 複製的程式碼，以確保這顆讚按鈕能依照你的設定值來執行。

最後將所有程式碼，貼在網頁任何想顯示的位置即可；如要出現在文章中，則每篇文章在自訂位置貼入程式碼即可(必須在 html 模式下)，以後再也不必逐一複製、貼上每篇文章的網址了。

3. Blogger 平台安裝程式

Blogger 平台由於官方已經提供文章網址的語法，因此 Iframe 的安裝變得很簡單：

可參考這篇「Blogger自訂讚按鈕」→「三、自訂讚按鈕」的步驟安裝
如果覺得 A 點的設定方式麻煩，也可直接使用「2. 非 Blogger 平台安裝程式」的程式碼。

只不過 Blogger 平台最好還是採 A 點方案，若採用 B 點會有個兩個缺點：

因為「Blogger 無預警轉換區域網址」這個事件，年代比較久遠的文章，讚統計會比較不準確(以前網址 .tw 與 .com 數據會分別計算)。
這個按鈕只能放在文章頁面。若出現在首頁、或標籤頁面，統計數據就會因為抓錯網址而出錯了。

三、XFBML

1. 特點

XFBML 與 HTML5 其實算是同性質的安裝方式，原本應該一起敘述即可，不過為了平均分配篇幅，功能的部分後面再一起說明，以下先列出兩者的差異：

XFBML 的安裝步驟最多
XFBML 目前的相容性比 HTML5 好，目前 2014 年，還有部分瀏覽器版本對 HTML5 支援性不佳
XFBML 按下讚按鈕，多了 FB 分享按鈕的功用，可進行社群分享的各種設定
HTML5 按下讚按鈕，會出現留言功能，算是分享到自己的 FB 帳號，內容只有自己能看到
FBML(facebook markup language) 是 FB自創的標記語法，但官方從 2012 年開始就逐步捨棄部分內容，因此未來的延續性讓人存疑
HTML5 遲早一統瀏覽器，因此這個安裝法的未來性較安心

2. 安裝程式碼

安裝步驟非常繁複，可直接參考這篇的圖文說明「在文章頭尾安裝『Facebook讚』按鈕 - XFBML版」。

四、HTML5

1. 功能

現在詳細說明 XFBML 與 HTML5 安裝方式的共同功能與特色：

Iframe 方案能變更的設定較少，而 XFBML 與 HTML5 可以有非常多變化
可以結合官方 API，撈取各種 FB 資料庫的數據
有程式設計能力的話，就能開發出各種周邊功能與外掛
也因為如此，不同的 FB 非官方程式之間可能會衝突、出錯，甚至某些功能會因官方 API 改版而失效

看完以上這些摘要，如果沒有這些需求，其實也不必自找麻煩，使用 Iframe 安裝法即可，輕鬆又愉快。

2. 安裝程式碼

安裝步驟非常繁複，可直接參考這篇的圖文說明「在文章頭尾安裝『Facebook讚』按鈕 - html版」。

3. 應用層面

既然使用 HTML5 或 XFBML 方案，就代表想要有跟別人不同的展現方式，或實現各種創意應用。以下列舉幾種範例：

感謝訊息：對於按讚的讀者，想要表達我們的感謝，可以監控讚按鈕，按完讚後顯示感謝文字。範例可參考這個網頁「Reward Users for liking your page」，文章最後面的 DEMO 區塊，按下讚按鈕後，會出現感謝訊息。

感謝動畫：既然能顯示文字，也可用 js 製作特效，或是擺放動畫檔。範例可參考本站，按下每篇文章尾端的讚按鈕、或 +1 按鈕。

監控讚按鈕的分享去向：如果想知道有哪些讀者按讚、分享到哪裡，可套用官方的 API，在按下讚按鈕時，讀取及收集這些 FB 數據。應用的範例為這篇「FB 留言板安裝懶人包 + 留言 email 通知」，利用監控 FB 留言板來取得留言者的身份、內容，並傳送留言 email 通知。

五、綜合要點

最後再整理一下各種安裝方式的特點，比較能一目了然。這些摘要若不易理解時，請對照以上本文的內容即可：

1. URL

可把分享按鈕做成超連結
最陽春的安裝方式，不過可自訂圖案

2. IFRAME

效果跟 XFBML、HTML5 的基本款差不多，但安裝步驟最簡單
建議勾選 "分享按鈕" 的選項，會同時出現讚按鈕與分享按鈕 → 訪客按讚可累積數據，也可按分享按鈕達到傳播效果
如果有申請 appID 的話，那麼效果跟 HTML5 一樣，按下讚按鈕會出現留言功能

3. XFBML

安裝步驟最多
目前的相容性比 HTML5 好、未來則不一定存續
一顆讚按鈕同時有 FB 分享按鈕的功用
可套用官方 API，實現各種應用

4. HTML5

安裝步驟麻煩
目前的相容性較差、未來則是網頁的統一標準
按下讚按鈕會出現留言功能
建議安裝時勾選 "分享按鈕" 的選項，會同時出現讚按鈕與分享按鈕
可套用官方 API，實現各種應用

讚按鈕可以討論的東西很廣泛，本篇先針對安裝的部分，之後會有其他相關主題的系列文章陸續發表。

Facebook 相關文章：

當網頁圖片多的時候，「影響效能的最大因素就是圖片載入」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外，更好的改善方法是讓圖片能延遲載入，先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「Lazy Load」的作用。

過去寫了一篇「Lazy Load 最佳安裝方式」，可以改善圖片載入的狀況。不過想要讓網頁效能最佳化的話，得另外解決「瀏覽器回流(reflow)」的現象──方法之一為每張圖片事先設定寬、高像素值。

當然這件事極為繁瑣，一一檢視每張圖片的尺寸、手動設定個別 CSS 參數，相信沒幾個人有這樣的耐心，同時這也是沒效率的事；而更讓人打消退堂鼓的是，網站的舊文章還有成千上萬張圖片，躺在那等著我們設定寬、高像素值呢！

好的，本篇的程式正是為了解決以上所有難題，自動幫文章中的圖片預先設定尺寸、並能執行最佳的 Lazy Load 效果。以下大致先說明原理，想直接安裝懶人包請跳至「二、準備動作」。

點此看範例網頁

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

一、新舊版 Lazy Load 及最佳化原理

1. 版本差異

目前「Lazy Load 官網」提供的 js 版本，要正常運作得將圖片的 HTML 碼改為以下格式：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
原本 img 應該是 src 屬性的位置，必須改為 "data-original" 這樣的屬性，且須手動設定圖片寬、高值。如果每張圖片都這麼搞，沒幾個人有這樣的耐性吧？

這篇「Lazy Load 最佳安裝方式」使用 Lazy Load 舊版的 js，圖片 img 的 HTML 不需做任何變更即可執行延遲載入，因此舊版的 js 比較適合懶人安裝法，本篇的程式碼依舊沿用這個版本。

2. 自動取得圖片寬高

這部分的原理是，利用 jQuery 的 on() 函數來監控 img 的 load 事件，就能取得圖片的寬高值，再設定到原本的 img 上，來避免 reflow 的發生。

3. Lazy Load 擺放位置

如同「舊版 Lazy Load 教學」的說明，網頁不需要全部圖片都 Lazy Load，最需要使用 Lazy Load 的是文章區塊的圖片。因此最佳的執行位置是「文章區塊結尾處」，而非 </body> 之前的位置。

也因為這一點，要安裝 Lazy Load 得先「找出文章區塊結尾處」這個位置。本篇教學提供 Blogger 的範例，而非 Blogger 平台的使用者，可能需學會操作「Chrome 開發人員工具」這樣的介面，來自行找出文章區塊的位置。

二、安裝準備動作

1. Blogger 平台

安裝過舊版本的話，這部分的動作可不必再做。

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/lazyload-min.js'></script>

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

第二行的 js 檔，由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來這個檔無預警失效，建議讀者有空的時候，參考以上文章連結，自行將 js 檔分流。

2. 非 Blogger 平台

說明一樣參考第 1 點，程式碼放在範本中 </head>之前的位置即可。

三、安裝程式碼

1. Blogger 平台

A. 接著在範本中先找到 <b:if cond='data:post.hasJumpLink'>這個字串，會看到類似下面「繼續閱讀」的程式碼：

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

B.
緊接在以上程式碼後面，插入以下程式碼：

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

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

F：預設讓 Lazy Load 抓文章區塊 .post-body之間的 img 標籤來進行延遲載入，而頁面其他區塊的圖片將沒有 Lazy Load 效果。(如果要設定別的區塊的圖片，那麼 E、F 行的紅色字串得改為該區塊的 class 或 id，且全部程式碼得改放到該區塊的位置之後。)

Y：除了使用藍色字串參數 "fadeIn" 的淡入特效，還可用 "slideDown" 由小圖伸展到大圖的特效，或是使用 "show" 無特效。

存檔後開一篇圖片多的文章即可看效果，或是也可參考 DEMO 網頁：

點此看範例網頁

2. 非 Blogger 平台

A. 請先找出文章區塊的 class 或 id，可利用「Chrome 開發人員工具」這樣的介面。

B. 在後台範本中找到這個區塊的結尾處，於下一行插入「1. Blogger 平台」→ B 點的程式碼，並參照程式碼行號：

E~F：紅色字串得改為文章區塊的 class 或 id。

Y：除了使用藍色字串參數 "fadeIn" 的淡入特效，還可用 "slideDown" 由小圖伸展到大圖的特效，或是使用 "show" 無特效。

四、小結

若曾使用舊版 Lazy Load 安裝程式，由於圖片寬、高事先不知道數值，瀏覽器無法為圖片保留位置，畫面在捲動之間會不斷產生 reflow、版面區塊會不斷擠壓變動，增加瀏覽器無謂的運算量。使用了本篇新版的安裝程式後，相信畫面捲動的時候，可以明顯感受到兩者的差異性，為網頁帶來更好的效能。

優化網站效能相關文章：

使用 CSS 產生的漸層效果很棒，不過這些複雜的語法參數對一般使用者而言，跟看到天書是差不多的。在這個「Blogger 中文社群討論串」 +綜合口味推薦了這個線上 CSS 漸層語法產生器「Ultimate CSS Gradient Generator」，且 +Mark X 也是愛用者。相信有了行家的背書，在眾多線上產生器之中，這會是絕佳的選擇，且 WFU 試用後也覺得效果很好、操作便利。

本篇將以上圖這個 Blogger 官方流量計數器的背景圖為例，實際操作如何藉由這個線上工具，來產生此效果的漸層背景圖。

一、為何需要使用 CSS 漸層效果

對 CSS 漸層語法不熟悉時，要自己刻出漸層效果，還不如使用影像編輯軟體(例如 PhotoShop)操作，不但效果好、熟練後速度也不慢。

不過如果你「重視網頁載入效能」的話，網站應該盡可能的減少使用圖片，尤其在行動裝置逐漸成為主流的情況下。不使用圖片除了可減少 http 請求、還可降低傳輸量，這也是使用「CSS 按鈕」能帶來的好處。

而本文介紹的線上工具，配合教學內容、操作熟練後，處理的速度可是遠勝「使用影像編輯軟體 + 上傳圖片 + 取得圖片路徑」這樣的流程。

二、參考模版(準備動作)

本篇要參考的漸層模版，是開頭秀過一次的 Blogger 官方流量統計：

這個計數器除了使用一個漸層圖片以外，其他部分都是用 CSS 做出來的效果，而這個使用的漸層圖片長得像以下這樣：

使用這個漸層圖片的麻煩之處在於，這是「CSS Sprites 圖片合併技術」的產物，我們要用到的只是四張小圖片中的最左邊那一個漸層圖案，而其寬、高值是固定的，那麼使用上彈性就受到限制，我們不容易將這個 CSS sprites 漸層圖案，套用在各種尺寸的漸層背景。

現在我們將圖片放大倍數檢視，特別注意最左邊的漸層圖案──

現在可以清楚看到上、下兩半部，各佔 50% 同樣的漸層圖案
取得漸層的起始、結束色碼，如圖中標示的 "#4D4D4D"、"#050505"

取得以上數據後，就能將此漸層圖案 CSS 化 → 代表整個計數器能完全 CSS 化 → 代表此計數器做成任何尺寸、放大縮小都不是難事了

三、操作流程

首先進入官網──


名稱：Ultimate CSS Gradient Generator
網址：http://www.colorzilla.com/gradient-editor/

畫面大致如上圖，以下根據操作的流程來介紹各個部分。

在「Preview」的部分會顯示即時效果，我們可在紅色箭頭處拉動顯示區塊的大小，不過要注意的是，這個區塊的尺寸跟產生的 CSS 語法沒有關係，只是讓我們自行想像一下背景圖的效果。

接下來可選擇要漸層的方向，本文的計數器是「由上而下」的兩段式漸層效果，因此「由上而下」需要選擇 "vertical"(垂直) 效果。

這裡是最關鍵的操作，需要先瞭解以下觀念：

上圖中央藍色漸層的長方條，上方有兩個標記、下方有四個標記。上方標記為透明度設定、下方標記為漸層標記。
一組設定需要用到兩個標記(起始值、結束值)
需要兩段式漸層，就必須有四個標記；三段式漸層，就必須有六個標記；以此類推(不需要的標記可按 delete 刪除)。
想要增加標記，在圖中自訂位置按下滑鼠即可自動產生，再用滑鼠拖曳到適合的位置。

以下為操作方法，請按圖中 A~C 的順序：

A.按下第一個標記，可進行細項設定
B. 按下這裡，可設定起始顏色(參照下一圖的畫面)
C. 可用滑鼠拖曳標記的位置，也可在此輸入漸層的起始位置百分比

接續前一圖的步驟 B，可使用各種方式調出自訂的顏色，例如圖中的色盤、HSB、RGB，或是直接填入色碼。

從「二、參考模版(準備動作)」記錄的數據，這裡我們要填入的是計數器漸層起始色碼 "#4D4D4D"。

接下來按照一樣的流程，我們繼續設定好第二個標記，填入漸層結束色碼 "#050505"，就可看到前半段的漸層效果已經產生出來了。

繼續將第三個、第四個標記設定完成，右邊就會自動產生我們需要的 CSS 碼了。

若下方的「Color Format」選擇 "hex"，CSS 中色碼的形式會跟我們以上輸入的色碼字串一致。如果習慣使用不一樣的色碼型態，請自行調整「Color Format」。

如果想保留這次的設定，上方可填入名稱後，按「Save」儲存，那麼下次進入這個網站時，可直接選擇這次的設定來使用。

四、計數器效果展示

使用「Chrome」可以偷看到 Blogger 官方計數器的 CSS 碼。將這些 CSS 整理一下，刪減為易於套用的內容、替換漸層部分的 CSS，以下為使用範例：

<style>
.gradient {
background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #4d4d4d 0%, #050505 50%, #4d4d4d 50%, #050505 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#050505), color-stop(50%,#4d4d4d), color-stop(100%,#050505)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4d4d4d 0%,#050505 50%,#4d4d4d 50%,#050505 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#050505',GradientType=0 ); /* IE6-9 */
}
.digit_no {
color: #fff;
font-family: 'Trebuchet MS';
font-size: 24px;
font-weight: bold;
width: 22px;
height: 28px;
line-height: 28px;
border: 1px solid #fff;
display: inline-block;
margin-left: -1px;
text-align: center;
position: relative;
}
.digit_no:after {
content:'';
border-bottom: 1px solid #fff;
border-top: 1px solid #000;
filter: alpha(opacity=65);
height: 0;
left: 0;
opacity: .65;
position: absolute;
top: 13px;
width: 22px;
}
</style>

<span class="digit_no gradient">7</span>

所有紅色字串就是從「CSS 漸層語法產生器」複製而來的 CSS 內容
藍字 gradient 為引用的漸層效果 class 名稱
綠字 7就是計數器內的數字

以上語法參數的呈現效果如下：

7

想要多顯示幾個數字，只要複製最後一行 HTML 語法，並改變數字即可，例如使用以下 HTML：

<span class="digit_no gradient">2</span><span class="digit_no gradient">0</span><span class="digit_no gradient">1</span><span class="digit_no gradient">5</span>

呈現效果如下：

2015

目前 WFU BLOG 網站下方使用的各種數據，就是套用這樣的計數器風格，例如「線上訪客數量」計數器：

五、後續計數器應用

實際上計數器每次產生的數字都不同，所以自然無法將計數器的 HTML 內容寫死，否則每次只能呈現一樣的數字。而要將漸層語法套用到真的計數器來使用，得另外使用 javascript，才能處理動態產生的數字，再放到 HTML 語法裡面。

關於這個主題，下一篇會說明如何用 js 將一組數字，拆成個別的單一數字，再套用計數器模組 CSS，呈現最終完整的計數器樣貌。

CSS 技巧相關文章：

首先感謝 +Mark X 製作的「聖誕節佈置懶人包」，每年節慶期間都可從倉庫中取出，重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。

原版本包含了貓咪、小朋友、及水晶聖誕音樂，由於今年想要變換一下音樂，於是徵求了 Mark 的同意。以下提供這個音樂點唱機的修改方法，可自訂音樂清單，不過如作者所提的，請注意 mp3 的版權合法性，尊重音樂著作權。

一、修改音樂盒

1. 版權問題

這個音樂點唱盒使用的格式為 mp3，在網路上搜尋時請注意該網站的使用條款，務必使用沒有爭議的聖誕音樂，注意能否公開播放，以免帶來麻煩。

2. 上傳 mp3 檔、取得外連網址

mp3 檔請先上傳到自己的網路空間，例如 Google Drive 或 Dropbox。Google Drive 的上傳與取得外連路徑，請參考「Google Drive 檔案分流教學」、「Google Drive 外連產生器」。

3. 製作播放清單

請用記事編輯軟體，製作含以下文字的檔案，附檔名為 ".xml"，例如 "xmas.xml"：

<?xml version="1.0" encoding="utf-8" ?> 
<player autoStart="random">
<song url="mp3網址"/>
</player>

綠色字串請置換為自己的 mp3 網址連結
播放清單要使用幾首歌曲，藍色字串這行就請複製幾行，並填入不同的 mp3 連結。
預設的播放方式為 "隨機播放"。
請將此 xml 檔上傳到自己的網路空間，並取得外連網址

二、音樂點唱盒程式碼

以下為整個「聖誕節佈置懶人包」套件之中，抽出來的「音樂點唱盒」程式碼：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-888555020000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=15,0,0,0" width="200" height="200" id="Xmas" align="middle">
<param name="movie" value="http://dl.dropboxusercontent.com/u/34007546/Xmas/Xmas.swf" flashvars="playlist=填入xml檔網址" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<div align="center"><embed src="http://dl.dropboxusercontent.com/u/34007546/Xmas/Xmas.swf" flashvars="playlist=填入xml檔網址" quality=high bgcolor=#ffffff  width="200" height="200" wmode="transparent" name="Xmas" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div>
</object>

以上兩組紅色字串「填入xml檔網址」請改為前面製作好的播放清單 xml 檔網址連結即可。

如果只要在網站擺放這個音樂盒的話，可將以上程式碼放在任何想要顯示的地方。以 Blogger 為例，可在後台新增「HTML/Javascript」小工具，貼上這些程式碼即可。效果類似下面這樣，按下星星就可開始隨機播放音樂：

如果想製作這個計數器風格的字樣「X'mas Jukebox」，可參考「CSS3 漸層語法產生器﹍計數器背景實作」。如果想完全複製 WFU BLOG 的音樂點唱盒，給個提示，可以檢視網頁原始碼。但提醒在先，由於檔案放在 WFU 的空間，哪天刪除、或變更了 mp3 檔，或是任何相關檔案有了變動，導致外連失效，那讀者還是得自行製作一個囉。

三、完整套件程式碼

補充說明一下原始程式碼、及本文的程式碼的相關性，原版安裝程式碼如下：

<link href="https://dl.dropbox.com/u/34007546/Xmas/Xmas.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://dl.dropbox.com/u/34007546/Xmas/Xmas.js"></script>
<script src="https://dl.dropbox.com/u/34007546/Xmas/Snow-fall.js"></script>
<script>jQuery(document).ready(function(){jQuery(document).snowfall()});</script>

以上紅色字串的內容，就是「音樂點唱盒」的程式碼，這部分置換為「二、音樂點唱盒程式碼」，就是本文的效果。

至於其他部分如何取捨、自訂，請參照原文「聖誕節佈置懶人包」的說明，或是這篇「部落格聖誕節裝飾實作」。

網頁技巧相關文章：

HTML 標籤屬性 title裡的提示訊息，在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代，訪客閱覽文章多半施展 "超速讀"，相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現。使用 javascript(簡稱 js) 處理可讓 title 訊息立即顯現(就是所謂的 tooltip 效果)，還可做出各式外框、動畫、置中等等效果，這才是友善的使用者體驗設計，就像下面這個按鈕：

滑鼠請移過來

效果還不錯吧！不過特別的是，這並非使用 js 做出來的，而是純 CSS 效果。因為在「優化網站效能」的前提下，為了減少網頁 js 的使用，嘗試將一些 js 能輕易辦到的事，看看能否轉交給 CSS 完成。

好消息是這個構想成功了，且本文的安裝方式非常簡單(傳統的 CSS tooltip 製作方法很麻煩、步驟多)，複製貼上後整個網站就能立即套用效果。以下先說明製作原理，想直接安裝請跳至「二、安裝 CSS」。

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

一、CSS tooltip 製作原理及參考資料

1. CSS 效果

這次挑戰的 CSS tooltip，從前面的範例按鈕可看出效果有這些：

tooltip 訊息外框 + 三角尖端
tooltip 移動 + 淡入淡出動畫
tooltip 位置置中

這三項效果沒有一件是簡單的，需要大量的 CSS 技巧，可說是一個很好的 CSS 組合拳範例，以下列出每個部分的參考資料來源。

2. TITLE 屬性

進入主題之前，不妨先認識一下 title屬性的特色與基本知識，請參考「自定義 Title 提示樣式」。本文原理跟這篇差不多，都是藉由處理網頁元素原本的 title 屬性，來達到懶人化的安裝，差別只在於該篇的執行媒介為 js、而本篇為 CSS。

3. 三角尖端效果

用 CSS 實現三角尖端需要特殊技巧，「toolip 訊息框 + 三角」的視覺效果 CSS 技術說明書請參考這篇「使用css實現全兼容tooltip提示框」。

4. 動畫效果

動畫效果比起靜態提示框，當然更能吸引訪客的眼球，不過 CSS3 的動畫語法，在低版本的 IE 無法支援，請讀者記住這件事，因此低階 IE 只能看到靜態畫面。

tooltip 的動畫 + 淡入淡出效果，CSS 技術層面的說明書請參考這篇「Pure CSS3 Animated Tooltip Cross Browser Tutorial」。

5. 置中演算法(Calc)

跟前面幾項比起來，這是最困難的一部分，tooltip 要能根據各種區塊的尺寸，自動計算出各種定位點(以及置中點)，這在舊的 CSS 語法是做不到的。不過 CSS3 推出的 Calc 語法，讓這件事成為了可能。

技術層面的說明書請參考這篇「CSS的神奇Calc運算」

6. 馬卡龍色碼

最後是幫 tooltip 加上漂亮的顏色，這部分參考了「開啟網頁裡的馬卡龍」提供的各式現成色碼。

二、安裝 CSS

進行安裝之前，請先確定要實現 tooltip 的網頁元素有 title 屬性及內容，否則這些 CSS 碼是沒有任何作用的，例如以下範例的紅字部分：

<a href="http://www.wfublog.com/" target="_blank" title="這裡填入提示訊息">WFU BLOG</a>

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

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

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

基本上存檔後就能看到效果了。如果想自訂參數的話，比較簡單的可直接參照綠字的說明，複雜的請參照以下程式碼行號的說明：

H、N：這兩行的藍字參數若改為 1 代表不透明。

U、AM：這兩處的色碼必須一致，可參考前面「一、CSS tooltip 製作原理及參考資料」→「6. 馬卡龍色碼」，置換別的顏色。

W：這個數字是訊息框的寬度，可自行調整，但請記住這個數字，假設此數字為 A。

X：這個數字是訊息框的內襯值，也就是文字距離邊界的寬度，假設此數字為 B。

因此訊息框的實際寬度為 A + 2B → 也就是 (130px + 5px*2 = 140px) → 假設這個數值為 C。

Y：這一行的參數計算出訊息框在置中狀態下，左邊界的值為多少。使用 "100%" 這個參數可自動取得母元素的寬度，所以 (100% - C) / 2 就能求出 left 的正確值，無論母元素比訊息框來得寬、或窄，都能正確處理。

AS：這一行的參數代表製作出底部、高度各為 10px 的三角形，假設這個值為 D。為了讓訊息框與三角形無縫接軌，最好參數設定為 D+1(多 1px)。

AN：這一行的參數計算出三角形置中時，左邊界的值為多少。使用 "50%" 這個參數可自動取得母元素的一半寬度，讓三角形座落在母元素約一半的位置。但為了要置中，三角形本身需要扣掉一半的寬度，再扣掉左邊的內襯值，再扣掉無縫接軌的 1px，所以此行的演算法應為 50% - (D/2) - B - 1。

Z：這一行的參數代表訊息框動畫的起始座標，使用 "100%" 這個參數可自動取得母元素的高度，額外加 40px 代表從這個高度往下降，可自行修改 40px 這個高度。

AP：這是三角形動畫的起始座標，想要跟訊息框一起連動的話，應該是設定為 100% + 40px - D。我設定為 50px 是私自喜歡這樣的三角形動畫效果，讀者可自行比較兩者的差異。

I、O：這兩行分別為訊息框與三角形動畫結束的座標，原理同前，可自行調整參數。

訊息框效果範例

三、補充說明

本篇的 CSS tooltip 懶人包有個明顯的缺點，不但 CSS 提示框會出現，且一秒後 title 的提示文字也會出現(只是兩者不會重疊就是了)，若使用 js 處理則可避免此現象。

另外在某些特殊狀況下，tootlip 會無法正常顯示，需要依不同狀況來調整語法，這些都是「安裝方式簡單」的懶人包後遺症。不過本篇不妨視為一個簡單的 DEMO 效果，以及 CSS 原理教學。讀者可以用最簡便的安裝方式先看到這個 CSS tooltip 效果，有了這篇的基礎概念後，系列文下一篇會仔細說明如何修改語法、參數，來達到最好的效果。

CSS tooltip 系列文章：

上一篇「 CSS 提示框懶人包實作」說明了 CSS tooltip 原理，不過懶人包畢竟無法處理各種變數，留言提出了各種異常狀況，因此本篇仔細說明不同狀態下的解決方式。

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

一、待解決狀況

使用懶人包時，大致有以下問題──

title 重複顯示：除了 tooltip 訊息框，瀏覽器也會額外顯示 title 屬性的訊息而造成重複，解決方法為「將屬性 title改為 data-title」。
版面跑掉、CSS 異常：上一篇的留言提到這兩種狀況，多半是原來的 HTML 元素使用了「CSS 偽類」而導致衝突，可針對這些特定的 HTML 元素另外設定 CSS 來解決。
圖片無法顯示 tooltip：這個 tooltip 效果是利用 CSS 偽類來產生，而圖片的 HTML 標籤 IMG 無法處理 tooltip 的偽類效果，所以若在圖片放 title 訊息，這個 CSS tooltip 會無效。解決方法為，在 IMG 外面包覆別的 HTML 標籤，把 tooltip 訊息放在母元素。
A 標籤異常：當 A 標籤的內容物過大(例如放了圖片)，會讓 tooltip 判斷區塊的高度錯誤，而導致異常現象。解決方法為，幫 A 標籤設定為區塊顯示即可。

除此之外，tooltip 的訊息「利用換行控制版面」也是必須的功能，本篇可一併處理此狀況，以下逐項說明實作方法。

二、使用 data-title 屬性 + 換行語法

1. 安裝程式碼

首先將上一篇的 CSS 碼，用記事編輯軟體將所有的 title字串置換為 data-title，或是可直接參考以下的程式碼，紅字為異動的部分：

<< 請注意！以下為會員限定內容，請先加入會員>>

按此加入會員

按此展開會員限定內容

請先加入會員

以上 CSS 碼的安裝方式請參考上一篇教學的步驟。

2. 更改範本內容

接著將範本中所有含 title屬性的 HTML 標籤，將屬性改為 data-title。例如原本的 HTML 內容如果為下：

<a href="http://www.wfublog.com/" target="_blank" title="這裡填入提示訊息">WFU BLOG</a>

請改為以下內容：

<a href="http://www.wfublog.com/" target="_blank" data-title="這裡填入提示訊息">WFU BLOG</a>

如果是 Blogger 範本，請特別注意 Blogger 有自創的語法，如果在範本中搜尋到 expr:title這樣的字串，且你也想讓其代表的訊息內容以 tooltip 效果呈現，那麼請將該字串改為 expr:data-title。

3. tooltip 換行

程式碼 AD、AE這兩行的紅字語法為新增的參數，能實現 tooltip 換行，方法為 title的訊息之中加上字串 "
" 即為換行符號。

例如本站上方的按鈕「本站Hack及工具」，原本的 title 訊息為 "本站使用的 Blogger Hack 及小工具"，效果如下面這個按鈕，請將滑鼠移到按鈕之上：

本站Hack及工具

斷行的效果看起來不太好，於是我們將 title 訊息改為 "本站使用的 Blogger Hack 
及小工具"，效果如下，這樣看起來好多了：

本站Hack及工具

三、版面異常

前面提過，這個 tooltip 的原理是利用 CSS 偽類來產生，使用了 :before以及 :after，並利用了 position: absolute 來位移。因此，如果套用 tooltip 的 HTML 標籤，若也使用了上述相關 CSS 語法，那麼就可能造成版面位移、顯示異常等等各種情形，總之就是語法參數互相打架了。

如果對 CSS 語法不熟、不瞭解怎麼修改的話的話，簡單的方法就是這些 HTML 標籤不要使用 tooltip，把 data-title 的屬性移除。

如果對 CSS 有信心的話，除了自行進行細調參數之外，也可試著在原來的 HTML 標籤外面在包覆一層 HTML 標籤，例如 span，然後把 data-title 屬性附在這個 span 上，這樣應可避免 CSS 語法的衝突。

四、A 標籤異常狀態

直接舉例說明比較清楚，例如本站底部有一些社交分享相關的按鈕，在沒有更改參數的情況下，tooltip 效果是這樣的，請將滑鼠移到按鈕上：

很明顯 tooltip 的高度判斷出了問題對吧？因為 A 標籤的 display 預設為 inline(行內) ，區塊的高度就是行高(line-height)而已。若 A 標籤裡面放了圖片，且圖片超出行高，而 tooltip 仍會抓 A 標籤的行高值，那就會出現上面這些按鈕的異狀了；另外就是，A 標籤沒設定寬度時，tootltip 的置中值一樣可能抓得不準確，三角尖端可能會偏右。

瞭解問題後就容易解決了，將 A 標籤的 CSS 設定為 "display: inline-block; width: ??px;"(?? 填入圖片的寬度)，效果如下，tooltip 瞬間恢復正常了：

五、圖片無法顯示 tooltip

解決的原理如前所述，可以在 img 標籤外面包覆一個 HTML 標籤，例如 span，然後將 tooltip 訊息移往 span標籤，並且同「四、A 標籤異常狀態」一樣設定為 inline-block，以下直接來看實例。

以下語法使用了 data-title，但無法出現 tooltip 訊息：

<img data-title="歡迎來到 WFU BLOG" src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s100/wfublog-logo-8abeb7.png"/>

改為以下語法即可：

<span style="display: inline-block;" data-title="歡迎來到 WFU BLOG"><img src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/1200/wfublog-logo-8abeb7.png"/></span>

效果如下圖，請將滑鼠移到圖上：

六、其他主題

以上大致列出目前已知的問題及解決方法，另外 +Ken CHEN 於「留言板」#21 詢問 "文字提示可以顯示圖片嗎？"。在 tooltip 放圖片是辦得到的，只是設定上比本篇更為麻煩，不過或許可以成為一個很好的應用，因此將另闢一篇專文討論。

CSS tooltip 系列文章：

上次從「元大銀行領取西聯匯款」時，得知大眾銀行很快就會開放「網路領取西聯匯款」，便決定下次要改循此管道，將來不必再跑銀行。

這次有機會再領取 Adsense，果然前陣子大眾銀行已經開通此功能，因此很高興地前往附近的大眾銀行開戶。不過本篇的內容並非介紹開戶與領款的流程，網路已經有多篇教學。這裡要分享的心得，除了在大眾銀行碰到的、需要注意的地方，主要是如何操作大眾的網路銀行，讓 Adsense 款項能夠轉換為最多的新台幣。內容不屬於 Step by Step 的教學，比較偏向簡單的理財概念。

一、Adsense 如何領取最多的金額

先說結論，目前最方便、且能領到最多金額的管道，只有大眾銀行。其他三家承辦西聯匯款的銀行「京城、元大、台新」都不具備所有條件，有的不支援網路、有的不能美金轉台幣，因此請務必到大眾銀行開戶。若離住家遠一點也建議撥空處理，因為這是一勞永逸的事。

將 Adsense 美金匯款轉換為最多新台幣的必要條件為，同時擁有外幣帳戶與台幣帳戶，如此匯率不佳時，美金可先在外幣帳戶停泊，等待時機再轉為台幣。而若申請網路銀行，操作上當然更為便利，不必為了這件事而跑銀行。

開戶(含外幣)及領款的流程可參考這篇「大眾網路銀行領 Google AdSense 西聯匯款」的說明，Step by Step 圖文內容很詳細，照著做即可。基本流程瞭解後，再接續以下本文的內容。

二、銀行相關作業

這次的過程遇到一些狀況，與銀行的作業有關，若讀者有類似狀況可參考。

1. 辦事流程

這次開完戶後出了兩個狀況：

第一個是拿剛出爐的金融卡到提款機換密碼時，怎麼操作都出問題。後來再進銀行詢問時，行員告訴我剛剛連線資料還沒開通，等會兒再試即可。
第二個是幾小時後，上網測試網路銀行功能，點選「西聯匯款」功能時，竟然畫面顯示沒開通此功能 → 打客服電話，客服人員告知會詢問分行怎麼回事 → 後來客服回電說今天業務比較多，晚點就可開通了。

我的猜測是，今天開戶的時間感覺沒有過去的經驗來得久，算是比較快就結束了，也許大眾銀行的作業流程是，把內部作業的部分抽出來延後做，如此可以縮短客戶在櫃臺等待的時間，也算是「友善體驗的設計」，而後遺症就是某些功能開通的時間會延後。如果你也碰到以上類似情形的話，同樣可打免費客服電話，就不必再跑一次銀行了。

2. 台幣外幣互轉

我有事先告知行員，需要開通台幣、外幣帳戶成為約定帳戶互轉的功能。不過也許沒跟行員講，行員也會詢問這件事吧？否則外幣帳戶就白開了。

需要注意的是，台幣、外幣成為約定帳戶後，外幣卻是無法經由約定轉帳的功能轉成台幣，這一點操作上很不直覺，後面網路銀行的操作會詳細說明。

3. 外幣帳戶啟用

新開立的外幣帳戶，隔天才能使用，所以若想當天將 Adsense 美金收益換成新台幣的話，將無法領到最多的金額，只能損失手續費來領現金。

使用網路銀行「加開外幣帳戶」功能可看到，劃紅線的部分提示，外幣帳戶隔日生效。

4. Email 通知

開戶可填入 email，那麼網路銀行的操作，例如西聯匯款的紀錄，便會自動寄到我們 email 信箱。不過我填的是 Gmail，由於擋垃圾信的功能太強大，導致一直沒看到大眾銀行的 email，後來才發現躺在垃圾信箱，所以第一次操作完後，記得到 Gmail 垃圾信箱找找。

三、如何獲得最佳匯率

1. 匯款收據

從大眾的網路銀行 →「西聯匯款」→「西聯匯入服務」，可以順利將 Adsense 款項轉入外幣帳戶，而不損失任何手續費、匯率。完成後會得到一份水單，可存成 PDF 檔，內容大致如下圖：

匯入外幣帳戶的金額為 USD 105.15
請特別注意匯率 31.5080 這一欄的數字，將自己的數字記下來。
折合新台幣的金額 NT. 3313 代表，如果我們現在立刻用 31.508 這個匯率兌換的話，可得到這個金額 → 但事實上這是比較差的匯率。

2. 即時匯率資訊


網站：大眾銀行即時匯率
網址：http://www.tcbank.com.tw/tw/ExchangeRate/Current

看完水單後，請立刻進入以上的網址，查看大眾銀行的即時匯率。

水單上面的匯率 31.5080 代表「國際快捷匯款」的匯率，比起即期的匯率 31.6880 少了 0.18。
如果我們臨櫃把 Adsense 匯款換成台幣的話，用的就是 31.5080 這個匯率
如果從外幣帳戶換成台幣的話，用的就是 31.6880 這個匯率
0.18 大致就是櫃臺人員的處理手續費了。如果只有 USD 100，那麼這就是小錢(約 NT. 18)，而如果是 USD 1,000、USD 10,000，這就變成大數目了。

3. 何時可換匯

如前所提，外幣帳戶必須開戶隔日才能運作，因此當日進入網銀若無法換匯、找不到選項請不要慌張，這是正常現象，請隔日再上網銀處理即可。

除此之外，能抓對時機換匯也要一定的功力，需對國際情勢、外匯走勢進行研判。目前國際油價腰斬後大致趨於平穩，台幣也重貶了一大段，是個可以換匯的時間點。

如果當下判斷不適合換匯，認為將來有較佳的換匯時機點，那麼可以將資金停泊在外幣帳戶，視金額多寡進行定存。

4. 外幣利率


網站：大眾銀行外幣存款利率
網址：http://www.tcbank.com.tw/tw/InterestRate/DepositForeignCurrency

請見以上網址，有美元活期存款及定期存款的利率。美元定存的利率比台幣差很多，而活存利率跟 0 其實是差不多的，只能說是比沒有好。

不過要計息也是有一定的限制：

活存要至少 USD 100 才開始計息
定存要至少 USD 1000 才能申請

以上資訊可由這個網址連結「大眾銀行外幣存款」查詢。

四、網路銀行操作注意事項


網站：大眾銀行網路銀行
網址：https://ibank.tcbank.com.tw/zh/index.aspx

1. 約定帳戶設定

大眾的網路銀行這一點做得比其他銀行棒很多，要設定任何約定轉帳的帳戶，都可隨時由網路銀行新增，其他大部分的銀行都必須臨櫃才能辦理。

不過大眾的台幣、外幣帳戶互為約定轉帳帳戶的功能，不能由網路銀行設定，會找不到選項，必須臨櫃開通才行。

2. 美金轉台幣操作

當初告知行員需要台幣、外幣互轉的功能後，他說之後網路銀行有一個畫面要特別提醒我。結果後來剛好有位男士抱著筆電來找這個行員，原來他在網路銀行找半天，就是找不到外幣帳戶轉台幣帳戶的功能。

如上圖，很直覺的，在「台、外幣轉帳」的選單，轉出帳號選擇外幣帳戶後，雖然已經設定了台幣帳戶為約定帳戶，但這裡只會顯示「您尚未設定約定帳號」，所以無法將美金轉為台幣。

於是行員順便請我過去他的筆電一起看畫面，原來必須在網路銀行 →「外匯服務」→「換匯」，這裡才能從外幣帳戶轉到台幣帳戶。看來這是網路銀行設計上不夠直覺的一點，導致很多人會詢問這個問題。

上圖還有一點需要注意，紅線部分的匯率 31.685 最好確認一下，如前面說明匯率時曾提及的，最好進入大眾銀行匯率的網頁檢查一下──

如上圖，確定 31.685 這個數字是出現在上面紅框的美元即期匯率，而不是下方紅線「國際快捷匯款」的匯率 31.505，那就沒問題可以轉成台幣了。

這裡有個小插曲，眼尖的讀者或許有發現，前面「換匯」的那張圖片，明明戶頭裡面的金額是 USD 105.15，可是我「換匯外幣金額」那裡竟然打成 USD 101.15，漏了 4 塊錢沒有轉成台幣...

結果就發生了這個烏龍，剩下的 USD 4 是不能換成台幣的，因為最低要 USD 100 才能換匯...XD

3. 西聯匯款交易時間

另外這一點也是需要注意的，網路銀行西聯匯款只能在銀行營業時間才能進行──

大致是星期一 ~ 星期五的早上 9 點到下午 3:30，否則就會出現上圖畫面了。

Google Adsense 相關文章：

由於 WFU 住台北，假日不想跑太遠時，會選擇在大台北地區逛逛、健行等等。拜旅遊類優質部落格眾多之賜，只要挑選幾個內容豐富、經常更新的指標性網站來訂閱文章，就不太需要煩惱到時跟家人的旅遊去處、或是有沒有新的熱門景點出現。

不過身處大數據(Big Data)的時代，資料篩選是一門學問；而爆多的部落格旅遊文章，有沒有辦法只看我需要的旅遊區域，例如本文的主題「大台北範圍」呢？使用「RSS 閱讀器」可訂閱網站的所有最新文章，但是大部分的部落格主題多元，自行從 RSS 閱讀器篩選資訊也是要花時間的，如果能夠直接訂閱網站特定標籤主題的文章，就能大大節省我們的時間。

以本文的主題為例，最好是能直接訂閱旅遊部落格中，標籤為「大台北相關」的文章。下面將以台灣部落格市佔率最高的痞客邦平台、及 Blogger 平台進行教學說明，並附上個人收集的「大台北旅遊」部分部落格供參考，進行 RSS 或 Feedly 訂閱。

一、Pixnet 及 Blogger 訂閱標籤 feed 網址

在網路世代，能夠活用各種數位雲端工具，可節省非常多時間。過去出門旅遊前，我們可能要拼命 Google 做功課；而學會本篇的技巧後，景點資訊將可分門別類、自動送到我們手上。

1. 使用 RSS 閱讀器

如果對 RSS 閱讀器不熟悉、沒有概念的讀者，可試著使用市佔率最高的 Feedly，並參考這篇的教學「Feedly 超好用 RSS 閱讀器」。

2. Blogger 訂閱特定標籤文章

Blogger 要做到這件事比較簡單，官方已經提供了「教學說明」。以 WFU BLOG 為例：


WFU BLOG 網址：http://www.wfublog.com/
網站 RSS feed 網址：http://www.wfublog.com/feeds/posts/default

特定標籤網址：http://www.wfublog.com/search/label/電腦- 部落格相關-網頁技巧
標籤 RSS feed：http://www.wfublog.com/feeds/posts/default/-/電腦- 部落格相關-網頁技巧

從以上網址字串的規則變化，可以很容易瞭解 Blogger 平台如何取得各種 RSS 網址字串來訂閱。

如果想追蹤「電腦-部落格相關-網頁技巧」這個標籤的最新文章，使用 RSS 閱讀器來訂閱對應的標籤 RSS feed 網址即可。

3. 痞客邦訂閱特定標籤文章

痞客邦要做到這件事稍微麻煩一點，因為 google 不到官方文件及相關文章。自己動手研究了一下，查出各種網址的規律如下：


痞客邦網址：http://網站名稱字串.pixnet.net/blog
RSS feed 網址：http://feed.pixnet.net/blog/posts/atom/網站名稱字串

特定標籤網址：http://網站名稱字串.pixnet.net/blog/category/標籤編號
標籤 RSS feed：http://feed.pixnet.net/blog/posts/atom/網站名稱字串/category/標籤編號

或許讀者對以上字串、編號會看得一頭霧水，不過沒關係，後面我們用實例來說明馬上就瞭解了。

二、訂閱痞客邦旅遊網站特定標籤

以下提供一些痞客邦旅遊部落格的口袋名單，可以訂閱大台北相關的旅遊文章，吃喝玩樂的去處可不必再傷腦筋。

列出的相關標籤只是針對本文的主題「大台北旅遊相關」，當然讀者可以逛逛網站其他標籤的文章，選擇想要自己需要的部分來訂閱。

1. Clare的生活品味


痞客邦網址：http://l50740.pixnet.net/blog/
RSS feed 網址：http://feed.pixnet.net/blog/posts/atom/l50740

特定標籤網址：http://l50740.pixnet.net/blog/category/1920835
標籤 RSS feed：http://feed.pixnet.net/blog/posts/atom/l50740/category/1920835

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://feed.pixnet.net/blog/posts/atom/l50740/category/1920835

以上「特定標籤網址」是該網站 "台北、新北" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

2. 【藥師吉米】


痞客邦網址：http://drugs.pixnet.net/blog/
RSS feed 網址：http://feed.pixnet.net/blog/posts/atom/drugs

特定標籤網址：http://drugs.pixnet.net/blog/category/1610554
標籤 RSS feed：http://feed.pixnet.net/blog/posts/atom/drugs/category/1610554

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://feed.pixnet.net/blog/posts/atom/drugs/category/1610554

以上「特定標籤網址」是該網站 "台北旅遊" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

3. 蓉蓉牽手☜ㄩˇ你環遊世界


痞客邦網址：http://s045488.pixnet.net/blog/
RSS feed 網址：http://feed.pixnet.net/blog/posts/atom/s045488

特定標籤網址：http://s045488.pixnet.net/blog/category/1066933
標籤 RSS feed：http://feed.pixnet.net/blog/posts/atom/s045488/category/1066933

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://feed.pixnet.net/blog/posts/atom/s045488/category/1066933

以上「特定標籤網址」是該網站 "吃喝玩樂✭台北" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

4. ★小環妞♥♡幸福足跡★


痞客邦網址：http://wkitty.pixnet.net/blog/
RSS feed 網址：http://feed.pixnet.net/blog/posts/atom/wkitty

特定標籤網址：http://wkitty.pixnet.net/blog/category/1550200
標籤 RSS feed：http://feed.pixnet.net/blog/posts/atom/wkitty/category/1550200

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://feed.pixnet.net/blog/posts/atom/wkitty/category/1550200

以上「特定標籤網址」是該網站 "玩♡台北" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

三、訂閱 Blogger 旅遊網站特定標籤

1. 小兔小安旅遊札記


Blogger 網址：http://kgs710522.blogspot.com/
RSS feed 網址：http://kgs710522.blogspot.com/feeds/posts/default

特定標籤網址：http://kgs710522.blogspot.com/search/label/台北
標籤 RSS feed：http://kgs710522.blogspot.com/feeds/posts/default/-/台北

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://kgs710522.blogspot.com/feeds/posts/default/-/台北

以上「特定標籤網址」是該網站 "台北" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

2. 小米Livia 寫意輕旅行


Blogger 網址：http://www.liviatravel.com
RSS feed 網址：http://www.liviatravel.com/feeds/posts/default

特定標籤網址：http://www.liviatravel.com/search/label/台北景點
標籤 RSS feed：http://www.liviatravel.com/feeds/posts/default/-/台北景點

Feedly 訂閱網址：http://cloud.feedly.com/#subscription/feed/http://www.liviatravel.com/feeds/posts/default/-/台北景點

以上「特定標籤網址」是該網站 "台北景點" 這個標籤的網址，為了方便讀者，「Feedly 訂閱網址」後面的超連結，按下後可直接前往 Feedly 訂閱該標籤的頁面。

四、補充說明

1. 網址編碼字元

複製網址字串時，如果有中文則會被編碼成看不懂的字串，不熟悉此現象的話可能會以為自己操作錯誤，不過不用擔心這個現象。下面同樣以旅遊部落格為例，「艾莉莎愛分享」由於使用了「樹狀標籤」，編碼後的字串可能更會引起恐慌：


Blogger 網址：http://alisha0110.blogspot.com/
RSS feed 網址：http://alisha0110.blogspot.com//feeds/posts/default

特定標籤網址：http://alisha0110.blogspot.tw/search/label/美食-依地區分類-旅行中的美食
標籤 RSS feed：http://alisha0110.blogspot.com/feeds/posts/default/-/美食-依地區分類-旅行中的美食

雖然以上的網址字串都能看到中文，但實際上如果從部落格的標籤，直接按右鍵複製連結再貼到網址列時，可能會看到這樣的編碼字串：

http://alisha0110.blogspot.tw/search/label/%E7%BE%8E%E9%A3%9F-%E4%BE%9D%E5%9C%B0%E5%8D%80%E5%88%86%E9%A1%9E-%E6%97%85%E8%A1%8C%E4%B8%AD%E7%9A%84%E7%BE%8E%E9%A3%9F

以上的連結字串，跟 "http://alisha0110.blogspot.tw/search/label/美食-依地區分類-旅行中的美食" 的效果是一模一樣的，因此可不必擔心。

2. 延伸應用

本文雖以旅遊為例，但這個技巧可以應用在所有的部落格。例如知名的「電腦玩物」部落格，若不需要訂閱整個網站的文章時，假設只想追蹤 Google Chrome 相關的套件、或只對 app 有興趣，那麼就可訂閱個別的標籤。


特定標籤網址：http://www.playpcesor.com/search/label/google%20chrome
標籤 RSS feed：http://www.playpcesor.com/feeds/posts/default/-/google%20chrome

以上就是只訂閱「電腦玩物」網站之中 "google chrome" 這個標籤的例子。

3. 將旅遊資訊分門別類

本篇舉例了大台北地區的旅遊資訊，如果你想自己製作一個「台灣旅遊最新資訊自動彙整通知」這樣的系統，那麼可以分別蒐集中部、南部、東部等寫得比較好的部落格，在 Feedly 分別設置目錄：

如上圖，我製作了「大台北」這個目錄，將相關的部落格標籤 RSS feed 丟到這個目錄之中即可。

將來要出門旅遊前，翻一下 RSS 閱讀器，立即就能知道最新的熱門旅遊景點有哪些，隨時有旅遊達人替我們更新這些資訊，不必辛苦地四處 google、打探消息了。

Feedly 相關文章：