2013年3月8日

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

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 自訂搜尋相關文章:

46 則留言:

  1. 您最後還是捨棄Blogger的搜尋工具啊?
    不過Google自訂搜尋的新版並不是最近才更新的喔! 至少在去年4月前就已經換新版.

    回覆刪除
  2. <3138333835235951079>(以上內容請勿刪除,從括號之後開始留言)相信我,官網這幾天以來有很大的變化,我擷取的畫面都是最新的版本,網路上找不到更新的了。

    回覆刪除
  3. <3186691354471191631>(以上內容請勿刪除,從括號之後開始留言)
    啊! 我知道為何您說是新的.
    Wayne您有沒有關注Google labs(實驗室)呢? 我剛才又進去喵了一下, 只有更新結果排序這一項不同, 其他功能跟介面沒變. 因為我在去年4月的404頁面已經使用了. Google把CSE獨立出來是嗎?

    回覆刪除
  4. <5397383986705300341>(以上內容請勿刪除,從括號之後開始留言)呵呵,其實我們只是對同一件事各自表述而已,你說的新版跟我說的新版,表達的方面不太一樣,沒關係啦~

    至於您提的事,其實我沒有追蹤 Google 消息,我是出了狀況才找 solution 的人,所以 CSE 我最多從他的官網部落格瞭解改版訊息:http://googlecustomsearch.blogspot.com/

    根據官網,目前的程式碼為 V2,去年 8 月發佈,說他不是新版當然 ok. 而撰寫教學文時,有人寫過同樣主題的話,我通常給個連結就結束了;不過 google 過 CSE 的教學文,都還是以 V1 的程式碼為主,所以我想 V2 也可以算是新版了。

    就在我要寫這篇文章的當天,發現官網整個操作介面竟然跟前一天完全不同,導致我要寫的操作步驟、畫面都得全部重新來;所以呢,我可以保證這篇文章的擷取畫面、操作步驟,是全世界最新的,說他是 "新版"「Google 自訂搜尋」不為過吧 ^^ 如果早一天寫,就不會遇上官網改版了~

    回覆刪除
  5. <2890896678681419707>(以上內容請勿刪除,從括號之後開始留言)
    我剛才好像沒留言成功...
    如果您沒寫這篇, 我也沒留意CSE有獨立的設定. 而且我的帳號有時會透過測試帳號邀請作Feedback, 又沒有另一個帳號比對. 所以有時很難區分是測試中或新釋出的功能.

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

    沒有這次的事件,我也不會研究這個好工具,而且 Google 似乎開始陸續對一些小工具進行介面改版,中文的操作說明越來越友善了。

    回覆刪除
  7. <4382530648128125540>(以上內容請勿刪除,從括號之後開始留言)嗯嗯,Google的改版风格现在已经延伸到小工具了。。

    回覆刪除
  8. <1043183688355416426>(以上內容請勿刪除,從括號之後開始留言)
    Google 最近對中文介面滿用心的~

    回覆刪除
  9. 最近為了這搜尋框功能失效煩惱許久

    不過照著大大的方法,設定完自訂搜尋
    卻只能搜尋到一篇文章(汗

    不知道是什麼問題?

    回覆刪除
  10. <2958253671306354929>(以上內容請勿刪除,從括號之後開始留言)「一、Blogger 各種搜尋方案比較」-->「3. Google 自訂搜尋」

    先看看你網站的文章有沒有被 google 搜尋引擎收錄喔

    回覆刪除
  11. 感謝您快速回覆!

    之前有提交過網址~
    不過平常在Google搜尋能正常搜尋的關鍵字
    現在反而都沒辦法找到了@@

    回覆刪除
  12. <5248655588968806251>(以上內容請勿刪除,從括號之後開始留言)如果有提交過,而 google 引擎又搜尋不到,那我猜是 google 有一些演算法判定的問題;至於 google 要不要收錄某些文章,這是屬於 SEO 的領域,也許可以提供你的網址到「Blogger中文社群」問問,看看SEO高手能否解答。

    回覆刪除
  13. 瞭解!

    不管什麼關鍵字搜尋
    最後只出現同一篇文章,實在有些弔詭= =a

    回覆刪除
  14. <7762150060435396923>(以上內容請勿刪除,從括號之後開始留言)
    看來你找到答案了,我把方法加在「2013.3.12 補充」的部分。

    回覆刪除
  15. 部落格才剛成立,文章只有9篇,但是卻有兩篇文章(環頸雉,中文化)
    用了Google的自訂搜尋但是仍然怎樣都搜尋不到
    請問可能是哪裡出了問題呢?
    PS: 我提交sitemap的方法是這個
    "http://部落格網址/atom.xml?redirect=false
    http://部落格網址/atom.xml?redirect=false&start-index=1&max-results=500"

    回覆刪除
  16. <7048921914563947946>(以上內容請勿刪除,從括號之後開始留言)「google自訂搜尋」所搜尋到的結果,跟 google 搜尋引擎搜尋的結果是一樣的,可以試著在 google 搜尋引擎打「site:melodylin0904.blogspot.com」就知道你有多少文章被收錄了。

    提交資料到被搜尋引擎收錄需要時間,請耐心等等,我剛剛搜尋你已經有六篇文章了喔。

    回覆刪除
  17. 你好
    想請問我用Blogger 後台新增一個「HTML/Javascript」小工具
    然後在裡面複製貼上了自訂搜尋的程式碼
    再到網誌看確沒有任何東西顯現??!
    想請問如何解決?謝謝~

    回覆刪除
  18. <2095261616299481330>(以上內容請勿刪除,從括號之後開始留言)你的簡介不存在,我也不知道你的網址,所以無法知道原因。

    回覆刪除
  19. <5583251576035090190>(以上內容請勿刪除,從括號之後開始留言)我的網址:http://winefs.blogspot.tw/
    右側有個自訂搜尋字樣就是,用「HTML/Javascript」小工具新增後什麼都沒出現

    回覆刪除
  20. <4632765411850402921>(以上內容請勿刪除,從括號之後開始留言)我複製了你的安裝碼來測試,的確也是不能顯示。

    看不出是哪裡的問題,不過你的安裝碼無法執行是確定的,所以另外重新申請一次,再用新的安裝碼試試看吧!

    回覆刪除
  21. Wayne您好﹐
    謝謝你的分享﹐ 我好喜歡看你的格喔﹗ 我剛把格子從無名搬到blogger, 有很多想customize的地方﹐ 你這裡真是寶庫﹗
    我照著你這篇改code﹐ 但是發現即使文章裡有很多圖﹐ 搜尋結果還是沒有出現縮圖耶﹐ 不知道能不能給點建議﹖ 大感謝﹗
    maobaocun.blogspot.com
    茅茅

    回覆刪除
  22. <1511885083533148054>(以上內容請勿刪除,從括號之後開始留言)謝謝你的支持 ^^
    我最近也發現了這件事,如你所提的,在 WFU BLOG 搜尋文章也幾乎看不到縮圖了,跟當初差很多,所以這是官方的問題,就不必太在意了(不是你個別網站的問題),畢竟讀者要的是能搜尋到需要的文章~

    回覆刪除
  23. 又是我﹐ 我剛再試了一次﹐ 這次有兩篇有縮圖出來﹐ 但是大部分還是沒有。另外我還發現﹐ 自定的外觀和風格在Chrome和firefox會正確顯現﹐ 但是IE不會。你的會有這個現象嗎﹖ 謝謝你。maobaocun.blogspot.com

    回覆刪除
  24. <4782330376775658788>(以上內容請勿刪除,從括號之後開始留言)縮圖的事我想就隨緣吧,這是由官方的程式碼控制 ,不是我們能控制的 ^^
    至於 IE,就更要雲淡風清了,你可以看我導覽列最右邊,或網頁最下方的瀏覽器推薦,或請參考「建議避免使用 IE8(含)以下瀏覽器」。

    回覆刪除
  25. 看到這篇就立刻改用了! 無痛安裝好~謝謝wayne ^^

    回覆刪除
  26. <2723257816317579417>(以上內容請勿刪除,從括號之後開始留言)哪裡~ ^^

    回覆刪除
  27. 之前也一直覺得內建的搜尋功能不太完善,今天終於一步步照說明完成!謝謝!

    回覆刪除
  28. <5452321463930397053>(以上內容請勿刪除,從括號之後開始留言)是啊,這個速度快多了~

    回覆刪除
  29. 高度怎麼設定,上下會多一些肉出來,想把它減掉...

    回覆刪除
  30. <1429067537900708832>(以上內容請勿刪除,從括號之後開始留言)可以使用「Chrome 開發人員工具」來調整CSS設定。

    回覆刪除
  31. 我的搜尋bar都沒去改設定,但已經失效好幾天,原以為是載入慢一點或偶爾失效,我不知道發生什麼事,剛剛重貼一次程式碼,還是沒辦法出現,請問有什麼方法可以檢查哪邊出問題嗎?謝謝^^

    回覆刪除
  32. <2777033413451144235>(以上內容請勿刪除,從括號之後開始留言)從你這兩天的狀況來判斷,放在不同的位置執行結果可能不同,且有時可出現、有時不能出現,應該是某些外掛所引起。

    「Google 自訂搜尋」為了不影響頁面載入,刻意在所有元素都載入後才執行(window.onload才執行)。

    或許某些外掛由於伺服器不穩(例如廣告),導致某些資料遲遲無法載入完畢,讓系統判斷頁面尚未載入完全 → window 遲遲無法 onload → 所以「Google 自訂搜尋」遲遲無法執行。

    以上為大致的原理,所以需要阿冠自行測試,一一移除可能是禍首的工具來交叉測試,才能確保「Google 自訂搜尋」能夠在 window.onload 時執行。

    回覆刪除
  33. 受用無窮!感謝板主的分享!

    回覆刪除
  34. 版主你好~
    想請問google自訂搜尋要如何把後面那個叉叉拿掉呢?
    我看板主的自訂搜尋沒有後面那個叉叉耶
    http://lairdstudio.blogspot.tw/

    回覆刪除
  35. <5811138695288538457>(以上內容請勿刪除,從括號之後開始留言)可以進入 CSE 官網 → 你的搜尋引擎 → 外觀和風格 → 主題,我使用的是「預設」效果,所以沒有那個叉叉,其他的項目多半會有叉叉。

    回覆刪除
  36. 很高興找到了又要收藏的好網主了
    有一個問題想請教網主
    就是我建立出來的google 自訂搜尋
    為什麼永遠都是要等整頁全部內容load完之後才會到google自訂搜尋列顯示出來
    但我中途按stop loading this page又會馬上顯示了google自訂搜尋列
    有沒什麼辦法可以把google自訂搜尋列自行顯示出來而不用最後才load出來
    這樣我的網誌經常被人說沒有搜尋列

    回覆刪除
  37. <3230117650814986427>(以上內容請勿刪除,從括號之後開始留言)每個人的 "google 自訂搜尋",都是你描述的這樣子喔!這是正確的網頁程式設計,將不重要的工具延後載入,讓網頁重要的文章內容先顯示,稱為 "動態載入",讓網頁內容載入時不至於塞車,有興趣可參考 http://www.wfublog.com/2012/09/bloggerads-jam.html

    另外,我做了一個新的 Blogger 搜尋框工具,可解決你的問題,且功能不輸 "google 自訂搜尋",可參考:http://www.wfublog.com/2016/01/blogger-ajax-search-box.html

    回覆刪除
  38. 很棒的教學,再加上網站地圖那篇,讓我受益良多。
    我也順利把Google自訂搜尋整合進Blogger了
    http://blog.pulipuli.info/

    我覺得原本Blogger的搜尋功能真的是很不夠用
    還是Google自家的搜尋好用

    回覆刪除
  39. <3071298070852899952>(以上內容請勿刪除,從括號之後開始留言)
    喔對了,我還可以設定CSS來影響Google自訂搜尋,這點也讓人覺得很方便XDD
    總之謝謝啦。

    回覆刪除
  40. <264119241305997076>(以上內容請勿刪除,從括號之後開始留言)不客氣~~這篇是三年前的文章,前陣子我寫了另一個更好的搜尋工具,可參考:http://www.wfublog.com/2016/01/blogger-ajax-search-box.html

    回覆刪除
  41. 你好,我想請問一下搜尋工具的問題~

    我的網站之前是依照你的教學加入的站內搜尋關鍵字的功能,也用得很順利。

    不過就在昨天為了修正網站問題而把所有文章都刪除,且重新匯入了文章。

    所以原本的搜尋工具能找到的關鍵字都是舊文章的網址、也就是代表點開網址後是空的內容!!

    所以,我又去新增一個搜尋的工具,且把舊的搜尋工具給刪除。
    (這邊好像又太衝動= =,但都已經發生就認了吧)

    而目前新增的小工具在搜尋關鍵字的時候都是0資料,

    我已經忘記當初第一次設定此工具時是不是要等N個小時才會有搜尋的結果??

    還是說正常來說不用等數個小時呢?

    謝謝

    https://wanghenrytw.blogspot.com/

    PS:換了整個範本、且文章網址全部重來應該不需要重新上傳 MAPSITE 了吧?

    回覆刪除
  42. <5612817244456648163>(以上內容請勿刪除,從括號之後開始留言)1. 網站提交一次就行了

    2. 你可以改用這個,http://www.wfublog.com/2016/01/blogger-ajax-search-box.html → 不用等 google 收錄文章,這是真正的站內搜尋工具。

    回覆刪除
  43. 謝謝回復,我再繼續閱讀你其他的文章,有問題在向你提問請教^^

    回覆刪除
  44. 我安裝完搜尋,發現搜尋出的文章的說明完全不是那篇文章的內文,所以導致到搜尋了不相關的文章出現,應該如何解決? 或者搜尋完唔出現說明,只有文章標題應該要點做?救教,謝謝

    回覆刪除
    回覆
    1. 你可以參考這篇「各種搜尋結果不如預期的疑難雜症整理」:http://www.wfublog.com/2016/01/google-search-result-faq.html

      也可以參考文章開頭的 2016.1.8 公告,安裝我另一個搜尋工具。

      刪除

張貼留言注意事項:

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