[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

[教學] 申請 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://2.bp.blogspot.com/-k7-hWv07YsY/WHY_rR2ZD3I/AAAAAAAAIr4/nnxLHH28On8nLTSsx-C-U1uKeVdALn_egCLcB/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 網站也適用



分享

共有 4 則留言

留言迴響
Wayne Fu
管理員
5/10/2014 9:34 PM ×

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

回覆
avatar
why
管理員
5/11/2014 12:51 AM ×

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

回覆
avatar
Wayne Fu
管理員
5/11/2014 9:05 AM ×

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

回覆
avatar
why
管理員
5/11/2014 3:10 PM ×

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

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *