2013年3月1日 星期五

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

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

Wayne Fu 0 A+

(Pic from: refurbishnotebook.blogspot.com)
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 搜尋引擎收錄,就會搜尋不到。



二、安裝「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 自訂搜尋相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP