Blogger Hack - 結合了AJAX的Google search

如果各位有使用我的Google search，就知道已經對應了AJAX，除了比較美觀外，這功能亦比普通的Google search方便不少，不需轉跳頁面節省時間，減少popup或分頁，而它在搜索結果中已幫好大家分門別類，當要找到專門資料時(例如書籍,影片等)，它都能一一幫你分類而不需要在搜尋結果中以肉眼再繼續查找。又是廢話少說，大家依足步驟安裝來享受玩意吧。

第１步，請到google登記API key請按此進，輸入簡單的資料，接受條款後就會得到一個Key

第２步，將以下代碼放到]]></b:skin>與</head>之間

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<style type="text/css">
.gsc-control {
width: 95%;
}
</style>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("The First Dimension");
blogSearch.setSiteRestriction("http://kazyrix.blogspot.com");
searchControl.addSearcher(blogSearch, options);
siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("Internet");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));
// execute an inital search
searchControl.execute(initSearch);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

之後將剛在申請到的key替換到代碼中紅色key的位置，另外請自行把網誌的URL及網誌名稱改回自己的名稱及URL(紅色的兩欄)，之後就可以保存。

第三步，切換到網頁元素（如出現API提示信息，不用理會，直接按確定)，建立兩個頁面元素（位置請選擇自行想顯示的地方）放進以下代碼

<div id="search_control">讀取中／Loading...</div>

上面的搜尋框，下面的是結果，記著是分開放的

<div id="somewhere_else">讀取中/Loading...</div>

如果要自定結果分類，就在第２步的代碼中找到

searchControl.addSearcher(siteSearch, options);
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());
就在最後一個)前加上, options，就像上面的代碼第一行那例子一樣。

當一切儲存後，就可感受一下這個玩意了。教學出自GG派
P.S.應該下一次blogger更新就會直接加進這功能，只需在網頁元素一鍵添加，現在我放出只是先載先享受。