2014年6月26日

Google 自訂搜尋改良版__兩欄式更方便 (Blogger 專用)

A+
在部落格設置搜尋框功能時,最佳選擇一定是「Google 自訂搜尋」。為何 Blogger 官方搜尋小工具不建議使用,原因在「新版 Google 自訂搜尋」有詳述,最主要的因素為,這個官方工具並非使用 Google 搜尋引擎,導致搜尋結果不佳。

不過 Blogger 官方搜尋小工具有個優點:「搜尋結果能立即出現在文章區塊上方」,這對訪客來說是個非常友善的操作設計,而這正是 Google 自訂搜尋很難做到的一點。

如果你也喜歡這個優點的話,WFU 已將 Google 自訂搜尋(以下簡稱 CSE: custom search engine)改良,讓搜尋結果能有 Blogger 官方搜尋工具的顯示效果,可使用本站側邊欄最上方的搜尋框測試。

以下先大致說明此設計的概念,想直接安裝請跳「二、Google 自訂搜尋準備動作」。



一、設計概念


1. CSE 效果不佳

其實很久以前就想要利用 CSE 來達成官方搜尋工具的顯示效果,因為 CSE 的「重疊」顯示雖然效果不錯,只是使用 "特效" 難免執行速度稍慢一些;另外操作上有點類似燈箱(light box),後來不太習慣操作燈箱的獨立區塊時,無法同時操作底層的區塊(例如選取、複製、貼上)。雖然 CSE 提供了「兩個欄位」的顯示方式,但是要在 Blogger 環境實現不容易。

若是要將搜尋結果區塊硬放在文章區塊上方,一來範本中不容易找到適合的位置,一來頁面效果不好,文章區塊上方會多出一塊難看的空白。


2. 利用 CSE API

因為有了上一篇「404 錯誤頁面的友善設計」的經驗,對於 CSE API 操作比較熟悉,要達成本篇的任務就有了突破點。

當訪客使用 CSE 搜尋後,在文章區塊上方動態做出一個區塊,來顯示搜尋結果,這樣就不會有個空白區塊在那邊。




然後跟 Blogger 官方搜尋工具一樣,如上圖,在搜尋結果區塊的右上角,製作一個可以關閉區塊的打叉圖示,如此這個 CSE 改良版,就跟官方搜尋工具的操作、顯示方式、顯示速度一樣好,但是另外擁有最佳的搜尋結果。



二、Google 自訂搜尋準備動作


1. 未安裝過 CSE:請依照「安裝 Google 自訂搜尋」的流程,來申請安裝 CSE,並注意下圖──



在「外觀和風格」→「版面配置」→ 請選擇「兩個欄位」→ 按下「儲存」


2. 已安裝過 CSE:不需要重新安裝 CSE,不過請依照上圖的流程,一樣選擇「兩個欄位」後儲存。


3. 取得 CSE 搜尋引擎 ID:如下圖的畫面,可取得搜尋引擎 ID──



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

小提醒:安裝完 CSE 後,建議先在官網的搜尋框,測試一下自己網站的搜尋結果,確保這個自訂搜尋引擎是能運作的。



三、安裝程式碼


1. 擺放位置

如果曾安裝過 CSE 的話,那麼請用本文的安裝程式碼,取代原本的程式碼。

如果沒安裝過 CSE 的話,之後的安裝程式碼,請放在想要顯示搜尋框的地方。如果不知道要放哪裡的話,可以在後台新增小工具 → 選擇「HTML/Javascript」→ 貼上本文的程式碼 → 將小工具拖曳到想顯示的位置。


2. 程式碼


請參考以上程式碼行號──

F:紅色 id 字串請置換為「二、Google 自訂搜尋準備動作」→「3. 取得 CSE 搜尋引擎 ID」→ 自己的搜尋引擎 ID 字串

G:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。

最後將以上程式碼貼到前面「1. 擺放位置」即可。

如果想先測試一下這個 CSE 改良版的話,可先在本站側邊欄最上方的搜尋框測試,搜尋結果會非常快速地立即出現在文章區塊上方。


Google 自訂搜尋相關文章:

6 則留言:

  1. 我改好了! 不過我的自訂搜尋原本放在網誌首頁下方處,所以在那邊搜尋之後打開的搜尋結果是對齊首頁第一篇的上水平線的,畫面不會自動切換到頂端,所以我只好把自訂搜尋欄改到右側欄最上方,這樣搜尋結果的視覺差才不會太大。

    回覆刪除
  2. <2294392298263819321>(以上內容請勿刪除,從括號之後開始留言)兩欄式通常這麼擺,對訪客操作比較方便~

    回覆刪除
  3. 感謝Wayne Fu大分享,已經順利安裝完成!

    回覆刪除
  4. http://foxearsnya.blogspot.tw/ 站長求救 裝了無法使用欸Orz
    CSE都無法裝(原裝都不行)

    回覆刪除
  5. <5989911073219914577>(以上內容請勿刪除,從括號之後開始留言)看了你網頁的原始碼,我用你的 code 含 CSE ID 裝在測試網站,執行沒有問題,所以看起來應該是跟你網站裝的其他外掛相衝。建議你一一進行交叉測試,找出跟那個外掛相衝了。

    回覆刪除
  6. <7865256266504174441>(以上內容請勿刪除,從括號之後開始留言)

    感謝,再來測試看看了

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。