2016年11月13日

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

A+
前陣子接到一個需求,希望 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 搜尋相關工具:

4 則留言:

  1. 看到你這篇文章,就順便檢查了一下我的搜索功能。 blogger搜索小工具,確實有很多缺點,所以我就替換為這段程式碼了。 不過每個網站的美觀都有所不同,我就把.search_input{} 和.search_btn{} 兩個CSS段全移除了。

    回覆刪除
    回覆
    1. 簡單也是很好的選擇~

      刪除
    2. 這個搜索,是很簡單,很好用! 可是似乎,只能搜尋文章內容的關鍵字? 並沒有搜索頁面(page)內容的關鍵字? 這對於頁面也挺多的博客來說,並不太友好!!

      刪除
    3. 這工具的原理,應該是搜尋 feed,而 page 沒有 feed,所以無法搜尋喔!

      其實除非有特殊需求,那麼不需要建立 page 頁面,改用文章就行了,可參考「Blogger 何時該發佈文章, 何時該發佈網頁」:http://www.wfublog.com/2016/02/blogger-post-page-difference.html

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。