今天弄了差不多将近一个下午,才完完全全的搞定谷歌的自定义搜索,原因是新出的界面不熟悉,而且爆出了个漏洞,幸亏看得懂代码解决了。不过也耽误了不少时间。

先上效果图:

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

新版的自定义搜索有了很多的不同,现实有了文章图片缩略图现实功能,这个对于图片很多的博客很有用处。对搜索者本身体验感觉也非常的好。

而且重要的一点是你不用申请Adsense账户也可以使用谷歌的自定义搜索功能,同时搜索框支持搜索词预览,也就是那种搜索引擎你只打了一个

字,会出现一个下拉框里面是候选搜索词。

你可以在两个地方申请该功能。

一、是在谷歌的网站管理工具里申请

如下图:

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

申请地址:https://www.google.com/webmasters/tools/home

有两种选择

1: 提供的免费版搜索引擎,但头部有广告,如果你有Adsense账户可以与现有账户绑定来赚钱。

2: 收费的自定义搜索,即去处了广告。起价为每年 100 美元。结果页不显示任何广告。

二、第二种申请方式为直接申请,如果你不想使用谷歌的网站管理工具那么就直接到他的自定义搜索管理页面申请.

申请地址: http://www.google.com/cse/

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

推荐第二种,因为谷歌管理工具真的是站长的好帮手可以发现并改善那些不合理的网站设计。同时也能提升谷歌搜索对你网站收录的友好程度。

好了入正题,怎么使用并添加代码呢?其实非常简单至不过有些地方需要修改。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

第一步新建搜索引擎

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

按照上图填写个人信息点击下一步。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

选择样式,你可以直接下一步,等完全添加好代码后再设置。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

现在得到的代码只能用在单页里,也就说搜索框与搜索结果是显示在同一页里的,不能放置在侧边栏里,如果你想放置到侧边栏与结果页分开,那么接着往下看。

注意如果你想用单页的也要把教程看完,因为现在的代码还不可以直接使用要进行修改!

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

单击我的搜索引擎,在这里你可以找到你曾经包括你在Adsense账户上创建的自定义搜索引擎。

单击你刚才创建的搜索引擎的 控制面板。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

光看截图就能想象到新版的谷歌自定义搜索引擎的强大了。

选择外观

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

在布局中选择 两页,那么你的搜索框与搜索结果代码将会分开。

然后点击保存并获取代码。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

那个网址是指你要显示搜索结果页的网址。如果你的是wordpress你可以创建一个页,那么那个页的网页地址就是这个结果页的地址。

现在是最后一步也是最关键的一步,要修改一下代码,因为他提供的代码的谷歌自定义搜索会导致css失效,或者谷歌自定义搜索无法跳转到结果页。

最新版谷歌自定义搜索教程:没有Adsense账户也可以为博客添加自定义搜索! 谷歌自定义搜索教程 谷歌自定义搜索 css 出错 新版谷歌自定义搜索出错  other related ji shu

这样就OK 了,也不知道怎么回事  谷歌自定义搜索的代码会出错。估计应该是程序上有问题。

如果大家想看实际的效果如何可以到

http://brushes8.com/search/   去观看下

新功能! 使用具有弹性布局选项和丰富结果模板的自定义搜索元素将 Google 自定义搜索嵌入您的网页。

新功能! 为您的搜索引擎启用自动填充功能,以便帮助用户更快地获取需要的结果。

这个是他的广告词,这两项都很不错。

属性标签: , ,