nvoms123`s blog: Google AJAX Search放至網頁中

樣式一:

如果你是blogger的用戶那方法很簡單。只要至https://draft.blogger.com/draft登入你的帳號，接著選版面配置、加入網頁元素、搜尋框即可。
樣式二:

此方法適用所有網頁，且可包含視訊(Video)跟地址查詢(Local)，地址查詢再點選路線可連至google map。先至http://code.google.com/apis/ajaxsearch/點選 Start using the Google AJAX Search API 申請API Key。之後勾同意並將想設定的網頁貼上就可產生。取代key=qqqqqqqqqqqqqqqq成自已的key．然後再將以下http://nvoms123.blogspot.com取代成自已的網誌即可。
<head>之後]]></b:skin>與</head>之間，

<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=qqqqqqqqqqqqqqqq' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }

/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }

/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}

</style>
<script type='text/javascript'>
var coreSearch;

function SolutionLoad() {

var controlRoot = document.getElementById("searchControl");

// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("The Web");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blogs");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setSiteRestriction("http://nvoms123.blogspot.com/");
searcher.setUserDefinedLabel("This Blog");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setSiteRestriction("http://googleblog.blogspot.com/");
searcher.setUserDefinedLabel("Google Blog");
coreSearch.addSearcher(searcher);

searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger");
coreSearch.addSearcher(searcher);

var searcher = new GvideoSearch();
searcher.setUserDefinedLabel("Video");
coreSearch.addSearcher(searcher);

var searcher = new GlocalSearch();
searcher.setUserDefinedLabel("Local");
coreSearch.addSearcher(searcher);

coreSearch.draw(controlRoot, drawOptions);

}

function doCoreSearch(q) {
coreSearch.execute(q);
}

registerLoadHandler(SolutionLoad);

function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>

最後在<body>與</body>之間放上搜尋框<div id="searchform">Loading...</div>與搜尋結果<div id="searchControl">Loading...</div>就完成了。
引用網址:http://hoctro.blogspot.com/2006/12/simple-hack-basic-ajax-search-utility.html

nvoms123`s blog

2007年9月1日星期六

Google AJAX Search放至網頁中

沒有留言:

2007年9月1日 星期六

Google AJAX Search放至網頁中

沒有留言:

2007年9月1日星期六