[教學] 申請 Google 自訂搜尋，將搜尋結果嵌入 Blogger 網站

本篇教學，我們會將「Google 自訂搜尋」整合到 Blogger 當中。使用自己製作「Blogger 搜尋框」，來調用「Google 自訂搜尋」，且將搜尋結果顯示於網站的「靜態網頁 (* /p/static_page.html )」，並將它偽裝成「站內搜尋」的一部份。

設置的過程中，我們會將範本的搜尋框與「Google 自訂搜尋」做連結，利用 Google 的強大搜尋檢索功能，來幫自己的「Blogger 網站」作更精確的關鍵字搜尋！

過程中，會先在 Blogger 的後台「網頁」裡面，建立一個名為「search」的靜態網頁，再將我們原先已有的「Google 自訂搜尋引擎」程式碼，放置在「search」頁面的「HTML」頁籤，最後在自定義搜尋框的「小工具」裡，設定將網址指向至「search」，即可完成！

先來看一下完成後的成果。我們會在「靜態網頁：/p/search.html」建立一個「搜尋框」和「Google 自訂搜尋結果頁面」。而側邊欄的搜尋框，不加入灰色的搜尋按鈕，使用輸入文字按鍵盤「Enter」進行搜尋。

相關連結

Google 自訂搜尋：「Google 自訂搜尋引擎」

範例 DEMO 頁面｜電腦版網頁：「電腦版」

範例 DEMO 頁面｜行動版網頁：「行動版」

設定流程

1. 申請 Google 自訂搜尋引擎
2. 建立網站搜尋引擎，取得 Google 自訂搜尋程式碼
3. Blogger 後台建立名為「search」的靜態網頁
4. 製作「搜尋框」，並將網址指向「search」靜態網頁
5. 讓 Google 自訂搜尋框能在行動版網頁上顯示

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Step 1

申請 Google 自訂搜尋引擎

首先前往「Google 自訂搜尋引擎」，點擊『建立自訂搜尋引擎』。到這裡，就完成 Google 自訂搜尋的申請了。

Step 2

建立網站搜尋引擎，取得 Google 自訂搜尋程式碼

接著選擇『新增搜尋引擎』，並在「要搜尋的網站」輸入框中『填入自己的 Blogger 網站網址』。

「語言」的下拉式選單中選擇『繁體中文』，「搜尋引擎的名稱」輸入框中『填入搜尋引擎名稱』。接著按下『建立』。

