前陣子接到一個需求，希望 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="http://3.bp.blogspot.com/-fpi6-9d3JpQ/Vo0LXN6iUDI/AAAAAAAANPA/89JVfzXNtXg/s1600/search-icon.png" />
</form>
<style>
.site_search {
width: 90%;
margin: auto;
}
.search_input {
margin-right: 5px;
height: 20px;
width: calc(100% - 100px);
border: 1px solid #d9d9d9;
padding: 4px 10px;
background: #f0ede9;
color: #8B8B8B;
font-size: 15px;
vertical-align: middle;
}
.search_btn {
width: 13px;
height: 13px;
padding: 8px 25px;
background-color: #d9d9d9;
border: 1px solid #bbb;
border-radius: 2px;
vertical-align: middle;
}
</style>
<!--Designed by WFU BLOG-->- 如果希望搜尋結果以關聯性排列，可刪除紅字這一行；沒有刪除的話，就會「依照日期排列」。
- 藍色字串為搜尋框內的提示字串，可自行修改。
- 樣式設計成支援 RWD，會隨不同區塊寬度自行調整。
- 如果熟悉 CSS 語法可自行修改參數、樣式
這個小工具的安裝十分簡單，複製貼上就完成了，不太會出錯，顏色樣式也中規中矩，相信大部分部落格都能輕易套用。
更多 Blogger 搜尋相關工具：