blogger 3.0:杀手级应用，把横向和侧边式ajax搜索结合起来放进你的博客

哦，似乎是google服务器问题。基本上好了。

Google 搜索API升级了控制系统。现在可以任意把搜索结果和搜索本身分开放在其他地方了。
只是单纯把搜索框和搜索结果分开没有什么意思，所以干脆更进一步把搜索结果也分成两部分~~

像我博客目前这样，主要搜索本博客的结果出现在博客中间，搜索一些不相干的内容如全部博客，新闻，视频，图书，地图都放在了侧边栏。大家可以搜索看看，是不是比以前更直观了更方便？！o(∩_∩)o...哈哈!开心~~

当然，具体哪些搜索放在中间，哪些放在旁边都是大家自己可以设定的。而且这次变更会让你的博客打开速度更快，因为现在搜索会在整个博客加载完成以后再加载~~

安装方法：首先第一步在下面的网址申请一个google AJAX搜索API的key ：http://code.google.com/apis/ajaxsearch/signup.html

很容易就能申请到，只需输入你要申请的网址，然后同意google条款，确定~~得到一个key的代码。

第二步：把下面的代码加入你的排头， 正好放在 ] ] ></b:skin> 后面， </head> 前面。

]]></b:skin>

<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("GG派");
blogSearch.setSiteRestriction("http://ggpi.blogspot.com");
searchControl.addSearcher(blogSearch, options);
siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
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>

</head>

注意把上面深红色的KEY替换成你自己第一步申请到的key。

把后面深红色的我的GG派的名称和网址，替换成你的博客的名称和网址。

最后保存模板。

第三步，切换到页面元素（会出现弹出窗，英文意思是说你申请的key不对头，点确定忽略之！）。

新建两个页面元素，分别放进以下代码：
<div id="somewhere_else">读取中/Loading...</div>
上面代码放进的页面元素将显示分离出来的搜索结果。

<div id="search_control">读取中/Loading...</div>
上面代码放进的页面元素将显示搜索框和搜索框下面的搜索结果。

注意上面两个页面元素的代码“读取中/Loading...”是可以改成任何文字或图片的，例如我把其中一个改成了flash的读取中了：）具体如何显示flash或图片，请参考我的这篇文章。

是的，这里就已经完工了，非常简单吧！

以上为最简单的傻瓜安装方法。下面讲高级定制方案：

如何具体定制你想要搜索内容出现在哪里呢？秘诀就在第二步代码这里：

siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);

看到我上面引用的两处深色代码没有？
012783045486823201394:5kgglhdahug 是你的自定义搜索可以得到的key，由此你就可以把自己的自定义搜索也加到ajax搜索里来了。如果你不知道什么是自定义搜索，不要在意我说的话……

注意到这一行代码searchControl.addSearcher(siteSearch, options);的深色部分, options就表示这个搜索结果会显示在分离出来的搜索结果里。

例如第二步代码里的这一行代码searchControl.addSearcher(new GblogSearch());
就代表了在搜索框下面出现的博客搜索结果。如果想要博客搜索结果出现在分离出来的搜索结果里，就把, options加进去，代码变更为：

searchControl.addSearcher(new GblogSearch(), options);

即可。