(* 由於我們要搜尋全站，所以輸入框中填入「demo2.techcoke.com/*」。結尾加入的『/*』，表示搜尋引擎會撈取「日期：/2017/01/post.html、靜態網頁：/p/static_page.html、標籤：/search/label/tag.html」等 demo2.techcoke.com 後方的結構網層。)



接下來，點選『控制台』。

選擇「外觀和風格 〉版面配置 〉只顯示結果」，接著點擊『儲存並取得程式碼』。

接著我們把整段程式碼先『全複製起來』，等下要在「STEP 3」中放入。

(* 這邊出現的程式碼，呼應剛才「外觀和風格」中的設定，不同的設定會出現不同的程式代碼。)

Step 3

Blogger 後台建立名為「search」的靜態網頁

前往 Blogger 的後台，點選「網頁」，並建立一個『新網頁』。

接著在「網頁」頁面標題的地方輸入『search』，然後點選「HTML」並將剛才「STEP 2」取得的「Google 自訂搜尋程式碼」及「以下自製搜尋框代碼」貼到下方的『內容框』中。

並在右側的「頁面設定 〉選項 〉讀者意見」，點選「Ⓞ不允許，隱藏現有連結」，最後按下『發佈』。

<form action="/p/search.html" class="searchform" method="get">
<input class="searchbar" id="s" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="站內搜尋" />
  <input class="searchsubmit" type="submit" value="搜尋" />
</form>

(* 這個步驟，我們在 Blogger 靜態網頁，建立了一個「demo2.techcoke.com/p/search.html」的頁面。並且取消頁面的留言，再加入「Google 自訂搜尋結果」的程式碼到「/p/search.html」這個網址中。)

Step 4

製作「搜尋框」，並將網址指向「search」靜態網頁

前往「版面配置」頁面，在想要放置搜尋框的位置加入一個「HTML / JavaScript」小工具，並加入以下程式代碼到內容頁框中，並按下『儲存排列方式』。

<form action="/p/search.html" class="searchform" method="get">
<input class="searchbar" id="s" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="站內搜尋" />
</form>

(* 代碼中的「/p/search.html」，就是我們在「STEP 3」中建立的「search」靜態網頁。)

接著，可以幫搜尋框加入一些簡單的線條和色塊。在「範本」中搜尋「]]></b:skin>」。將下段「CSS」程式碼放至「]]></b:skin>」的上方，接著在按下『儲存範本』後即完成所有設定。

/* 搜尋框 */
#s{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhsrXEv4gFfAW1umS5reK9KAhnzUQ0a0TSHUwu-Ep7ur2fC4Oc__Ef6E4yIgAEIFQWPgynJVYpfTlnaZ5yF455uE3SNlvULYR2PT2Di8lYsqcbJHyjXc9Bdijf-vpYlu_esfOoLxNifY/s1600/searchsubmit.png") no-repeat scroll 10px center #fff;
/* 上面為搜尋框左側圓圖的圖片網址可自行放至自己的圖片空間 ( 32x32 )，圖片不滾動並離左側 10px 置中，背景為白底 #fff */
border:1px solid #cccccc;border-radius:1px 1px 1px 1px; /* 邊框為直線 1px，框框的圓角各 1px 的圓滑度 */
box-shadow:0 0 5px rgba(0,0,0,0.05) inset; /* 模糊5px，內陰影 50%半透明 */
color:#cecece; outline:none; text-decoration:none; width:70%; /* 文字顏色，框框沒有輪廓值，字體沒有裝飾，框框寬度為70% */
font-size:17px; font-family:open sans; margin:0 0 15px; /* 字體大小 17px，字體為 open sans，與下邊界距離 15px */
padding:10px 18px 10px 55px; /* 框框的留白值，上、右、下、左 */
}
/* 搜尋按鈕 */
input[type=button],input[type=submit]{
background:#bbbbbb; border:none; /* 按鈕的背景顏色，邊框款式 */
color:#FFF; font-size:15px; font-family:open sans; font-weight:700; /* 字體顏色，大小，字型，字體厚薄 */
border-radius:1px 1px 1px 1px; /* 按鈕的圓角值 */
padding:10px 20px 10px 20px; /* 按鈕的留白值，上、右、下、左 */
-webkit-border-radius:1px 1px 1px 1px; /* Chrome */
-moz-border-radius:5px; /* Firefox */
-o-border-radius:1px 1px 1px 1px; /* Opera 按鈕邊框的陰影效果可至 http://www.css3maker.com/box-shadow.html 試試想要的效果 */
transition:background 400ms; /* 按鈕背景漸變效果毫秒數 */
-webkit-transition:background 400ms; /* Chrome */
-moz-transition:background 400ms; /* Firefox */
-o-transition:background 400ms; /* Opera 按鈕框框漸變效果毫秒數 */
}
input:hover[type=button],input:hover[type=submit]{
background:#eeeeee; /* 滑鼠在移入按鈕後的背景色及字體顏色 */
color:#666666;
}

Step 5

讓 Google 自訂搜尋框能在行動版網頁上顯示

在行動版網頁上顯示 Google 自訂搜尋框，可以參考「Google 自訂搜尋嵌入 Blogger 行動版網頁」。

小結

「STEP 4」中的「id='s'」對應著 CSS 資料中的「#s」，CSS 的部份都放上了說明，如果要調整長寬比例，都較為方便。

另外，在搜尋結果出現的外觀樣式，我們則可以前往自己的「Google 自訂搜尋引擎」，找到「STEP 2」中的「外觀和風格」，在「主題」與「自訂」當中做搜尋結果樣式風格的修改。

最後！「STEP 4」完成後，在「search」靜態網頁，我們可以將標題改為中文的「搜尋」或「站內搜尋」，因為在網址結構上，我們已建立名為「/p/search.html」的固定網址，標題改回中文後不會影響網址的定向。

相關文章

Google 自訂搜尋嵌入 Blogger 行動版網頁

Blogger 靜態網頁建立聯絡表單 RWD 網站也適用