2007年3月4日星期日

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);

即可。

1 评论:

Anonymous 说...

google官方博客的模板挺清爽的,不知道博主能不能提供一下。

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