[教學]取代 Blogger 搜尋小工具__新版「Google 自訂搜尋」

2016.1.8 公告：使用「Google 自訂搜尋」若覺得載入速度比較慢，可安裝這個「Blogger 最強搜尋框工具」。

最近使用 Blogger 官方的「搜尋框」小工具時，忽然發現所有的字串搜尋都顯示 "沒有結果"！於是逛了一下別的 Blogger，竟然不少網站有相同的現象。雖然不知道是什麼原因，不過既然非單一事件，那應該是 Google 的問題了。

在網路上尋找合適的替代方案，結果發現「Google 自訂搜尋」最近更新了介面、且發佈了新版安裝碼，一用之下太滿意了，當場決定換掉原本使用的 Blogger 官方小工具。簡單歸納一下「新版 Google 自訂搜尋」的優點：

1. 動態載入安裝碼 執行速度快
2. 可選擇類似「燈箱」(lightbox)的顯示效果
3. 可與 Google Adsense 連結 增加廣告收益
4. 可自訂版面顏色配置
5. 搜尋結果可顯示縮圖

以下先比較一下 Blogger 各種搜尋方案的優缺點，若想直接安裝請跳到「二、安裝 Google 自訂搜尋」，想要測試這個搜尋框的效果，請前往展示頁面：

點此看範例網頁

一、Blogger 各種搜尋方案比較

1. 導覽列搜尋框：如果沒有把 Blogger 官方導覽列隱藏起來的話，那麼可以在網頁最上方看到這個搜尋框。

• 優點：真正的站內搜尋工具，保證可以搜尋到部落格每一篇文章的內容。

• 缺點：每次搜尋都需要重整頁面，執行速度極慢。

• 補充：可參考「增加站內的全文搜尋」這篇文章，就能在網頁中的任何地方擺放這個搜尋框，接著可把官方導覽列隱藏起來。

2. Blogger 搜尋框小工具：可在 Blogger 後台安裝小工具時選「搜尋框」來安裝。

• 優點：使用動態載入，顯示結果速度快，不用重整頁面。

• 缺點：其搜尋資料庫其實就是「Google 網誌搜尋」，這個資料庫不是很好，因為年代比較久遠的文章通常沒被收錄，所以經常搜尋不到；另外，其搜尋結果無縮圖。

• 補充：如本文開頭所提，本站的文章經由這個小工具，已經完全搜尋不到任何內容了。

3. Google 自訂搜尋：本文介紹的工具。

• 優點：如本文開頭所述。

• 缺點：其搜尋資料庫為「Google 搜尋引擎」，萬一網站某些文章沒被 Google 搜尋引擎收錄，就會搜尋不到。

• 補充：請參考這篇文章「Blogger 提供新的網站地圖(sitemap)格式﹍一勞永逸的提交方法」，把網站地圖提交給 Google 網站管理員工具後，就能確保文章被 Google 收錄了。

二、安裝「Google 自訂搜尋」

1. 首先登入自己的 Google 帳號，然後進入「Google 自訂搜尋」的首頁：

http://www.google.com/cse/



如上圖，按下「建立自訂搜尋引擎」。


2. 按下圖 A～C 的順序──



A：輸入自己部落格的網址
B：選擇語言
C：按下「建立」

2013.3.12 補充

根據這個「Blogger中文社群討論串」，輸入 Blogger 網址時請勿輸入轉址後的網址，也就是不要輸入 "xxx.blogspot.tw" 這樣的網址，要輸入 "xxx.blogspot.com" 這樣的網址，以免遇上發文者的情況──永遠只有一筆搜尋結果。


3. 按照下圖字母順序──



按「設定」→「基本資訊」→ 輸入要顯示的名稱

D：由於免費版會在搜尋結果加入廣告，如果是公司行號的話，可以有付費方案，能夠選擇不放廣告，也能有其他更進階的選項。

免費版若想要在搜尋結果不出現廣告，請參考下一篇的各種設定方式。

E：如果是圖片為主的部落格，可以在這裡開啟圖片搜尋的選項。

F：這裡是新版介面的貼心設計，隨時能在這個區塊測試搜尋結果。


4. 如果沒有「Google Adsense」帳號的話，這個設定可以先跳過；不過廣告相關的主題，仍將整理在下一篇一起說明──




5. 如下圖，按下「外觀和風格」→「版面配置」──



這次「新版 Google 自訂搜尋」增加了第一個選項「重疊」，這便是開頭所提的「燈箱」(lightbox)效果，也是我最喜歡的顯示方式，速度快又美觀。

如果想選用其他效果，這次的介面改得非常友善，所有的安裝步驟說明的非常仔細，只要按下「儲存並取得程式碼」，就會有對應的詳解。


6. 接續上個步驟，按下「儲存並取得程式碼」後，出現以下畫面──



按照網頁上的中文敘述，安裝到自己的後台範本中即可。不過，推薦一個最簡單的安裝方式，就是在 Blogger 後台新增一個「HTML/Javascript」小工具，把圖中紅框的程式碼複製過去，再把小工具拉到版面想顯示的位置即可。

如果安裝到 Blogger 範本中有疑問，新版介面還很貼心地準備了右上角紅框的「檢視 HTML 範例」，按下就有說明。


7. 如果想要調整版面配置的話，如下圖依序按下「外觀和風格」→「主題」──



選擇了任一種樣式之後，右方的搜尋框會立即顯示效果，因此可以一一嘗試各種主題樣式。

另外，也可選擇「主題」右邊的「自訂」，有更多的版面細項設定。

待版面細項都決定後，按下方的「儲存」即可，不必選擇「儲存並取得程式碼」，因為這些版面設定是儲存在雲端的 Google 帳號資料庫，而非放置在安裝程式碼中。


8. 如果搜尋結果不想出現文章縮圖的話，可以在下圖的「外觀和風格」→「縮圖」來關閉；不過這麼優的功能應該不太會關掉吧～




9. 如果想讓介面更中文化一些，可以到下圖的「搜尋功能」→「進階」──




分別按下上圖中的「Relevance」、「Date」字串來進行修改──




分別將「Relevance」改成「相關性」(或自訂字串)、將「Date」改成「日期」，並按下「儲存」。結果將如下圖──



以上的操作過程，只針對將 Blogger 的搜尋小工具置換成「Google 自訂搜尋」的必要步驟。其實「Google 自訂搜尋」還有一些其他的強大功能，如果對於這個工具有其他的需求，那麼可以嘗試一下各種選項，開發出更強大的應用。



三、搜尋效果畫面

將「Google 自訂搜尋」安裝到部落格後，來試試看效果。一般而言，站內搜尋的字串通常不會是熱門的關鍵字，那麼是不太會出現廣告的。

假設在本站搜尋「推文」這個字串，可看到以下的燈箱搜尋效果──



1. 右上角排序的方式出現了自訂的中文字串。

2. 文章若有圖片則會顯示縮圖，效果很好。

3. 這次的搜尋字串非熱門關鍵字，搜尋結果沒有出現廣告；不過仍會有出現廣告的機率。


假設在本站搜尋「三國志」，可看到以下的燈箱搜尋效果──



由於「三國志」這個關鍵字太熱門，"鐵定" 會出現對應字串的廣告。在這樣的情況下，訪客若點擊了廣告，收益將歸 Google 所有。

俗話說「肥水不落外人田」，與其這樣，這種收益還不如自己賺；只要有 Google Adsense 帳號，此時的收益便可歸自己所有。

由於篇幅的關係，「Google 自訂搜尋」廣告相關的主題待下篇敘述，同時也提供不顯示廣告的操作心得。

Google 自訂搜尋相關文章：