让google搜索结果显示在侧边（新发现）
今天随便逛逛，突然发现小隔間裡的人生上面的侧边站内搜索很酷，我用了很多关键字都无法找到那样效果的方法，最后使用关键字：var searchControl = new GSearchControl();，才找到了答案（搜索关键字可以随机应变啊，这段代码是看了小隔間裡的人生博客页面代码里翻出来的），原来也是利用Google AJAX Search 搜索控件，可以定制自己需要的样式，在页面前端显示具有个性的Google AJAX Search 控件，也不敢说是新发现，可能对于知道的人，这个方法不是什么新鲜事情，只能说在我周围所看过的博客中，还没发现有用这样效果的，特发出来给身边的朋友分享。
于是把这种效果应用到了自己侧边来，想测试是什么效果可以看下本站的右侧站内搜索，是不是很不错？
为了一些懒的朋友，我就直接把方法给说出来，大家也不用研究本站代码了。
<link href=”http://www.google.com/uds/css/gsearch.css” type=”text/css” rel=”stylesheet”/>
<style>
/* Width */
.gsc-control {
width: 180px;
overflow: hidden
}
.gs-result .gs-title,
.gs-result .gs-title * {
font-size: em;
color: #;
}
.gsc-results .gsc-trailing-more-results,
.gsc-results .gsc-trailing-more-results * {
color: #;
}
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #;
}
.gs-result a.gs-clusterUrl,
.gs-result .gs-clusterUrl {
color: #;
}
.gsc-resultsbox-visible {
display: table;
width: 100%;
overflow: hidden
}
</style>
<script src=’http://www.google.com/uds/api?file=
uds.js&v=1.0&key=ABQIAAAAuJc1GDVCpDwAMaW_cu
NpVxRyt432zXfyzuSWz38eUOVihRKKARRRmyqfLCYx6N
wT-2uBfIz3cs1-CQ’ type=’text/javascript’></script>
<!– Google AjaxSearch Plugin for WordPress initialization –>
<script type=’text/javascript’>
function OnLoad()
{
var searchControl = new GSearchControl();
searchControl .setLinkTarget(GSearch.LINK_TARGET_SELF);
var webSearch = new GwebSearch();
webSearch.setSiteRestriction(“http://www.xptt.com”);
webSearch.setUserDefinedLabel(“Results”);
webSearch.setUserDefinedClassSuffix(“webSearch”);
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(webSearch, options);
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
searchControl.draw(document.getElementById(“searchcontrol”),drawOptions);
}
GSearch.setOnLoadCallback(OnLoad);
</script>
把上面真段代码放在页首，把下面代码放在侧边：
<div id=”searchcontrol” width=”100%”>
<form method=”get” action=”http://blogsearch.google.com/blogsearch”>
<input name=”as_q” size=”16″ maxlength=”255″ value=”" type=”text”>
<input name=”sa” value=”Search” type=”submit”>
<input name=”bl_url” value=”http://www.xptt.com” type=”hidden”>
</form>
</div>
有兴趣深入研究的朋友，再看看下面，列出一个例子，并加注释：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>使用 Google AJAX Search API</title>
<link href=”http://www.google.com/uds/css/gsearch.css“
type=”text/css” rel=”stylesheet”/>
<script src=”http://www.google.com/uds/api?file=
uds.js&v=1.0?key=ABQIAAAAUbR6g0RGGvD3wc8n
EOCNZhQ1-r6OYR-mHk-jCzYLxV7O5V1vk
BR9GY27V0NNKkh2ASTbqJMDYJeu2A“
type=”text/javascript”></script>
<script language=”Javascript” type=”text/javascript”>
//<![CDATA[
function OnLoad() {
// 创建Google Search控件
var searchControl
= new GSearchControl();
// 通过 Google 本地搜索服务使用 GSearchgoogle.search.Search 界面
var localSearch = new GlocalSea
rch();
// 为创建的Google Search控件定制检索的集合(分类检索)
searchControl.addSearcher(localSearch);
// 下面是一组分类检索控件，任何一个检索的结果集合是使用Google Search控件执行检索得到结果的子集
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
//searchControl.addSearcher(new GimageSearch());
//searchControl.addSearcher(new GbookSearch());
localSearch.setCenterPoint("New York, NY"); // 建立用于限制搜索结果范围的中心点
var dOptions = new GdrawOptions();
dOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
//dOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
dOptions.setSearchFormRoot(document.getElementById("searchcontrol"));
var elem = document.getElementById("result");
// 在指定位置显示Google Search搜索控件检索结果
searchControl.draw(elem,dOptions);
//searchControl.execute(www.xptt.com);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id=”searchcontrol” style=”width:300px ; background-color:red”></div>
<div id=”result” style=”width:300px ; background-color:#00FFCC ; position:absolute ; top:80px”></div>
</body>
</html>
最后再次感谢来我博客花了时间给出评论的朋友！
标签：google, 侧边, 搜索
楼主，我发现你太山寨了。哈哈
回复：山寨版楼主？
[回复]