2006年12月15日星期五

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&amp;v=1.0&amp;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&amp;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>










声明:本hack基础于Hoctro 的hack,不过个人进行了大范围修改和补充,目前还没有任何英文博客 和ajax官方论坛指出这些方法,所以本人拥有全部版权,他人转载必须在文章开头说明转载于GG派和链接本博客!

0 评论:

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