Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面 - WFU BLOG

安裝本篇的搜尋框工具,可以取代Google 自訂搜尋,有其快速的Ajax顯示搜尋結果優點,但沒有載入緩慢的缺點.更棒的是,保證能搜尋到網站的每一篇文章。

服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2016年1月8日 Blogger最強搜尋框工具﹍(1)自製搜尋頁面 WayneFu 電腦-Blogger-工具-搜尋功能 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 過去曾介紹讀者使用「Google自訂搜尋」來當作站內搜尋的工具，其原因在「取代Blogger搜尋小工具﹍Google自訂搜尋」說明得很詳細，主要是「Google自訂搜尋(以下簡稱CSE:CustomSearchEngine)」可動態載入搜尋結果、執行速度快，能給訪客很友善的使用體驗，快速找到需要的資料。

該篇文章最近有讀者留言，表示："google自訂搜尋 為什麼永遠都是要等整頁全部內容load完之後,搜尋列才會顯示出來...我的網誌經常被人說沒有搜尋列"。

我的回答是："這是正確的網頁程式設計，將不重要的工具延後載入，讓網頁重要的文章內容先顯示...讓網頁內容載入時不至於塞車"。

雖是如此，這件事其實不斷有使用者提出，且長久以來我一直有個構想要解決這件事、但遲未動手。

最近剛好在進行加快網頁速度的計畫，準備減少外部連結的讀取，例如不使用圖示：「圖示字型FontAwesome使用方式整理」，同時也會減少外掛的使用，所以CSE也是開刀對象之一。

最後我做出了這個更強大的搜尋框工具，功能、介面與CSE差不多，執行速度甚至可更快，不需外掛連結，算是我心目中最佳的Blogger搜尋工具了。

以下先分享原理、製作方式，共分上下兩篇，想直接安裝可跳至「二、自訂搜尋頁面」，想先測試效果可前往展示網站，操作右邊側邊欄的搜尋框： 點此看範例網頁 (圖片出處:pixabay.com) 一、製作原理 1.官方導覽列搜尋框 上圖紅框就是"Blogger官方導覽列搜尋框"，使用者多半將官方導覽列隱藏，因此用不到這個搜尋框。

前面提到的「取代Blogger搜尋小工具__Google自訂搜尋」→「一、Blogger各種搜尋方案比較」→「1.導覽列搜尋框」，介紹過他的優點："保證可以搜尋到部落格每一篇文章的內容"；但是他的缺點很致命："每次搜尋都需要重整頁面"，等待時間長是個不好的使用者體驗。

不過話說回來，這個搜尋框如果能夠改成Ajax動態載入的話，那麼他的功能將會勝過CSE。

2.Google自訂搜尋的缺點 如了文章開頭使用者反應的"頁面全部載入後，搜尋框才會出現"之外，CSE另外一個大缺陷就是，網站文章沒被Google搜尋引擎收錄的話，就搜尋不到了。

這件事其實並不少見，WFU常看到使用者反應搜尋不到自己的文章，所以寫了這篇「Google網站管理員的活用方法﹍我的例行待辦事項」。

如果搜尋不到文章，那麼網站裝了CSE也是沒用的。

因此對於站齡不長、網站權威度不夠、流量不多的網站，安裝CSE可能會遇上麻煩。

另外，用「Chrome開發人員工具」檢查網路傳輸狀態，發現所有CSE會用到的外連JS+CSS檔，加總大約要傳輸100k，算是滿龐大的數字。

不過對於網路慣用者，瀏覽器應該會有這些檔案的快取。

3.改造方法 上圖為CSE的搜尋結果版面，而「官方導覽列搜尋框」搜尋結果的版面，跟我們網站的首頁是一樣的，因此我依據上圖進行了這些步驟的改造： 版面編排參考CSE的優點，去除不太必要的部分(例如不顯示網址)。

增加縮圖顯示 搜尋字串改為一律標記紅色 文章摘要之前加入發佈日期 將"重整頁面"改為"Ajax動態載入"，可立即看到搜尋結果。

將「官方導覽列搜尋框」改為側邊欄小工具。

二、自訂Blogger搜尋頁面 根據以上的改造流程，我們首先要進行"搜尋結果"的版面改造。

參考「Blogger七種頁面形態判斷語法詳解」→「二、各種索引頁面」→「3.搜尋頁面」，可瞭解到"站內搜尋"的頁面，官方稱為"搜尋頁面"(searchQuery)。

