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派和链接本博客!

7 评论:

匿名 说...

注意:演绎行为也属侵权,从你的声明就可以看出:你的声明是无效的,你侵犯了soctro的版权,我建议你去好好学习版权法,免得闹笑话:)

GG 说...

首先作者已经授权再编绎和翻译,只要不用于商业行为,所以我并没有侵权。不仅没有侵权,还因为翻译和再编绎获得一定的版权。你自己好好学习版权法!

其次,你个小人有本事不要匿名,男子汉大丈夫亮出你的名字来!

哪个小人喜欢抄别人文章又在这里匿名说话,不害臊!

你说大家都是翻译互相不认识不知道也就罢了。结果当人是朋友,兴冲冲告诉这个人刚刚翻译,并且除了翻译外还进一步解决技术问题。另外一个人立刻把文章也发一遍,美其名曰同翻。

这个人人品如何?

所以这个声明本身也是防小人不防君子……
免得小人说:你没有声明……
现在不仅声明了,还把共享版权的法规徽标放在博客上了。

所以现在是全副武装,和作者本人也联系了。在google ajax官方论坛也声明了。随时准备在论坛,博客和所有朋友的博客论坛上共同谴责盗窃者。

GG 说...

为什么国外别人博客技术讨论的那么好,别人10多个主要hack互相探究技术,是哪个人先想出来的就是哪个人,中间哪个人再编译加了东西进去就是中间谁再编译过。

国内就非要像匿名的这位这样,把什么东西搞的那么丑!鸭子死了嘴巴硬!还版权,你人格都没有了 !

不过本博客继续坚持应有的博客态度,哪个先翻译的文章,哪个就是本博客承认的作者。

本博客要介绍该文章,必定会介绍该翻译者。

这就叫风格,品德。你个匿名的小贼就学着吧。小小年纪就不学好,一点胃口没有,你上社会就等着被人整吧!

匿名 说...

你在文章前说明一下:作者已经授权再编绎和翻译,只要不用于商业行为,所以我并没有侵权。免得被人误解.另外,匿名人士并未涉及人身攻击,仅就版权问题发表了一些看法,有些中国人翻译了人家的文章,一个"感谢"就将原作者的版权归如自己囊中,还宣布"本人拥有全部版权",这个交易直啊,中国人的感谢就是比外国人的值钱!有本事写点独创作品出来,让匿名人士心服口服!如果有楼主的心态,"为什么国外别人博客技术讨论的那么好,别人10多个主要hack互相探究技术,是哪个人先想出来的就是哪个人,中间哪个人再编译加了东西进去就是中间谁再编译过。"这只能是牢骚话了,在中国行不同的.

GG 说...

什么规则都是你定的?我博客写文章既然链接了作者原文,不服气的自己到作者博客上去看,而且因为是反向链接的,作者看到这个链接文章侵权自然也会来说,轮不到你在这里放屁。

不要动不动就中国怎么样,中国人怎么样。中国怎么样不是你说的!
你自己低级不尊重别人劳动,做了错事有不承认,就认为中国人都跟你一样?
可以放心的说,你才是中国的特例!估计是几十年前老妈被日本人强奸了六在中国的祸害!

你这个匿名的来一次我骂一次,你犯贱就继续在这里!

Chen Bo 说...

看到争吵,俺一般是喜欢去搅混水凑人气的,呵呵。
这里,发表一下个人意见:无论如何不喜欢匿名的方式。署个名,相互了解了,哪怕真有相左的意见争论起来也会客气些也有助于解决问题。
上述意见与争论内容好像无关,呵呵。反正俺不懂版权法。

匿名 说...

以下发表的仅是我对这次的看法。
不知道之前匿名干过什么?感觉开始时gg不是很友善。。不过gg完全可以有自己的情绪,但会被不知情的人误解。
对于匿名,我想说,由于原作者同意再翻译和转载,而且gg并没用于商业目的。所以在这上面并不需讲什么版权吧。gg辛苦无偿地为大家提供这些hacks,其中倾注了他很多心血。我们也应该尊重他的劳动成果!

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