goog自訂搜尋.jpg

痞客邦部落格有提供站內搜尋,不過這個內建的搜尋功能坦白說效果很雞肋,食之無味,棄之可惜。

怎麼辦?我平常用Chrome瀏覽器,我每次要搜尋我都直接在瀏覽器的網址例輸入「歐飛(空一格) xxx」這樣我就能搜尋到自己的文章了。

不過現在有很多部落格都是用google提供的自訂搜尋功能,我今天特地花了一點時間把部落格的站內搜尋改成google自訂搜尋,搜尋的結果會有一種「燈箱」的效果,這個燈箱的效果我覺得很好,美中不足的是,我點選搜尋結果時會開啟另一個視窗,我其實比較希望是在原視窗打開。

好,以下示範如何設定google自訂搜尋

 

goog自訂搜尋-01.jpg
Step01:設定googel自訂搜尋
網址:https://cse.google.com/cse/all
 

goog自訂搜尋-02.jpg
Step02:建立要搜尋的網站
 

goog自訂搜尋-03.jpg
Step03:copy程式碼到部落格後台的側欄即可使用
 

goog自訂搜尋-04.jpg
▲google自訂搜尋可以讓你自訂搜尋欄的顏色等等,可以讓你配合部落格的顏色來自訂。

 

goog自訂搜尋-05.jpg

就這樣,很簡單吧,你就可以在部落格中有一個專屬的部落格文章站內搜尋功能了。

一般預設如上,但如果您希望像我這樣可能自訂搜尋欄位的位置,CSS程式碼如下給您參考。
請注意這只是讓您參考用,實際結果會依每個部落格的版型有所不同。


/*Google自訂搜尋
----------------------------------*/
#box1950549 .box-title {
display : none;   /*隱藏欄位標題*/
}

#box1950549 .box-text {
display: block;
position: absolute;   /*指定搜尋欄位絕對位置*/
top:101px;
left:963px;
width: 300px;
height:24px;
}

#box1950549 .gsc-control-cse {
width: 200px;   /*指定搜尋欄位寬度*/
height: 24px;
background-color: transparent;
border:0;
}

#box1950549 .gsc-search-button-v2 {
padding: 5px 13px;
border-radius: 5px;
background-color: #3a94cd;    /*指定搜尋鈕顏色*/
border:0;
}

#box1950549 .gsc-search-button-v2:hover {
background-color: #8fc31f;   /*設定搜尋鈕滑鼠移動底色*/
}

#box1950549 .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right : 5px;
width: 200px;       /*搜尋框的寬度*/
}

#box1950549 .gsc-input-box {
border-radius: 5px;     /*搜尋框導圓角*/
}

 

好,本文就到這裡。

 

創作者介紹
創作者 歐飛 的頭像
歐飛

歐飛先生

歐飛 發表在 痞客邦 留言(0) 人氣()