
不過 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. 程式碼
- <div id="cse-search-box"></div>
- <div id="cse-search-result"></div>
- <script>
- (function () {
- window.cse2Column = {};
- cse2Column.id = "014965755320729775193:kyhwsvbatpq";
- if (typeof cseID != "undefined") {return;}
- (function(){cse2Column.info="";cse2Column.show=function(){if(!$("#cse-result-area").length){var g="<span onclick ='cse2Column.close();' style='float: right; margin: 10px 0px; cursor: pointer; padding: 2px 5px; border: 1px solid #333;' title='關閉搜尋結果'>X</span>";$("#Blog1").prepend("<div class='date-outer' style='padding: 15px;'><div id='cse-result-area' class='post' style='margin-bottom: 0px;'>"+g+cse2Column.info+"</div></div>");$("#cse-search-result").show().appendTo("#cse-result-area")}};cse2Column.close=function(){$("#cse-search-result").hide().appendTo("#cse-search-box");$("#cse-result-area").parent().remove()};var _0x4cda=["\x3C\x73\x70\x61\x6E\x20\x69\x64\x3D\x27\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x68\x6F\x73\x74\x27\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x74\x65\x6D\x2D\x63\x6F\x6E\x74\x72\x6F\x6C\x20\x62\x6C\x6F\x67\x2D\x61\x64\x6D\x69\x6E\x27\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x6F\x78","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x68\x6F\x73\x74","\x67\x65\x74\x43\x6F\x6D\x70\x75\x74\x65\x64\x53\x74\x79\x6C\x65","\x64\x69\x73\x70\x6C\x61\x79","\x6E\x6F\x6E\x65","\x63\x75\x72\x72\x65\x6E\x74\x53\x74\x79\x6C\x65","\x69\x6E\x66\x6F","\x3C\x61\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x77\x66\x75\x62\x6C\x6F\x67\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x34\x2F\x30\x36\x2F\x62\x6C\x6F\x67\x67\x65\x72\x2D\x63\x73\x65\x2D\x74\x77\x6F\x2D\x63\x6F\x6C\x75\x6D\x6E\x2E\x68\x74\x6D\x6C\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x66\x6C\x6F\x61\x74\x3A\x20\x6C\x65\x66\x74\x3B\x20\x6D\x61\x72\x67\x69\x6E\x3A\x20\x31\x30\x70\x78\x20\x30\x70\x78\x3B\x20\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x20\x6E\x6F\x6E\x65\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x61\x61\x61\x3B\x20\x66\x6F\x6E\x74\x2D\x66\x61\x6D\x69\x6C\x79\x3A\x20\x27\u5FAE\u8EDF\u6B63\u9ED1\u9AD4\x27\x2C\x20\x73\x61\x6E\x73\x2D\x73\x65\x72\x69\x66\x3B\x20\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x31\x35\x70\x78\x3B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x6C\x6F\x67\x67\x65\x72\x20\u81EA\u8A02\u641C\u5C0B\u6539\u826F\u7248\x0A\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x57\x46\x55\x20\x42\x4C\x4F\x47\x27\x3E\x42\x6C\x6F\x67\x67\x65\x72\x20\u81EA\u8A02\u641C\u5C0B\u6539\u826F\u7248\x3C\x2F\x61\x3E","","\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x6F\x78","\x73\x65\x61\x72\x63\x68\x62\x6F\x78","\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x72\x65\x73\x75\x6C\x74","\x73\x65\x61\x72\x63\x68\x72\x65\x73\x75\x6C\x74\x73","\x72\x65\x6E\x64\x65\x72","\x65\x6C\x65\x6D\x65\x6E\x74","\x63\x73\x65","\x73\x65\x61\x72\x63\x68","\x68\x69\x64\x65","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x72\x65\x73\x75\x6C\x74","\x73\x68\x6F\x77","\x63\x6C\x69\x63\x6B","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x6F\x78\x20\x2E\x67\x73\x63\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x75\x74\x74\x6F\x6E","\x77\x68\x69\x63\x68","\x6B\x65\x79\x64\x6F\x77\x6E","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x6F\x78\x20\x2E\x67\x73\x63\x2D\x69\x6E\x70\x75\x74","\x63\x6C\x6F\x73\x65","\x23\x63\x73\x65\x2D\x73\x65\x61\x72\x63\x68\x2D\x62\x6F\x78\x20\x2E\x67\x73\x73\x74\x5F\x61","\x5F\x5F\x67\x63\x73\x65","\x65\x78\x70\x6C\x69\x63\x69\x74","\x2F\x2F\x77\x77\x77\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x63\x73\x65\x2F\x63\x73\x65\x2E\x6A\x73\x3F\x63\x78\x3D","\x69\x64","\x67\x65\x74\x53\x63\x72\x69\x70\x74"];var f=function (){var i=jQuery,h,g;i(_0x4cda[2])[_0x4cda[1]](_0x4cda[0]);h=i(_0x4cda[3])[0];g=(window[_0x4cda[4]])?(window[_0x4cda[4]](h)[_0x4cda[5]]==_0x4cda[6])?0:1:(h[_0x4cda[7]]&&h[_0x4cda[7]][_0x4cda[5]]==_0x4cda[6])?0:1;cse2Column[_0x4cda[8]]=(!g)?_0x4cda[9]:_0x4cda[10];var j=function (){google[_0x4cda[18]][_0x4cda[17]][_0x4cda[16]][_0x4cda[15]]({div:_0x4cda[11],tag:_0x4cda[12]},{div:_0x4cda[13],tag:_0x4cda[14]});i(_0x4cda[20])[_0x4cda[19]]();i(_0x4cda[23])[_0x4cda[22]](function (){cse2Column[_0x4cda[21]]();} );i(_0x4cda[26])[_0x4cda[25]](function (k){if(k[_0x4cda[24]]==13){cse2Column[_0x4cda[21]]();} ;} );i(_0x4cda[28])[_0x4cda[22]](function (){cse2Column[_0x4cda[27]]();} );} ;window[_0x4cda[29]]={parsetags:_0x4cda[30],callback:j};i[_0x4cda[33]](_0x4cda[31]+cse2Column[_0x4cda[32]]);} ;var a=function(g,h){var i=document.createElement("script");if(i.readyState){i.onreadystatechange=function(){if(i.readyState=="loaded"||i.readyState=="complete"){i.onreadystatechange=null;if(h){h()}}}}else{i.onload=function(){if(h){h()}}}i.src=g;document.documentElement.firstChild.appendChild(i)},c=function(){a("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",f)};if(typeof jQuery==="undefined"){c()}else{var b=jQuery().jquery,e=b.split("."),d="1.08.2";if(e[1]<10){e[1]="0"+e[1]}b=e.join(".");if(b<d){c()}else{f()}}})();
- })();
- </script>
請參考以上程式碼行號──
F:紅色 id 字串請置換為「二、Google 自訂搜尋準備動作」→「3. 取得 CSE 搜尋引擎 ID」→ 自己的搜尋引擎 ID 字串
最後將以上程式碼貼到前面「1. 擺放位置」即可。
如果想先測試一下這個 CSE 改良版的話,可先在本站側邊欄最上方的搜尋框測試,搜尋結果會非常快速地立即出現在文章區塊上方。
Google 自訂搜尋相關文章:
我改好了! 不過我的自訂搜尋原本放在網誌首頁下方處,所以在那邊搜尋之後打開的搜尋結果是對齊首頁第一篇的上水平線的,畫面不會自動切換到頂端,所以我只好把自訂搜尋欄改到右側欄最上方,這樣搜尋結果的視覺差才不會太大。
回覆刪除感謝Wayne Fu大分享,已經順利安裝完成!
回覆刪除http://foxearsnya.blogspot.tw/ 站長求救 裝了無法使用欸Orz
回覆刪除CSE都無法裝(原裝都不行)
<7865256266504174441>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除感謝,再來測試看看了