我們現在要動手修改範本中的"搜尋頁面"，其實這是有點危險的事，在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1.搜尋頁面CSS 請到後台「範本」→「編輯HTML」，游標點進範本區塊，按Ctrl-F搜尋這個字串，找到後在此字串的前一行，插入以下程式碼： 如果熟悉CSS的話，可自行修改版面效果。

2.搜尋頁面HTML 接著在範本中搜尋這個字串： 應該只會有一個搜尋結果，然後將這一行字串，置換為以下程式碼： ... 主要可修改的內容為綠色字串，這是文章無縮圖時的替代圖片，可改為自訂網址。

這部分所有的程式碼，就是"搜尋頁面"的版面配置，如果想要自行調整版面的話，建議非常熟悉Blogger語法再來，否則很可能引起災難。

3.隱藏預設文章日期 事情還沒完，先別存檔，進行完上一點後，在範本中往上個7行左右，會看到以下程式碼： 將這行程式碼置換為以下內容： 這樣子可以隱藏"搜尋頁面"的文章發佈日期，版面會比較簡潔好看。

到此可以存檔，完成第一階段。

三、測試效果 想要先看一下自己網站"搜尋頁面"的版面效果，可以在網址輸入以下字串： http://你的網址.blogspot.com/search?q=搜尋字串 或者也可看這個展示頁面，是搜尋"blogger"字串結果的畫面： 點此看範例網頁 如果版面沒什麼問題的話，下一篇我們將安裝搜尋框在側邊欄+Ajax動態載入的效果： Blogger最強搜尋框工具﹍(2)安裝Ajax動態載入 更多Blogger搜尋工具： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-Blogger-工具-搜尋功能 WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 7則留言: WangHenry娛樂數位2016年5月21日晚上10:36你好，這篇文章的教學步驟我都已經完成，也在測試的網頁中成功搜尋到文章。

這應該是代表這一篇文章的教學我有做到了吧?不過，不知道為什麼系統會通知為存檔??謝謝(我要確認是否有存檔成功，所以按下存檔之後退到後台時系統告知未存檔)https://wanghenrytw.blogspot.com/回覆刪除回覆WangHenry娛樂數位2016年5月21日晚上10:46補充：發現問題點是在去除日期的那一個動作，但第二次複製貼上之後存檔就成功了。

這狀況不知道是否有遇過呢?謝謝~PS:搜尋過後要跳回到部落格的"顯示所有文章"的字體大小、以及中文字是否能替換或是調整呢?謝謝~刪除回覆回覆WayneFu2016年5月22日晚上9:36請參考下面的留言注意事項，CSS相關問題要請自行研究喔~至於你說的改文字，目前沒有修改這方面的計畫。

刪除回覆回覆回覆匿名2017年6月7日上午10:28你好因為我是使用weebly,他有HTML/CSS編輯器可以看到如圖http://imgur.com/a/FMOB0分類成許多部份,我只在標題類型的header可以貼第1步驟的字串但第2之後的步驟就找不到能放哪邊可以請教您是否可以幫我解答嗎?謝謝回覆刪除回覆WayneFu2017年6月7日上午10:56你好，本篇的工具是Blogger專用，其他平台無法使用喔~刪除回覆回覆回覆zilchide2022年4月1日下午5:20您好，非常感謝在我認真開始重新使用Blogger的時刻，能夠遇見你的多篇教學，內容非常實用效果也非常強大，感謝您！但我在成功安裝了樹狀標籤V2.1以及最強搜尋框工具之後，發現一個現象：當我以作者角度，選擇"標題"前提，隨後按下樹狀標籤之後，文章欄上方會有loading的圖案在旋轉，隨後會出現所有以此標籤分類的文章標題，代表這個功能被完美實現了，但是此時我按網誌標題時，卻失去連結，而無法回到網誌首頁。

此一現象也發生在"最強搜尋框工具"執行搜尋功能後，不知道能否幫忙解答這個狀況，感謝！回覆刪除回覆WayneFu2022年4月1日晚上8:22建議改用樹狀標籤V2.0就好V2.1的開發環境為「非RWD」官方範本，所以不代表所有範本都能正常執行，尤其非官方範本應該是無法正常執行。

(請見下方留言注意事項)刪除回覆回覆回覆新增留言載入更多… 張貼留言注意事項： ◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (17) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (5) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (5) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (5) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (7) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (6) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP