2016年1月1日 星期五

Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

Wayne Fu 0 A+
blogger-search-box-ajax-load-Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入要安裝這個「Ajax 搜尋框」工具,請務必先完成上一篇「自製搜尋頁面」的流程,這樣搜尋結果的版面才會美觀。

第一階段完成後,本篇要把「官方導覽列搜尋框」搬到側邊欄,並加上 "Ajax 動態載入" 的搜尋結果畫面。


(圖片出處: pixabay.com)


一、安裝程式碼


請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

<!--搜尋框 HTML-->
<div>
<input id='search_input' placeholder='搜尋文章' type='text' />
<input id='search_btn' type='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpBf2IwXWFanzSL2iy5pDsfoi2Lba1bag5ZQxliS8yy3HAjpzwtvMie7HkIwxsl4GnCp3hPmflslWEwtzIXrNBd7s38D_sN4PCPjTdRlkpv8k-Oc7U6NxRYgryr5ClzYZ_qtVJUhQWSCt/s1600/search-icon.png' />
</div>

<!--搜尋框 CSS-->
<style>
#search_input {
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>

<!--搜尋框 JS-->
<script>
(function($){var $search_input=$("#search_input"),init=function(){$("html, body").scrollTop(0);var query=$search_input.val().replace(/ /g,"%20"),queryUrl="/search?q="+query+" #Blog1";ajaxLoad(query,queryUrl)},ajaxLoad=function(query,queryUrl){var _0xed55=["\x33\x20\x36\x3D\x22\x3C\x69\x20\x32\x3D\x27\x31\x64\x3A\x20\x31\x63\x20\x4C\x3B\x37\x2D\x34\x3A\x20\x47\x3B\x27\x3E\x3C\x43\x20\x42\x3D\x27\x78\x3A\x2F\x2F\x31\x65\x2E\x59\x2E\x6A\x2F\x2D\x31\x34\x2F\x31\x6C\x2F\x31\x6E\x2F\x31\x70\x2F\x77\x2F\x51\x2D\x53\x2E\x36\x27\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x2F\x3E\x3C\x35\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x3E\x20\x31\x66\x20\x31\x69\x2E\x2E\x2E\x3C\x2F\x35\x3E\x3C\x2F\x69\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x68\x28\x36\x29\x3B\x24\x28\x22\x23\x79\x22\x29\x2E\x7A\x28\x41\x2C\x39\x28\x29\x7B\x33\x20\x63\x3D\x24\x28\x22\x2E\x44\x2D\x45\x2D\x46\x22\x29\x2C\x61\x3D\x48\x20\x49\x28\x22\x28\x22\x2B\x4A\x2B\x22\x29\x22\x2C\x22\x4B\x22\x29\x2C\x62\x3D\x22\x3C\x69\x20\x32\x3D\x27\x37\x2D\x34\x3A\x20\x4D\x3B\x20\x4E\x2D\x4F\x3A\x20\x50\x3B\x27\x3E\u6280\u8853\u63D0\u4F9B\uFF1A\x3C\x61\x20\x6F\x3D\x27\x52\x3A\x2F\x2F\x76\x2E\x54\x2E\x6A\x2F\x55\x2F\x56\x2F\x57\x2D\x58\x2D\x71\x2D\x5A\x2E\x68\x27\x20\x31\x30\x3D\x27\x31\x31\x27\x20\x32\x3D\x27\x37\x2D\x31\x32\x3A\x20\x31\x33\x3B\x27\x20\x72\x3D\x27\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x35\x20\x31\x36\x27\x3E\u24E6\x20\x31\x37\x20\u52D5\u614B\u641C\u5C0B\u6846\x3C\x2F\x61\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x31\x38\x28\x62\x29\x3B\x24\x28\x22\x2E\x31\x39\x2D\x72\x20\x61\x2C\x20\x2E\x31\x61\x22\x29\x2E\x31\x62\x28\x39\x28\x29\x7B\x33\x20\x64\x3D\x38\x2E\x73\x3B\x64\x3D\x64\x2E\x74\x28\x61\x2C\x22\x3C\x35\x20\x32\x3D\x27\x31\x67\x3A\x20\x23\x31\x68\x27\x3E\x24\x31\x3C\x2F\x35\x3E\x22\x29\x3B\x38\x2E\x73\x3D\x64\x7D\x29\x3B\x63\x2E\x75\x28\x22\x61\x22\x29\x2E\x31\x6A\x28\x22\x31\x6B\x22\x2C\x39\x28\x29\x7B\x33\x20\x66\x3D\x63\x2E\x75\x28\x22\x62\x22\x29\x2E\x68\x28\x29\x2E\x74\x28\x22\x20\x22\x2C\x22\x25\x31\x6D\x22\x29\x2C\x64\x3D\x38\x2E\x6F\x2C\x67\x3D\x64\x2E\x31\x6F\x28\x22\x2F\x71\x22\x29\x2C\x65\x3D\x64\x2E\x31\x71\x28\x67\x29\x2B\x22\x20\x23\x31\x72\x22\x3B\x31\x73\x28\x66\x2C\x65\x29\x3B\x31\x74\x20\x31\x75\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x73\x74\x79\x6C\x65\x7C\x76\x61\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x73\x70\x61\x6E\x7C\x67\x69\x66\x7C\x74\x65\x78\x74\x7C\x74\x68\x69\x73\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x68\x74\x6D\x6C\x7C\x64\x69\x76\x7C\x63\x6F\x6D\x7C\x6D\x69\x64\x64\x6C\x65\x7C\x64\x61\x74\x65\x7C\x6F\x75\x74\x65\x72\x7C\x65\x71\x7C\x68\x72\x65\x66\x7C\x76\x65\x72\x74\x69\x63\x61\x6C\x7C\x73\x65\x61\x72\x63\x68\x7C\x74\x69\x74\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x66\x69\x6E\x64\x7C\x77\x77\x77\x7C\x73\x35\x31\x32\x7C\x68\x74\x74\x70\x73\x7C\x6D\x61\x69\x6E\x7C\x6C\x6F\x61\x64\x7C\x71\x75\x65\x72\x79\x55\x72\x6C\x7C\x73\x72\x63\x7C\x69\x6D\x67\x7C\x73\x74\x61\x74\x75\x73\x7C\x6D\x73\x67\x7C\x62\x6F\x64\x79\x7C\x63\x65\x6E\x74\x65\x72\x7C\x6E\x65\x77\x7C\x52\x65\x67\x45\x78\x70\x7C\x71\x75\x65\x72\x79\x7C\x69\x67\x7C\x61\x75\x74\x6F\x7C\x72\x69\x67\x68\x74\x7C\x66\x6F\x6E\x74\x7C\x73\x69\x7A\x65\x7C\x31\x32\x70\x78\x7C\x69\x6E\x64\x69\x63\x61\x74\x6F\x72\x7C\x68\x74\x74\x70\x7C\x6C\x69\x67\x68\x74\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x32\x30\x31\x36\x7C\x30\x31\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x61\x6A\x61\x78\x7C\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x62\x6F\x78\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x45\x79\x56\x5A\x30\x66\x38\x4A\x30\x71\x51\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x41\x6A\x61\x78\x7C\x62\x65\x66\x6F\x72\x65\x7C\x70\x6F\x73\x74\x7C\x73\x65\x61\x72\x63\x68\x50\x61\x67\x65\x5F\x73\x6E\x69\x70\x70\x65\x74\x7C\x65\x61\x63\x68\x7C\x32\x30\x70\x78\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6C\x68\x35\x7C\x70\x6C\x65\x61\x73\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x39\x39\x30\x30\x30\x30\x7C\x77\x61\x69\x74\x7C\x6F\x6E\x7C\x63\x6C\x69\x63\x6B\x7C\x55\x43\x65\x45\x47\x37\x61\x61\x38\x6E\x49\x7C\x32\x30\x7C\x41\x41\x41\x41\x41\x41\x41\x41\x44\x74\x59\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x39\x73\x58\x77\x35\x33\x58\x6B\x59\x58\x4D\x7C\x73\x75\x62\x73\x74\x72\x7C\x42\x6C\x6F\x67\x31\x7C\x61\x6A\x61\x78\x4C\x6F\x61\x64\x7C\x72\x65\x74\x75\x72\x6E\x7C\x66\x61\x6C\x73\x65","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x758ax1,_0x758ax2,_0x758ax3,_0x758ax4,_0x758ax5,_0x758ax6){_0x758ax5=function(_0x758ax3){return(_0x758ax3<_0x758ax2?_0xed55[4]:_0x758ax5(parseInt(_0x758ax3/_0x758ax2)))+((_0x758ax3=_0x758ax3%_0x758ax2)>35?String[_0xed55[5]](_0x758ax3+29):_0x758ax3.toString(36))};if(!_0xed55[4][_0xed55[6]](/^/,String)){while(_0x758ax3--){_0x758ax6[_0x758ax5(_0x758ax3)]=_0x758ax4[_0x758ax3]||_0x758ax5(_0x758ax3)}_0x758ax4=[function(_0x758ax5){return _0x758ax6[_0x758ax5]}];_0x758ax5=function(){return _0xed55[7]};_0x758ax3=1}while(_0x758ax3--){if(_0x758ax4[_0x758ax3]){_0x758ax1=_0x758ax1[_0xed55[6]](new RegExp(_0xed55[8]+_0x758ax5(_0x758ax3)+_0xed55[8],_0xed55[9]),_0x758ax4[_0x758ax3])}}return _0x758ax1}(_0xed55[0],62,93,_0xed55[3][_0xed55[2]](_0xed55[1]),0,{}))};$search_input.on("keyup",function(e){if(e.which==13){init()}});$("#search_btn").on("click",init)})(jQuery);
</script>
<!--Ajax 搜尋框, designed by WFU BLOG-->

  • 第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
  • 如果熟悉 HTML,<!--搜尋框 HTML--> 這個區塊是搜尋框的版面構成,可自行修改例如圖示等細節。
  • 如果熟悉 CSS,<!--搜尋框 CSS--> 這個區塊是搜尋框的 CSS 版面設定,可自行調整參數。

儲存後即可測試效果。



二、搜尋效果


blogger-ajax-search-box-result-Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

上圖為從「Blogger工具效果展示」網站,測試搜尋字串 "blogger" 的示意圖,效果大致有這些:

  • 若文章有縮圖,則顯示 72x72(px) 正方形縮圖;無縮圖則顯示預設圖案。
  • 文章或摘要出現字串 "blogger" 時,無論大小寫,一律用紅字標示出來。
  • 預設顯示結果依據 "關連性",可看到文章日期不連續。
  • 若要依據 "日期" 排列,可按下 "依日期排序",同樣會採 "Ajax 動態載入" 即時顯示,不會重整頁面。




三、小結


如上一篇提到的,使用這個「官方導覽列搜尋框」來改造,有這些優點:

  • 保證能夠搜尋到部落格的每一篇文章
  • 搜尋結果能即時 Ajax 動態載入頁面
  • 不需要安裝外掛(沒有外連檔案)、程式碼很短
  • 不像「Google 自訂搜尋」需要等待頁面載入完才顯示(馬上就看得到搜尋框)

綜合比較以上幾點,這個工具的確是「Google 自訂搜尋」的絕佳替代方案。


更多 Blogger 搜尋工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP