Blogger 自製真正的站內搜尋小工具﹍以日期排列

前陣子接到一個需求，希望 Blogger 搜尋結果能以日期排列。這個要求乍聽之下不太瞭解用意，一般來說，搜尋結果會依照 "關聯性" 來排列，對訪客而言，應該會希望越相關的文章，排越前面才對啊？

不過由於案主是人氣很高的美食旅遊部落格，文章數量很多，她表示希望例如在搜尋 "台北" 時，日期最新的文章能排列在前。後來仔細想想也有道理，對於特定類型的網站，臆測訪客搜尋模式的確必須從不同的考量點切入，有時最新的資訊才是最重要的，例如日期較久遠的文章，該文介紹的店家可能早已關閉，或是介紹的景點已經過時、不熱門了。

因此，針對特殊需求的部落格，本篇會示範如何製作「依照日期排列」的搜尋框工具。

(圖片出處: pixabay.com)

一、Blogger 搜尋工具介紹

1. 三種方案

之前曾在「Google 自訂搜尋」介紹過三種 Blogger 可以安裝的搜尋工具：

• Blogger 導覽列搜尋框：網頁最上方導覽列的搜尋框
• Blogger 官方搜尋框工具：可從後台安裝的官方工具
• Google 自訂搜尋

這三個只有「Blogger 導覽列搜尋框」是真正的站內搜尋工具，保證可以搜尋到部落格每一篇文章的內容，也是本篇要介紹的主角。


2. Ajax 動態載入功能

「Blogger 導覽列搜尋框」的缺點就是，每次搜尋都需要重整頁面，執行速度較慢，因此 WFU 以該工具為藍圖，製作了這個「Blogger 最強搜尋框工具」，支援 Ajax 動態載入功能，不必重整頁面就能看到搜尋結果，執行速度飛快。


3. 自製站內搜尋工具

「Blogger 最強搜尋框工具」安裝流程比較麻煩，需要兩篇文章的操作才能完成，因此可能出錯的地方不少。

如果你只需要一個非常簡單的 Blogger 站內搜尋工具，那麼可參考本篇的安裝流程，將「Blogger 導覽列搜尋框」搬到網站的任何地方擺放，例如側邊欄，或是像下面這個搜尋框這樣：

二、安裝程式碼

請將以下的程式碼，複製到任何想擺放的地方，或是側邊欄「HTML/Javascript」小工具即可：

<!--Blogger 站內搜尋-->
<form class="site_search" action="/search" method="get" role="search">
<input class="search_input" name="q" placeholder="搜尋文章" type="text" />
<input name="by-date" type="hidden" value="true"/>
<input class="search_btn" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVECT5Y1oRKXIPyd-2nr84ztOkUkS4z_gQM_0cbPL53GH7RgcdF6OAttcPauueYuu4N0Uo8JpeSKk0Uhz-F9ar8cQoGBi22YF5JlIg-ZDUMKH73THpko1O0AocodGFf4PX20IwKfUrCBOz/s1600/search-icon.png" />
</form>
<style>
.site_search {
width: 90%;
margin: auto;
}
.search_input {
margin-right: 5px;
height: 30px;
width: calc(100% - 100px);
border: 1px solid #d9d9d9;
padding: 4px 10px;
background: #f0ede9;
color: #8B8B8B;
font-size: 15px;
vertical-align: middle;
}
.search_btn {
width: initial;
height: 30px;
padding: 8px 25px;
background-color: #d9d9d9;
border: 1px solid #bbb;
border-radius: 2px;
vertical-align: middle;
}
</style>
<!--Designed by WFU BLOG-->

• 如果希望搜尋結果以關聯性排列，可刪除紅字這一行；沒有刪除的話，就會「依照日期排列」。
• 藍色字串為搜尋框內的提示字串，可自行修改。
• 樣式設計成支援 RWD，會隨不同區塊寬度自行調整。
• 如果熟悉 CSS 語法可自行修改參數、樣式

這個小工具的安裝十分簡單，複製貼上就完成了，不太會出錯，顏色樣式也中規中矩，相信大部分部落格都能輕易套用。

更多 Blogger 搜尋相關工具：