GG派ggq.blogspot.com: blogger 3.0:把google AJAX搜索API加到你的博客2 侧边栏样式（更新）

首先依然感谢作者 Hoctro，这个hack技巧实在太完美了~~~超级推荐大家使用。

要察看这个hack的样式，请到下面这里：或者到我的测试版博客上查看：http://ggpie.blogspot.com
http://www.google.com/uds/samples/apidocs/helloworld.html

第一步: 在下面的网址申请一个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'/>

</head>

第三步：增加一个新的HTML/JavaScript页面元素到你的博客，放在你想让此搜索出现的地方。取名“定位”，以便你等会找到这个页面元素位置。

第四步：在模板处点击修改html，记得选择扩展窗口小部件模板，然后用以下代码完全替换你刚刚添加的页面元素。记得用你自己申请的key替换下面的ABQIAAAA3JLs6Hnniw7MynpQ，下面的代码已经更新于12月19日，代码可以直接复制了！

<b:widget id='HTML50' locked='false' title='google' type='HTML'>
<b:includable id='main'>
  <div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA3JLs6Hnniw7MynpQ' type='text/javascript'/>
  <script type='text/javascript'>

      var local="<data:title/>";
      var initSearch="<data:content/>";

      // Create a search control
      var searchControl = new GSearchControl();

      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      var s = new GblogSearch();
      s.setSiteRestriction("http://ggpi.blogspot.com");
      s.setUserDefinedLabel("GG派");
      searchControl.addSearcher(s);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GblogSearch());
      var s = new GwebSearch();
      s.setSiteRestriction("003117241993791897404:-hoflajhuok");
      s.setUserDefinedLabel("中文博客");
      searchControl.addSearcher(s);
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GvideoSearch());
      // Set the Local Search center point
      localSearch.setCenterPoint(local);

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute(initSearch);

    </script>
</b:includable>
</b:widget>

别忘了把上面代码的gg派的名称改成你得博客名称，把http://ggpi.blogspot.com的地址改成你博客的地址，除非你想帮我宣传博客哈：）

最后保存修改，成功！上面的代码直接复制到html里有问题的，这里是我的测试博客的xml文档（右键另存为），供您参考。

但是还有个问题，使用官方的css代码你把搜索的页面元素拖到侧边栏，结果搜索太宽了无法显示完全怎么办？把那个css文件下载下来，修改以后再存放到你的googlepages空间去（别忘记把开头的css地址也相应更改），找到开头的如下代码：
* .gsc-control : the primary class of the control
*/
.gsc-control {
width: 300px;←把这里的300改成你想要的宽度即可,想让搜索栏自动填满页面元素的宽度？输入90%或者100%，实际效果自己实验了
}
当然如果你不想申请googlepages空间，又没有空间存放这个css文件，你也可以把你修改过的css文件里的内容全部复制以后放到 ] ] ></b:skin> 的前面，这样就可以了。

注意你自己修改css文件的话，原来css文件调用的图片链接都要修改。这里是我把图片链接修改好的CSS文件，点击右键下载

另外再跟大家详细解释一下代码的作用：

<b:widget id='HTML50←这里其实可以随意使用数字替换，只要50或者什么数字不跟其他的页面元素的数字重复就可，作用就是替换删除原来的页面元素。' locked='false' title='google←这里的作用就是替换到原页面元素后不让新作的搜索作用，不信你换个名字看看' type='HTML'>
<b:includable id='main'>
<div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA3JLs6Hnniw7MynpQ←填写你申请到的key，不会还不知道吧？' type='text/javascript'/>
<script type='text/javascript'>

var local="<data:title/>";
var initSearch="<data:content/>";

// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();←这个很重要，这个定义代码必须有，不然……
searchControl.addSearcher(localSearch);←定义使用google本地搜索
searchControl.addSearcher(new GwebSearch());←定义使用google互联网搜索
searchControl.addSearcher(new GvideoSearch());←定义使用google视频搜索
searchControl.addSearcher(new GblogSearch());←定义使用google博客搜索
searchControl.addSearcher(new GnewsSearch());←定义使用google新闻搜索
var s = new GblogSearch();←要添加自己的博客搜索，首先定义运用博客搜索
s.setSiteRestriction("http://ggpai.blogspot.com");←其次定义拟通过博客搜索要搜索的网站或网域，例如这里更改成http://www.blogger.com 就成了博客作者搜索
s.setUserDefinedLabel("GG派");←显示的搜索名称
searchControl.addSearcher(s); ←定义你的搜索的，每个新添加搜索都要
var s = new GwebSearch();←要添加google自定义搜索，必须定义为网络搜索
s.setSiteRestriction("003117241993791897404:-hoflajhuok←这里输入你自定义搜索的code的用于ajax API的控制码");
s.setUserDefinedLabel("中文博客");←显示的搜索名称
searchControl.addSearcher(s); ←重要的定义

// Set the Local Search center point
localSearch.setCenterPoint(local←这里可以设定默认本地搜索地点，如New York, NY);

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// execute an inital search
/> searchControl.execute(initSearch);

</script>
</b:includable>
</b:widget>