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

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

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

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

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



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

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



相關連結

Google 自訂搜尋:「Google 自訂搜尋引擎

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設定流程

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

設置前準備

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



設定教學

Step 1

申請 Google 自訂搜尋引擎

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

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



Step 2

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

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

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

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

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



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

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



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

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



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

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

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



Step 3

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

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

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



接著在「網頁」頁面標題的地方輸入『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>

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



(* 這個步驟,我們在 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」靜態網頁。)

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



接著,可以幫搜尋框加入一些簡單的線條和色塊。在「範本」中搜尋「]]></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 網站也適用


留言

  1. 意思是頁面可以顯示 adsense 廣告嗎?這招滿不錯的~

    回覆刪除
    回覆
    1. 標題忘了改@@"~
      不過,突然想到!應該也可以建立一個靜止頁面,來當作網址掃描頁。
      最近搜到一些資料,國外有論壇將 Google 、塞門鐵克和卡巴斯基三種防護做單一網頁的網址掃描,實在太酷了!

      刪除
    2. 記得你之前有做過 google 掃描這個 idea,那麼就等你的研究成果了 ^^

      刪除
    3. 剩最後三分之一左右,關鍵點過了,後面就通了~~

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